前端6.jq/bootstrap框架
- 筛选器方法
- 操作标签
- jQuery 绑定事件
- 阻止后续事件
- 事件冒泡
- 事件委托
- Bootstrap框架
筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUnTIL("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parent() //查找当前元素的所有的父辈元素
$("#id").parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的哪个元素为止
儿子和兄弟元素：
$("#id").children(); //儿子们
$("#id").siblings(); //兄弟们
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
$("div").find("p")
等价于$("div p")
筛选
筛选出·指定表达式匹配的元素集合，这个方法用于缩小匹配的范围，用逗号分隔多个表达式
$("div").filter(".c1") //从结果中过滤出有c1样式类的
等价于$("div.c1")
.first() //获取匹配的第一个元素
.last() //获取匹配的最后一个元素
.not() //从匹配元素的集合中删除与指定表达式匹配的元素
.has() //保留包含特定后代的元素，去掉那些不含有指定后代的元素
.eq() //索引值等于指定值的元素
操作标签
JQ和Js比较
属性操作
----【JQuery操作】---------------------------------【JS操作】-------------------------
addClass(); //添加指定的css类名 classList.add()
removeClass(); //移除指定的css类名 classList.remove()
hasClass(); //判断样式不存在 classList.contains()
toggleClass(); //切换css类名，如果有就移除，如果没有就添加 classList.toggle()
样式操作【CSS】
css("color","red")//DOM操作：tag.style.color="red"
示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset() //获取匹配元素在当前窗口的相对偏移或者设置元素位置
position() //获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移
scrollTop()--实时检测距离案例
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
文本值操作
//HTML代码：
html() //取得第一个匹配元素的html内容
html(val) //设置所有匹配元素的html内容
//文本值：
text() //取得所有匹配元素的内容
text(val) // 设置所有匹配元素的内容
//值
val() //取得第一个匹配元素的当前值
val(val) //设置所有的匹配元素的值
val(val1，val2) //设置多选的checkbox，多选select的值
'''不写值就是获取，写了就是设置'''
----------例子--------------------------------
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
属性操作
$('div').attr('style') #获取第一个标签的style属性值
$('div').attr('class','c1') #批量设置单个
$('dev').attr('{'name':'jason','pwd':'123'}) #批量设置多个
$('div').removeAtte('class') #批量移除
用于checkbox和radio
prop() //获取属性
removeProp() //移除属性
注意
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
prop和attr的区别
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但是他们所指的属性并不相同，attr所指的属性是html标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
总结：
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox，radio和option的是否被选中都用prop
文档处理
------添加到指定元素内部的后面——-----------
$(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).insertfter(B) //把A放到B的后面
----添加指定元素外部的前面-------------------
$(A).before(B) //把B放到A的前面
$(A).insertBefore(B) //把A放到B的前面
-----移除和清空元素------------
remove() //从DOM中删除所有匹配的元素
empty() // 删除匹配的元素集合中所有的子节点
事件
JQuery绑定事件
.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
---------------------------------------
JS绑定事件
标签对象.on事件名 = function(){事件代码}
btnEle.onclick = function(){alert(123)}
jQuery绑定事件
方式1
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
方式2
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alter(123)})
"""
有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
"""
阻止后续事件
阻止后续事件执行
return false; // 常见阻止表单提交等
e.preventDefault();
--------------------------------------
能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
我们也可以让标签之前的事件不执行
return false
$(':submit').click(function (e){
alert('一定要细心 千万不要慌!!!')
// return false 方式1
e.preventDefault()方式2
})
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
事件冒泡
涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
$("span").click(function (e) {
alert("span");
return false; 方式1
e.stopPropagation(); 方式2
});
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
$('body').on('事件类型','选择器',function(){})
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
示例：表格中每一行的编辑和删除按钮都能触发相应的事件。
$('div').on('click','button',function () {
alert('你犯困的样子萌萌哒')
})
动画效果
// 基本
show() // 展示
hide() // 隐藏
toggle() // 如果在展示中就隐藏起来,如果是隐藏状态就展示出来
// 滑动
slideDown() // 向下滑动
slideUp() // 向上
slideToggle() // 判断状态如何取反
// 淡入淡出
fadeIn() // 淡入
fadeOut() // 淡出
fadeToggle() // 判断状态如何取反
// 自定义（了解即可）
animate(p,[s],[e],[fn])
bootstrap框架
bootstrap框架
bootstrap框架内部提供了很多漂亮的标签样式和功能,我们只需要CV使用即可.
bootstrap版本推荐使用v3版本.它是一个是css文件和一个jd文件组成.bootstrap需要使用jQuery来实现动态效果,一般都是直接导入jQuery和bootstrap的.
基本使用:
必须先导入后使用
1.本地导入
2.cdn导入
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕)
col-md-offset-n 调整位置
# 栅格参数可以做到响应式布局xs sm md lg...
lg对应屏幕>=1200px，小于 1920px 台式1920*1080显示器
md对应屏幕>=992px，小于1200px 适合笔记本
sm对应屏幕>=768px，小于992px 适合平板
xs对应屏幕<=768 手机端屏幕
表格样式
参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
class="table table-hover table-striped table-bordered"
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!
按钮与图标样式
# 按钮样式
class = 'btn'
# 按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
# 按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>
图标样式
<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/
