一、过滤（筛选）
1.first()：获取匹配的第一个元素
2.last()：
获得匹配的最后一个元素
3.eq(N)：
获取匹配的第N或-N个元素
4.filter(selector)：
筛选出与指定表达式匹配的元素集合
5.has(selector)：
筛选出包含特定特点的元素的集合
6.not(selector)：
筛选出不包含特定特点的元素的集合
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 从元素数组中找到第一个元素
$("#odiv>#oul>li").first().css("background","yellow");
// 从元素数组中找到最后一个元素
$("#odiv>#oul>li").last().css("background", "pink");
// 从元素数组中找到指定的某一个元素
$("#odiv>#oul>li").eq(2).css("background", "blue");
// 从元素数组中找到属性title为a的元素
$("#odiv>#oul>li").filter("[title=a]").css("background", "aqua");
// 从元素数组中筛选出有title属性的元素集合
$("#odiv>#oul>li").filter("[title]").css("background","black");
// 从元素数组中筛选出有<span>标签的元素集合
$("#odiv>#oul>li").has("span").css("background", "red");
// 从元素数组中筛选出没有title属性的元素集合
$("#odiv>#oul>li").not("[title]").css("background", "green");
})
</script>
</head>
<body>
<div id="odiv">
<ul id="oul">
<li title="a">item1</li>
<li>item2<span>xiexie</span></li>
<li>item3</li>\
<ol>
<li><span>
9897
</span></li>
</ol>
<li title="x">item4</li>
<li>item5</li>
</ul>
</div>
</body>
</html>
二、查找（筛选）
1.children()：子标签中找
2.find()：
后代标签中找
3.parent()：
父标签
4.prevAll()：
前面所有的兄弟标签
5.nextAll()：
后面所有的兄弟标签
6.siblings()：
前后所有的兄弟标签
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 查找ul的所有子标签,并且指定为li子标签
$("#odiv>#oul").children("li").css("background","yellow");
// 查找ul下面所有的span标签
$("#odiv>#oul").find("span").css("background","orange");
// 查找b标签的父元素标签
$("b").parent().css("background","aqua");
// 查找第三个li标签前面所有的兄弟标签
$("#odiv>#oul>li").eq(2).prevAll().css("background","red");
// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
$("#odiv>#oul>li").eq(2).nextAll().css("background","green");
// 查找第三个li标签所有的兄弟标签
$("#odiv>#oul>li").eq(2).siblings().css("background","blue");
})
</script>
</head>
<body>
<div id="odiv">
<ul id="oul">
<li>abc1</li>
<li>abc2<span>qqq</span></li>
<li>abc3</li>
<ol>
<li>123</li>
<li>456<span><b>666</b>qqq</span></li>
<li>789</li>
</ol>
<li>abc4</li>
<li>abc5<b>666</b></li>
<li><span>qqq</span>abc6</li>
</ul>
</div>
</body>
</html> 三、增加（文档处理）
1.内部插入
append()：
将内容添加到指定的元素后面
appendTo()：
和append()颠倒
prepend()：
将内容添加到指定元素前面
prependTo():
和prepend()颠倒
2. 外部插入
after()：
在匹配元素之后插入内容
before()：
在匹配元素之前插入内容
四、删
empty()：
删除匹配的元素集合中所有的子节点（不包含匹配的元素）
remove()：
删除匹配的元素集合中所有的子节点（包含匹配的元素）
五、改
replaceWith()：
将所有匹配的元素替换成指定的内容
增删改的演示：
<!DOCTYPE html><html> <head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 插入到最后面(给ul中最后一个li中插入一个a)
$("#odiv>#oul>li").last().append("<a href = '#'>百度一下</a>");
// 插入到最后面(给ul中最后一个li中插入一个a),使用appendTo()
$("<a href = '#'>4399</a>").appendTo($("#oul").children().last());
// 插入到最前面(给ul中第一个li中插入一个a)
$("#oul>li").first().prepend("<a href = '#'>百度一下</a>");
// 插入到最前面(给ul中第一个li中插入一个a),使用prependTo
$("<a href = '#'>4399</a>").prependTo($("#oul").children().eq(2));
//--外部插入(之前和之后)
// 在属性title为b前面添加一个li
$("#oul").children().filter("[title=b]").before("<a href = '#'>前面</a>");
// 在属性title为b后面添加一个li
$("#oul").children().filter("[title=b]").after("<a href = '#'>后面</a>");
// 清空ul中所有li的内容，使用empty()
$("#oul").children("li").empty();
// 移除ul中所有的li，使用remove()
$("#oul").children("li").remove();
// replaceWith()：将所有匹配的元素替换成指定的内容
$("#oul").find('span').css("background","red").replaceWith("<a href = '#'>超链接</a>")
})
</script>
</head>
<body>
<div id="odiv">
<ul id="oul">
<li >abc1</li>
<li>abc2<span>qqq</span></li>
<li>abc3</li>
<ol>
<li>123</li>
<li>456<span><b>666</b>qqq</span></li>
<li title="b">789</li>
</ol>
<li title="b">abc4</li>
<li>abc5<b>666</b></li>
<li><span>qqq</span>abc6</li>
</ul>
</div>
</body>
</html>六、全选
一个复选框控制全选全不选
演示：
<!DOCTYPE html><html> <head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 加载函数
$(document).ready(function(){
// 全选点击事件
$("#all").click(function(){
var ck = $(this).prop('checked');
// 获取子选项
$(".okk").each(function(){
$(this).prop('checked',ck);
});
});
$(".okk").click(function(){
var flag = true;
// 遍历子选项
$.each($(".okk"),function(index,obj){
if(!$(obj).prop('checked')){
flag = false;
}
});
$("#all").prop('checked',flag);
})
})
</script>
</head>
<body>
<input type="checkbox" id="all" />
<hr >
<input class="okk" type="checkbox" value="A" />A
<input class="okk" type="checkbox" value="B" />B
<input class="okk" type="checkbox" value="C" />C
<input class="okk" type="checkbox" value="D" />D
<input class="okk" type="checkbox" value="E" />E
</body>
</html>
