//首先为大家介绍一些jQuery中的一些专有性名词 （并用案例来介绍）
- 过滤
顾名思义，过滤是什么？在已有的一部分标签中再找出符合要求的标签。我们先来看一下我们准备好的网页素材。
<body>
<!-- 筛选和查找案例 -->
<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>一对ul标签里面包含有li标签，ol标签，span标签。
我们先来找到ul标签中的所有li标签。来试一下该怎么写！
$(“ul>li”) 之前说到的层级选择器，父级标签下的所有子标签。那么我们用一个变量来接收一下ul中的所有li标签:
var uls = $("ul>li");
- first():获取匹配的第一个元素
First第一个，我们来试一下first的作用是什么？是不是能够找到数组中的第一个元素。大家注意一下，我们现在是要根据上面的li数组来获取 数组中的第一个元素，所以我们应该是对数组来操作：
uls.first().css("background","yellow");
我们来看一下效果，是不是ul中的第一个li的背景色改变了。
- 1last():获得匹配的最后一个元素
刚才是数组中的第一个元素，现在我们来试试最后一个元素。好不好用
uls.last().css("background","yellow");
现在ul中的第一个li 和 最后一个li都改变了背景色
- 2eq(N):获取匹配的第N或-N个元素
获取到数组中指定的某个元素，N表示下标。那么我们来看一下具体怎么写：
uls.eq(1).css("background","yellow");
这个表示找到数组中下标为1 也就是数组中的第二个li
当N为大于-1的数字时，表示的数组元素的下标，当N为小于0 的数字时，我们来看一下是什么效果？
uls.eq(-1).css("background","yellow");
这个大家来猜一下，会有什么效果？倒数第一行改变了背景色。那么我们再来改一下，写成-2来试试：
uls.eq(-2).css("background","yellow");
现在是倒数第二行受到了影响，那么当N为负数时表示什么意思？哎，对 就是倒着数第几行
First 、last、eq 这三个方法我们找到的元素都是一个，我们接着看下面的。找到多个元素的方法
- 3filter(selector):筛选出与指定表达式匹配的元素集合
Filter 是什么意思？过滤器。过滤器在我们后边的学习中也会强调学习。我们先来看一下API里面怎么解释filter。API里面的案例
$("p").filter(".selected")
找到p标签中所有class属性值为selected的标签。那么如果这里面的点 换位#是什么意思？哎 表示的就是id
$("p").filter("#selected")
找到p标签中所有id属性为selected的标签
我们再来写一个，现在我要找到数组中所有title属性值为a的元素。我们先来看一下网页代码，有几个li是有title属性的，哪几个title的属性值是a。我们来写一下代码试试：
uls.filter("[title=a]").css("background","yellow");
假如我要找titile属性不为a 的呢？该怎么写？
uls.filter("[title!=a]").css("background","yellow");我们直接写成!= 但是这种写法有点小瑕疵，如果我的标签中没有title属性怎么办？是不是也会被选中。所以，我们还要再加一个条件，有title属性，同时title属性的值不为a：
uls.filter("[title][title!=a]").css("background","yellow");
这样结果就对了。这个地方要注意一下：除了id、class属性外的其他属性，我们用中括号，在中括号里面写 属性=值 来匹配
- 4has(selector):筛选出包含特定特点的元素的集合
现在我们想从数组中筛选出有<span>标签的元素集合，我们就不能再用filter了，filter是用来对属性进行匹配筛选的，现在我们要筛选标签里面 又保护的有标签。这种情况我们使用has：
uls.has("span").css("background","yellow");
括号里面直接写标签名，匹配到数组中所有 包含span子标签的 元素
- 5not(selector):筛选出不包含特定特点的元素的集合
上面我们可以找到数组中包含有title属性的元素，现在我们要找不包含有title属性的元素该怎么写？哎 对了 我们用 not
uls.not("[title]").css("background","yellow");
匹配数组中没有title属性的元素
2. 查找
接下来我们说一下查找，我们来看一下API查找我们主要说children、find、Parent、NextAll、Siblings这几个。
2.1 children():子标签中找
子标签，在子标签中匹配符合条件的标签
现在我们假如要找到ul的所有li子标签。用我们之前讲过的写法该怎么写？
$("ul>li").css("background","yellow");
那么现在，我们用children来试一下该怎么写？我们可以先找到ul的所有子标签：
$("ul").children().css("background","yellow");
现在获取到了ul的所有子标签，再查找到子标签中的li标签：
$("ul").children("li").css("background","yellow");
这个就是children的用法
2.2 find():后代标签中找
现在我们找一下ul标签内所有的span标签，注意了，我们是要找ul中的所有span标签，也就是说不管是ul的子标签，还是孙子标签只要是span标签 就是我们要找的。很明显，children是只找子标签。所以这个地方我们用find
$("ul").find("span").css("background","yellow");
获取到ul标签内所有的span标签。find表示在后代标签中找
2.3 Parent():父标签
案例：查找b标签的父元素标签。
$("b").parent().css("background","yellow");
我们这里只有一个b标签，所以直接用标签选择器 找到p标签 然后再找到父标签就可以了
2.4 PrevAll():前面所有的兄弟标签
案例：查找第三个li标签前面所有的兄弟标签
现在我们要找打ul中的第三个li,结合我们刚才讲过的那个方法可是实现？eq(),我们可以用eq找到下标为2的li就是我们要找的第三个li。我们来看一下怎么写：
$("ul>li:eq(2)").css("background","yellow");
我们可以直接在li后面接着写 :eq(2);来实现找到第三个。可是我们要找的是第三个前面的所有兄弟标签。我们可以接着使用PrevAll来实现效果：
$("ul>li:eq(2)").prevAll().css("background","yellow");
找到第三个li前面的所有兄弟标签。注意：这个地方不包括第三个标签
2.5 NextAll():后面所有的兄弟标签
那么我们找第三个li后面的所有兄弟标签呢？怎么写？
$("ul>li").eq(2).nextAll().css("background","yellow");
现在找到了第三个li后面的所有兄弟标签了。除了li标签之外还有其它的同级兄弟标签。如果我们只找第三个li后面的所有兄弟标签，并且只能是li标签 该怎么写？
$("ul>li:eq(2)").nextAll("li").css("background","yellow");
我们可以看一下API，这个地方很舒服，刚好nextAll里面可以有参数，用来过滤
2.7 Siblings():前后所有的兄弟标签
案例：查找第三个li标签所有的兄弟标签
现在我们要找打第三个li标签的所有兄弟标签，也就是说不管是前面的还是后面的了。只要是同级的兄弟标签那就是我们要找的。这种情况我们用Siblings。看我怎么来写代码：
$("ul>li:eq(2)").siblings().css("background","yellow");
所有的兄弟标签
- 3——文档处理
- 增
- 内部插入
- Append():将内容添加到指定的元素后面
- 内部插入
- 增
案例：在li后面追加一个li标签
我们直接来写代码看疗效：
$("li").append("<li>新加入的数据</li>");
这个时候我们会发现 效果会给每一个li后面都追加一个li。因为我们选择器选中的就是所有的li.
案例：插入到最后面(给ul中最后一个li中添加一个li)
我们再来看这个，给ul中的最后一个li中追加一个li。首先我们要先找到ul中的最后一个li：
$("ul>li").last()。
然后在li中添加一个li
$("ul>li").last().append("<li>新加入的数据</li>");
这个是把内容追加到指定的元素内的最后面
3.1 AppendTo():和append()颠倒
我们再来看一下AppendTo，效果和append效果一样，只是语法刚好是颠倒过来写的。我们来看一下 怎么写的：
$("<li>新加入的数据</li>").appendTo($("ul>li").last());
3.2 Prepend():将内容添加到指定元素前面
那么如果要追加到前面去呢？只需要把append改为prepend就OK了：
$("ul>li").last().prepend("<li>新加入的数据</li>");
$("<li>新加入的数据</li>").prependTo($("ul>li").last());
3.3 PrependTo():和prepend()颠倒
$("<li>新加入的数据</li>").prependTo($("ul>li").last());
- 4.外部插入
- 4.1 Alter():在匹配元素之后插入内容
案例：在属性title为b的标签后面添加一个li
首先，我们要结合上面讲过的过滤找到title属性值为b的标签，然后使用alter在标签之后添加新的li
$("ul>li").filter("[title=b]").after("<li>这个是新的li</li>");
4.2 Before():在匹配元素之前插入内容
接着我们来看一下外部插入，before之前。
案例：在属性titile为b的标签前面添加一个li。
首先，我们要结合上面讲过的过滤找到title属性值为b的标签，然后使用before在标签之前添加新的li
$("ul>li").filter("[title=b]").before("<li>这个是新添加的数据</li>");
- 5 删
- 5.1 Empty():删除匹配的元素集合中所有的子节点(不包含匹配的元素)
案例:删除ul中所有的li
我们以删除ul中的li为例 来演示一下empty();
$("li").empty();
我们来看一下效果，会发现，li删除成功了吗？还行没有内容了，但是还留下了一点东西。Empty只会删除元素内的所有内容，不会删除这个元素。大家要注意
5.2 Remove():删除匹配的元素集合中所有的子节点(包含匹配的元素)
我们再来用remove()来删除一下试试，
$("li").remove();
直接删除成功，remove()删除包括元素自己及其所有子元素全部删除
- 6 .改
- 6.1ReplaceWith():将所有匹配的元素替换成指定的内容
替换 我们以ReplaceWith为例来演示一下效果，
案例:把li下面所有的span标签替换为<a>标签
$("ul li span").replaceWith("<a>1234</a>");
替换这个地方要注意一下，替换会直接把原来的标签值给覆盖掉，所以新替换的标签内容也要手动添加上
//上述内容是jQuery中的筛选以及文档处理的一些案例介绍（供需要的小伙伴参考参考）。
需要补充的小伙伴欢迎来提建议！！
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
