jQuery03筛选&文档处理

筛选

first()：获取匹配的第一个元素
last()：获得匹配的最后一个元素
eq(N)：获取匹配的第N或-N个元素
filter(selector)：筛选出与指定表达式匹配的元素集合
has(selector)：筛选出包含特定特点的元素的集合
not(selector)：筛选出不包含特定特点的元素的集合

案例

//获取元素中第一个元素
			console.log($("#Ul1>li").first().text());
			//获取元素中最后个元素
			console.log($("#Ul1>li").last().text());
			//获取元素中指定的元素
			console.log($("#Ul1>li").eq(2).text());
			// 找到属性title为a的元素
			$("#Ul1>li").filter("[title=a]").css("background","red")
			//  找到有title属性的元素
			$("#Ul1>li").filter("[title]").css("background","red")
			// 找到有span 标签的元素
			$("ul>li").has("span").css("background","red");
			   // console.log($("#Ul1").filter("span").HTML());
			   // 筛选出没有title属性的元素集合
			   $("ul>li").not("[title]").css("background","pink");

查找

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

	//1.2 查找
			
							// 查找ul的所有子标签,并且指定为li子标签
							$("ul").children("li").css("background","red");
							
							// 通过下标 返回的是js对象
							console.log($("ul>li")[3]);
							// console.log($($("ul>li")[3]));
							// 查找ul下面所有的span标签
							$("ul").children("li").has("span").css("background","red")
							// 查找b标签的父元素标签
							console.log($("b").parents());
							// 所有所有的父节点  直到根节点找到后结束
							console.log($("b").parents());
							// 查找第三个li标签前面所有的兄弟标签
							console.log($("ul>li").eq(2).prevAll());
							// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
							console.log($("ul").children("li").eq(2).nextAll("li"));
							// 查找第三个li标签所有的兄弟标签
							console.log($("ul>li").eq(2).siblings())

文档处理

增

append()：将内容添加到指定的元素后面
appendTo()：和append()颠倒
prepend()：将内容添加到指定元素前面
prependTo():和prepend()颠倒
after()：在匹配元素之后插入内容
before()：在匹配元素之前插入内容

//2.1 增
							//--内部插入(前面和后面)
							//   插入到最后面(给ul中最后一个li中插入一个a标签)
							// $("ul>li").last().append("<a href='#'>ss</a>")
							//   插入到最前面(给ul中第3个li中插入一个按钮)
							// $("ul>li").first().append("<a href='#'>sdd</a>")
							
							//--外部插入(之前和之后)
							//   在属性title为b的li前面插入一个a标签
							// $("ul>li").filter("[title=b]").before("<a href='#'> aaa</a>");
							
							//   在属性title为b的li后面插入一个a标签
							// $("ul>li").filter("[title=b]").after("<a href='#'> aaa</a>");

删

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

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

改

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

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

复制

clone复制节点

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