jQuery (筛选文档处理)

大家好，我是小陽，我又来了，今天我给大家带来的是jQuery的筛选and文档处理，希望能给大家带来一些知识上的帮助！

一、思维导图

二、jQuery的筛选

三、jQuery的文档处理

一、思维导图

首先，我们先看看这期内容的思维导图理清一下思路，再通过我这篇文章加深并理解代码

ok，我们现在进入今日学习主题，今日主要学习的是jQuery的筛选和jQuery的文档处理

二、jQuery的筛选

筛选分为两个部分：

一、过滤：在jQuery对象数组中，过滤出一部分元素来

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

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

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

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

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

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

案例所需代码：

<body><h2>jQuery03：筛选、文档处理</h2><!-- 筛选和查找案例 --><ul><li>1</li><li title="a">2</li><li title="b">3</li><li title="a"><span><b>4</b></span></li><li title="b"><span>5</span></li><ol><li>6</li><li>7</li></ol><span>8</span></ul></body>

案例1：演示过滤所有的方法 (我们jQuery一所学选择器的也可以用上)
1.1从元素数组中找到第一个元素 first()：获取匹配的第一个元素代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--过滤出指定表达式匹配的元素// 获取ul中所有的li元素，然后找到第一个元素$("ul>li:first").css("background","pink");//过滤选择器$("ul>li").first().css("background","pink");//二者都可以用               })</script></head>

1.2 元素数组中找到最后一个元素 last()：获得匹配的最后一个元素代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--过滤出指定表达式匹配的元素// 找到最后一个元素$("ul>li").last().css("background", "pink");})</script></head>

1.3 从元素数组中找到指定的某一个元素 eq(N)：获取匹配的第N或-N个元素代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 找到指定的某一个元素$("ul>li:eq(2)").css("background","pink");   $("ul>li").eq(-4).css("background","pink");    //"-":倒数第几个})</script></head>

1.4从元素数组中找到属性title为a/不为a的元素 filter(selector)：筛选出与指定表达式匹配的元素集合代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--过滤出指定表达式匹配的元素集合// 找到属性title为a的元素$("ul>li").filter("[title=a]").css("background", "pink");// 找到属性title不为a的元素$("ul>li").filter("[title][title!=a]").css("background", "pink");})</script></head>

1.5 从元素数组中筛选出有title属性的元素集合 filter(selector)：筛选出与指定表达式匹配的元素集合代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 筛选出有title属性的元素集合$("ul>li").filter("[title]").css("background", "pink");})</script></head>

1.6 从元素数组中筛选出有<span>标签的元素集合 has(selector)：筛选出包含特定特点的元素的集合代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 筛选出有<span>标签的元素集合$("ul span").css("background","pink");$("ul>li").has("span").css("background","pink");})</script></head>

1.7 从元素数组中筛选出没有title属性的元素集合 not(selector)：筛选出不包含特定特点的元素的集合代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 筛选出没有title属性的元素集合$("ul>li").not("[title]").css("background", "pink");})</script></head>

二、查找：在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

children()：子标签中找

find()：后代标签中找

parent()：父标签

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

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

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

案例2：演示查找所有的方法
2.1 查找ul的所有子标签,并且指定为li子标签 children()：子标签中找代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 查找ul的所有子标签,并且指定为li子标签//$("ul>li").css("background","pink");$("ul").children("li").css("background","pink");})</script></head>

2.2 查找ul下面所有的span标签 find()：后代标签中找代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 查找ul下面所有的span标签$("ul span").css("background", "pink"); //li占一行 span占所选空间$("ul").find("span").css("background", "pink");})</script></head>

2.3 查找b标签的父元素标签 parent()：父标签代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 查找b标签的父元素标签$("b").parent().css("background","pink");})</script></head>

2.4查找第三个li标签前面所有的兄弟标签 prevAll()：前面所有的兄弟标签代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 查找第三个li标签前面所有的兄弟标签$("ul>li").eq(2).prevAll().css("background","pink");})</script></head>

2.5 查找第三个li标签后面所有的兄弟标签,并且只能是li标签 nextAll()：后面所有的兄弟标签代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签$("ul>li").eq(2).nextAll("li").css("background","pink");})</script></head>

2.6 查找第三个li标签所有的兄弟标签 siblings()：前后所有的兄弟标签代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {// 查找第三个li标签所有的兄弟标签$("ul>li").eq(2).siblings().css("background","pink");})</script></head>

三、jQuery的文档处理

文档处理分为增删改 (查就是过滤)

一、增：分为内部插入和外部插入

内部插入：

插入后面： append()：将内容添加到指定的元素后面 & appendTo()：和append()颠倒

插入前面： prepend()：将内容添加到指定元素前面 & prependTo():和prepend()颠倒

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

案例3：演示文档处理-增加
3.1插入到最后面(给ul中最后一个li中插入一个a) append()：将内容添加到指定的元素后面代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--内部插入(前面和后面)//   插入到最后面(给ul中最后一个li中插入一个a标签)$("ul>li").last().append("<a href='heppt.www.baidu.com'>哈哈哈</a>")//在最后面一个li插入a标签})</script></head>

3.2 插入到最后面(给ul中最后一个li中插入一个a),使用appendTo() appendTo()：和append()颠倒代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--内部插入(前面和后面)//   插入到最后面(给ul中最后一个li中插入一个a标签)$("<a href='heppt.www.baidu.com'>哈哈哈</a>").appendTo($("ul>li").last());//把a标签插入到最后一个li里面})</script></head>

二者区别不大，appendTo相比只是颠倒了。
3.3 插入到最前面(给ul中第一个li中插入一个a) prepend()：将内容添加到指定元素前面代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--内部插入(前面和后面)//   插入到最前面(给ul中第一个li中插入一个a标签)$("ul>li").first().prepend("<a href='#'>嗨害嗨</a>")})</script></head>

3.4 插入到最前面(给ul中第一个li中插入一个a),使用prependTo prependTo():和prepend()颠倒代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--内部插入(前面和后面)//   插入到最前面(给ul中第一个li中插入一个a标签)$("<a href='#'>嗨害嗨</a>").prependTo($("ul>li").first());})</script></head>

3.5 在属性title为b前面添加一个li after()：在匹配元素之后插入内容代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--外部插入(之前和之后)//   在属性title为b的li前面插入一个a标签$("ul>li").filter("[title=b]").before("<a href='#'>天天开心</a>")})</script></head>

3.6 在属性title为b后面添加一个li before()：在匹配元素之前插入内容代码：

     <meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//--外部插入(之前和之后)//   在属性title为b的li后面插入一个a标签$("ul>li").filter("[title=b]").after("<a href='#'>加自习</a>")})</script></head>

二、删

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

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

案例4：演示文档处理-删除
4.1 清空ul中所有li的内容，empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//删//清空ul中所有li的内容$("ul li").empty();})</script></head>

移除ul中所有的li，使用remove() remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//删//移除ul中所有的li$("ul li").remove();})</script></head>

三、改

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

案例5：演示文档处理-修改
5.1 把li下面所有的span标签替换为<a>标签 replaceWith()：将所有匹配的元素替换成指定的内容代码：

 <head><meta charset="utf-8"><title></title><!-- 引入外部jQuery类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//2.2 改    //把li下面所有的span标签替换为<a>标签$("li span").replaceWith("<a href='#'>嗨害嗨</a>")})</script></head>

好了，今天的学习就到此结束了，祝大家的技术能越来越牛，早日成为大咖，我也好吹牛说如今的技术大咖曾经也是看过我的文章，哈哈哈。我是小陽，感谢各位观看我的文章！