jQuery中的筛选&文档处理——案例

2022-11-18 20:26:02 浏览数 (1)

//首先为大家介绍一些jQuery中的一些专有性名词 （并用案例来介绍）

  1. 过滤

顾名思义，过滤是什么？在已有的一部分标签中再找出符合要求的标签。我们先来看一下我们准备好的网页素材。

代码语言：javascript复制
<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");

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

First第一个，我们来试一下first的作用是什么？是不是能够找到数组中的第一个元素。大家注意一下，我们现在是要根据上面的li数组来获取 数组中的第一个元素，所以我们应该是对数组来操作：

uls.first().css("background","yellow");

我们来看一下效果，是不是ul中的第一个li的背景色改变了。

  1. 1last():获得匹配的最后一个元素

刚才是数组中的第一个元素，现在我们来试试最后一个元素。好不好用

uls.last().css("background","yellow");

现在ul中的第一个li  和 最后一个li都改变了背景色

  1. 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 这三个方法我们找到的元素都是一个，我们接着看下面的。找到多个元素的方法

  1. 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属性外的其他属性，我们用中括号，在中括号里面写 属性=值 来匹配

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

现在我们想从数组中筛选出有<span>标签的元素集合，我们就不能再用filter了，filter是用来对属性进行匹配筛选的，现在我们要筛选标签里面 又保护的有标签。这种情况我们使用has：

uls.has("span").css("background","yellow");

括号里面直接写标签名，匹配到数组中所有 包含span子标签的 元素

  1. 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");

所有的兄弟标签

  1. 3——文档处理
    1. 增
      1. 内部插入
        1. 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(

 3.2 ​​​​​​Prepend():将内容添加到指定元素前面

那么如果要追加到前面去呢？只需要把append改为prepend就OK了：

$("ul>li").last().prepend("<li>新加入的数据</li>");

("<li>新加入的数据</li>").prependTo(

        ​​​​​​​       3.3 ​​​​​​​​​​​​​​PrependTo():和prepend()颠倒

("<li>新加入的数据</li>").prependTo(

  1. 4.​​​​​​​外部插入
    1. 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>");

  1.  5  删
    1. 5.1 Empty():删除匹配的元素集合中所有的子节点(不包含匹配的元素)

案例:删除ul中所有的li

我们以删除ul中的li为例 来演示一下empty();

$("li").empty();

我们来看一下效果，会发现，li删除成功了吗？还行没有内容了，但是还留下了一点东西。Empty只会删除元素内的所有内容，不会删除这个元素。大家要注意

​​​​​​​​​​​​​​     5.2 Remove():删除匹配的元素集合中所有的子节点(包含匹配的元素)

我们再来用remove()来删除一下试试，

$("li").remove();

直接删除成功，remove()删除包括元素自己及其所有子元素全部删除

  1. 6 .改
  2. 6.1ReplaceWith():将所有匹配的元素替换成指定的内容

替换 我们以ReplaceWith为例来演示一下效果，

案例:把li下面所有的span标签替换为<a>标签

$("ul li span").replaceWith("<a>1234</a>");

替换这个地方要注意一下，替换会直接把原来的标签值给覆盖掉，所以新替换的标签内容也要手动添加上

//上述内容是jQuery中的筛选以及文档处理的一些案例介绍（供需要的小伙伴参考参考）。

需要补充的小伙伴欢迎来提建议！！

css 编程算法 jquery

0 人点赞