jQuery--节点过滤（filter()、not()）详解_jq 节点列表过滤

作者：不正经 | 2024-05-15 17:03:23

踩

jq 节点列表过滤

节点过滤

在查找元素时，可以使用：first-child、:last-child和:eq()过滤选择器来选择一个特定的元素，还可以使用first()、last()和eq()方法对元素进行查找，功能与过滤器基本相同。

first()方法用于返回所匹配元素中的第一个元素，last()方法用于返回所匹配元素中的最后一个元素，eq()方法用于返回所匹配元素中指定索引位置的元素。

1. filter()方法：
filter()方法用于返回符合筛选规则的元素集合，其语法格式如下：

$(selector).filter(expression | jQueryObject | element | function(index))
1

$(selector)：表示所匹配的元素
方法的参数是一个表达式、jQuery对象、DOM对象或函数
参数expression表示对匹配的元素使用expression选择器进行筛选
参数jQueryObject表示在匹配的元素中筛选jQueryObject类型的元素
参数element表示在匹配的元素中筛选element类型的元素
参数function(index)表示使用函数来筛选元素，index表示当前元素在集合中的位置，当函数返回值为true时说明当前元素符合筛选条件，否则不符合筛选条件

2. not()方法：
not()方法用于返回指定规则之外的其他元素，其功能与filter()方法恰好相反。not()方法的语法格式与filter()方法完全相同。

示例：filter()和nnot()方法的使用

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>后代元素-jQuery遍历</title>
	<script type="text/javascript" src="js/jquery-1.x.js">
	</script>
  </head>
  <body>
      <div>div(父节点)
        <h1 id="myTitle">在 DOM 树中水平遍历</h1>
        <p>有许多有用的方法让我们在 DOM 树进行水平遍历</p>
        <span>匹配元素中所有的span同胞元素</span>
        <h2>jQuery 遍历-同胞</h2>
        <p>$("h2").siblings("p");</p>
        <h3>同胞拥有相同的父元素。</h3>
        <p>通过jQuery，您能够在 DOM 树中遍历元素的同胞元素</p>
      </div>
      <div>div(父节点)
        <h2>jQuery next()方法</h2>
        <p><span>$("h2").next();</span> </p>
        <span class="mySpan">next()方法返回被选元素的下一个同胞元素</span>
        <p><span>该方法只返回一个元素</span></p>
        <h3>亲自试一试</h3>
      </div>
      <script type="text/javascript">
        $(function (e) {
            //使用表达式作为过滤参数，筛选div中的p、h3或class为mySpan的元素，然后从筛选的元素中再次筛选下标为奇数的元素
            $("div").children().filter("p,h3,.mySpan").filter(":odd").css({"border":"1px solid red"});
            //筛选div中span元素
            $("div").children().filter($("span")).css({"color":"green"});
			//筛选div中id为
            $("div").children().filter(document.getElementsByTagName("span")).css({"color":"blue"});
            $("div").children().filter(function (index) {
                //将div中所有的子元素下标及html内容输出到控制台
                console.log("下标：" + index + "  内容：" + this.innerHTML);
                //当前元素中包含一个span标签时，符合筛选条件
                return $("span", this).length == 1;
            }).css({
                "color": "red"
            });
        });
        </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/574011