昨日内容回顾
-
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.其他