jQuery03筛选&文档处理

一.筛选

1.过滤
查看官方API文档
first()：获取匹配的第一个元素
last()：获得匹配的最后一个元素
eq(N)：获取匹配的第N或-N个元素
filter(selector)：筛选出与指定表达式匹配的元素集合
has(selector)：筛选出包含特定特点的元素的集合
not(selector)：筛选出不包含特定特点的元素的集合

案例代码：

 
				// first()：获取匹配的第一个元素
				$("#u1>li").first().css("background","pink");
				// last()：获得匹配的最后一个元素
				$("#u1>li").last().css("background","blue");
				// eq(N)：获取匹配的第N或-N个元素
				$("#u1>li").eq(3).css("background","pink");
				// filter(selector)：筛选出与指定表达式匹配的元素集合
				$("#u1>li").filter("[title]").css("background","red");
				// has(selector)：筛选出包含特定特点的元素的集合
				$("#u1>li").has("span").css("background","red");
				// not(selector)：筛选出不包含特定特点的元素的集合
				$("#u1>li").not("[title]").css("background","red");

2.查找

children()：子标签中找
find()：后代标签中找
parent()：父标签
prevAll()：前面所有的兄弟标签
nextAll()：后面所有的兄弟标签
siblings()：前后所有的兄弟标签

案例代码：

 
				// 		查找ul的所有子标签,并且指定为li子标签
				$("ul").children("li").css("background","pink");
				// 		查找ul下面所有的span标签
				$("ul").find("span").css("background","pink");
				// 		查找b标签的父元素标签
				console.log($("ul>li").parent());
				// 		查找第三个li标签前面所有的兄弟标签
				$("ul>li").eq(2).prevAll().css("background","pink");
				// 		查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				$("ul>li").eq(2).nextAll().css("background","pink");
				// 		查找第三个li标签所有的兄弟标签
				$("ul>li").eq(2).siblings("li").css("background","pink");

二.文档处理
1.增
a.内部插入

append()：将内容添加到指定的元素后面
appendTo()：和append()颠倒
prepend()：将内容添加到指定元素前面
prependTo():和prepend()颠倒

b. 外部插入
after()：在匹配元素之后插入内容
before()：在匹配元素之前插入内容

案例代码：

 
				// 插入到最后面(给ul中最后一个li中插入一个a)
				$("ul>li").last().append("<a href='#'>xxx</a>");
				// 插入到最后面(给ul中最后一个li中插入一个a),使用appendTo()
				$("<a href = '#'>xxx</a>").appendTo($("ul>li").last());
				// 插入到最前面(给ul中第一个li中插入一个a)
				$("ul>li").eq(1).prepend("<a href='#'>sss</a>");
				// 插入到最前面(给ul中第一个li中插入一个a),使用prependTo
				$("<a href='#'>hh</a>").prependTo($("ul>li").eq(1));
				// 在属性title为b前面添加一个li
				$("ul>li").filter("[title=b]").before("<li>inen<li>");
				// 在属性title为b后面添加一个li
				$("ul>li").filter("[title=b]").after("<li>inen<li>");

2.删

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

案例代码：

 
				// 	清空ul中所有li的内容，使用empty()
				$("ul>li").empty("li");
				// 	移除ul中所有的li，使用remove()
				$("ul>li").remove("li");

3.改

replaceWith()：将所有匹配的元素替换成指定的内容

案例代码：

 
				// 	把li下面所有的span标签替换为<a>标签
				$("ul>li").find("span").replaceWith("<a href='#'>xx</a>");

4.复制 clone

案例代码：

 
				// 需求   clone   复制ul中的第一个子节点  追加到末尾
				$("ul").append($("ul>li").first().clone(false));

完善全选案例：

//优化全选
				$("input:checkbox:first").click(function() {
 
					var f = $(this).prop('checked');
					$("input:checkbox:gt(0)").each(function() {
						$(this).prop("checked", f);
					});
				});
				//完善全选
				$("input:checkbox:gt(0)").click(function() {
					var fl = true;
					$("input:checkbox:gt(0)").each(function() {
						if (!$(this).prop("checked")) {
							fl = false;
						}
 
					});
					$("input:checkbox:first").prop("checked", fl);
				});