昨日内容回顾

  • BOM操作
    浏览器模型操作，通过window关键字对浏览器窗口进行操作。
    新建窗口、关闭窗口、查看浏览器版本、查看当前页网址、三种弹出框、设置定时任务、设置循环任务等
  • DOM操作
    文档模型操作，主要对HTML文档对象进行操作。
    查找标签、生成及编辑标签、操作class及CSS、为事件添加指定操作等
  • jQuery类库
    jQuery是对JS的操作的封装，使用者能用更加简洁的语句实现复杂的操作。
    使用jQuery必须先再HTML文档中加载，在文档的script标签中导入jQuery文件的路径。
    jQuery语句返回的对象为jQuery对象，可与JS的标签对象相互转换。

今日内容概要

  • jQuery标签操作
  • jQuery事件操作
  • Bootstrap页面框架

今日内容详细

jQuery标签操作

查找标签

基础用法

查找标签的主要格式为 $('标签名')，适用CSS中的选择器的选择规则。

对查找的结果标签名后跟冒号可以对选择的结果进行指定查找，主要关键字有：

first / last / eq() / even / odd / gt() / lt() / not() / has()

也可使用选择后的结果点以上关键字，结果是一样的。

表单选择器

在对表单内的标签进行筛选时，可以省略form关键字，直接使用冒号后跟标签的属性，注意在选择属性为checked的标签时会连带筛选属性为selected的标签，选selected的时候则不会连带。

标签对象其他关键字

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 所有子标签元素
$("#id").siblings();// 前后相邻标签元素

操作标签

class操作

添加类别  addClass()
移除类别  removeClass()
判断是否拥有类别  hasClass()
切换类别有无  toggleClass()

位置操作 $(window).scrollTop()

文本操作

替换内部文本  text()
替换内部HTML代码  html()
替换值  val()

创建新标签 $('< 标签名 >')

文档处理

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
    
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

事件操作

绑定事件

jQuery事件绑定
	方式1:
		jQuery对象.事件名(function(){})
 	方式2:
    	jQuery对象.on('事件名称',function(){})
 	ps:默认就用方式1 不行了再用方式2
ps:补充
    clone属性
    	clone(true)  默认不克隆事件 加true就可以

阻止后续事件 事件最后添加return false关键字。

事件委托

使动态创建的标签也可以使用绑定的事件。
$('body').on('click','button',function(){})

Bootstrap页面框架

该框架包含了各种预设的CSS样式以及JS脚本，使用时只需要引用相关样式的代码可。

CDN链接：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap使用案例

布局相关

使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

常用样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.导航条
	class="navbar navbar-inverse"
3.其他