jQuery的筛选&文档处理

Hilo Everybody wellcome to my channel！

今天Lion带大家来学习jQuery的筛选以及文档处理（jQuery03）

---

一、jQuery筛选

语法罗列：

1:过滤

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

        1.2.last():获取匹配的最后一个元素

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

        1.4.filter():筛选出预指定表达式匹配的元素集合

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

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

前三个方法我们在jQuery01是讲筛选器时，大致提到了所以就不做重点讲了！直接看代码

代码展示：

                --过滤出指定表达式匹配的元素
				获取ul中所有的li元素，然后找到第一个元素
				$("ul li").first().css("background","pink");
				找到最后一个元素
				$("ul li").last().css("background","yellow");
				找到指定的某一个元素，例如第3个
				$("ul  li").eq(2).css("background","pink");
                //.css为设置样式

        1.4.filter():筛选出预指定表达式匹配的元素集合

        在括号中只能放表达式哦！

代码展示：

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

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

代码展示：

                筛选出有<span>标签的元素集合
				$("ul li").has("span").css("background","yellow");

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

代码展示：

				筛选出没有title属性的元素集合
				$("ul li").not("[title]").css("background","yellow");

---

语法罗列：

2：查找

        2.1children():子标签中找

        2.2find():后代标签中找

        2.3parent():父标签

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

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

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

      children():子标签中找        区别        find():后代标签中找

区别：后代标签包含子标签，但是后代标签不一定全是子标签

代码展示：

                // 查找ul的所有子标签,并且指定为li子标签
				$("ul").children("li").css("background","red");
				// 查找ul下面所有的span标签
				$("ul").find("span").css("background","red");

        2.3parent():父标签

就是找到改标签的父标签简单吧！

代码展示：

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

prevAll():前面所有的兄弟标签——nextAll():后面所有的兄弟标签——siblings():前后所有的兄弟标签

区别：就在于显示该标签的前后兄弟标签

代码展示：

				查找第三个li标签前面所有的兄弟标签
				$("ul li").eq(2).prevAll().css("background","yellow");
				查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				$("ul li").eq(2).nextAll("li").css("background","yellow");
				查找第三个li标签所有的兄弟标签
				$("ul li").eq(2).siblings().css("background","yellow");

---

二、文档处理

语法罗列：

1增

首先我们来区分内部插入和外部插入：

什么是内部插入呢？就是插入的标签作为被插入标签的子标签

什么是外部插入呢？就是插入的标签作为被插入标签的兄弟标签

        1.1内部插入

                1.1.1append():将内容添加到指定的元素后面（appendTo()）

                1.1.2prepend():将内容添加到指定元素前面（prependTo()）

代码展示：

                --内部插入(前面和后面)
				  插入到最后面(给ul中最后一个li中插入一个a标签)
				$("ul li").last().append("<a>hahaha</a>");
				  插入到最前面(给ul中第一个li中插入一个a标签)
				$("<a>hahaha</a>").prependTo($("ul li").first());

        1.2外部插入

                1.2.1after():在匹配元素之后插入内容

                1.2.2before():在匹配元素之前插入内容

代码展示：

				--外部插入(之前和之后)
				  在属性title为b的li前面插入一个a标签
				$("ul li").filter("[title][title=b]").before("<a>hahah</a>");
				  在属性title为b的li后面插入一个a标签
				$("ul li").filter("[title][title=b]").after("<a>asda d</a>");

2删

        2.1empty():删除匹配的元素中所有的子节点（不包括元素）

        2.2remove():删除匹配的元素中所有的子节点（包括元素）

代码展示：

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

3改

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

代码展示：

	
				把li下面所有的span标签替换为<a>标签
				$("li span").replaceWith("<a>123</a>");

---

以上就是今天的内容啦，我们今天分享了jQuery的筛选和jQuery文档处理。希望对大家有所帮助!

到这里这次的分享就结束了，欢迎各位继续关注Lion，我们下次再见！

欢迎各位大能多多指导，Lion必将继续努力！