jQuery-03 (筛选&文档处理)

1.筛选--过滤

1.1 first()：获取匹配的第一个元素

从元素数组中找到第一个元素

//--过滤出指定表达式匹配的元素
                // first() 获取id为oul下的所有li元素，然后找到第一个元素
                    $("#oul>li").first().css("border","1px solid pink");

1.2 last()：获得匹配的最后一个元素

从元素数组中找到最后一个元素

// last() 找到最后一个元素
                    $("#oul>li").last().css("border","1px solid pink");

1.3 eq(N)：获取匹配的第N或-N个元素

从元素数组中找到指定的某一个元素

// eq(N) 找到指定的某一个元素，例如第3个
                    $("#oul>li").eq(3).css("border","1px solid pink");
​

1.4 filter(selector)：筛选出与指定表达式匹配的元素集合

从元素数组中找到属性title为a的元素

//--过滤出指定表达式匹配的元素集合
                // 找到属性title为a的元素
                    $("#oul>li").filter("[title = a]").css("background","pink");

从元素数组中筛选出有title属性的元素集合

// 筛选出有title属性的元素集合
                    $("#oul>li").filter("[title]").css("background","pink");

1.5 has(selector)：筛选出包含特定特点的元素的集合

从元素数组中筛选出有<span>标签的元素集合

// 筛选出有<span>标签的元素集合
                    $("#oul>li").has("span").css("background","pink");
​

1.6 not(selector)：筛选出不包含特定特点的元素的集合

从元素数组中筛选出没有title属性的元素集合

// 筛选出没有title属性的元素集合
                    $("#oul>li").not("[title]").css("background","pink");

2.筛选--查看

2.1 children()：子标签中找

查找ul的所有子标签,并且指定为li子标签

// 查找ul的所有子标签,并且指定为li子标签
                $("#oul>li").children().css("background","gray");

2.2 find()：后代标签中找

查找ul下面所有的span标签

// 查找ol下面所有的span标签
                $("#oul>#ool").find("span").css("background","gray");

2.3 parent()：父标签

查找b标签的父元素标签

 // 查找b标签的父元素标签
                $("b").parent().css("background","gray");

2.4 prevAll()：前面所有的兄弟标签

查找第三个li标签前面所有的兄弟标签

 // 查找第三个li标签前面所有的兄弟标签
                $("#oul").children().eq(3).prevAll().css("background","gray");		

2.5 nextAll()：后面所有的兄弟标签

查找第三个li标签后面所有的兄弟标签,并且只能是li标签

 // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
                $("#oul").children().eq(3).nextAll().css("background","gray");		

2.6 siblings()：前后所有的兄弟标签

查找第三个li标签所有的兄弟标签

// 查找第三个li标签所有的兄弟标签
				$("#oul").children().eq(3).siblings().css("background","gray");		

3.文档处理 (增，删，改)

①增-案例

内部插入：

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

//增
				//--内部插入(前面和后面)
				//   插入到最后面(给ul中最后一个li中插入一个a标签)
				// $("#oDiv>li").last().css("background","pink");
				$("#oDiv>li").last().append("<a href='#'>4399游戏</a>");
				//appendTo
				$("<a href='#'>4399游戏</a>").appendTo($("#oDiv").children().last());

				//   插入到最前面(给ul中第一个li中插入一个a标签)
				$("#oDiv>li").first().prepend("<a href='#'>4399游戏</a>");

				$("<a href='#'>4399游戏</a>").prependTo($("#oDiv").children().eq(2));

外部插入：

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

//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				//before	
				$("#oDiv").children().filter("[title = b]").css("background", "yellow").before("<a href="# ">哈哈</a>");
				//   在属性title为b的li后面插入一个a标签
$("#oDiv").children().filter("[title = b]").css("background", "yellow").after("<a href="# ">哈哈</a>");

②删-案例

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

清空ul中所有li的内容，使用empty()

//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				//before	
				$("#oDiv").children().filter("[title = b]").css("background", "yellow").before("<a href="# ">哈哈</a>");
				//   在属性title为b的li后面插入一个a标签
$("#oDiv").children().filter("[title = b]").css("background", "yellow").after("<a href="# ">哈哈</a>");

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

移除ul中所有的li，使用remove()

//移除ul中所有的li
				 $("#oDiv").children("li").css("background","yellow").remove();

③改-案例

replaceWith()：将所有匹配的元素替换成指定的内容 把li下面所有的span标签替换为<a>标签

//改				
				//把li下面所有的span标签替换为<a>标签
                $("#oDiv").find('span').css("background","yellow").replaceWith("<a href='#'>超链接</a>");