jquery中筛选中方法-Jquery-前端日记簿

首页 Jquery 正文

jquery中筛选中方法

2022-12-02 187

jquery中筛选中方法

筛选中方法他们的功能与过滤选择器有的类似，用法不一样，筛选中主要是方法中方法他们的功能与过滤选择器有的类似，用法不一样，筛选中主要是方法

children(selector) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。查找匹配元素中的子元素的集合

$("ul").children("li"); 相当于$("ul>li"),子类选择器

find(selector) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

查找匹配元素中的子元素的集合

find() 这个方法里一定要写参数，如果不写，元素找不到

$("ul").find("li") 相当于$("ul li"),后代选择器

siblings(selector) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

$("#first").siblings("li");查找兄弟节点，不包括自己

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
      ul {
        width: 300px;
        height: 200px;
        list-style: none;
        color: red;
        float: left;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <ul id="list">
      <li>aaa</li>
      <li>bbb</li>
      <span>ccc</span>
      <span>ddd</span>
      <em>eee</em>
      <i>ffff</i>
    </ul>

    <script src="js/jquery.js"></script>
    <script>
      $(function () {
        //不写参数，它 找到的 是 父元素中的所有的孩子
        let r1 = $("#list").children().text();
        console.log("查找子元素" + r1);
        // 写参数，它 找到的 是 父元素中的指定的孩子
        let r2 = $("#list").children("li").text();
        console.log("查找指定子元素" + r2);

        //  查找 匹配元素 中的 子元素 的集合

        // $r3 = $('#list').find();
        // console.log($r3);
        let r3 = $("#list").find("li").text();
        console.log("查找匹配的子元素" + r3);

        // 查找兄弟节点，不包括自己
    
        var r5 = $("#list").find("span").siblings("li").text();
        console.log("查找指定的兄弟节点" + r5);

        var r6 = $("#box div").siblings().text();
        console.log("查找同辈元素" + r6);
      });
    </script>
  </body>
</html>

预览：

parent() $("#first").parent();查找父亲, 你找的这个元素，他是被放置在一个数组中的，我们理解为他是一个集合。

官网上翻译的意思是：取得一个包含着所有匹配元素的唯一父元素的元素集合。

<div id="box">
        <div id="parent">
            <ul class="menu">
                <li><a href="">aaa</a></li>
                <li><a href="">bbb</a></li>
                <li><a href="">ccc</a></li>
            </ul>
    
            <ul class="nav">
                <li><a href="">ddd</a></li>
                <li><a href="">eee</a></li>
                <li><a href="">fff</a></li>
            </ul>
        </div>
    </div>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
          //我们真正想找到这个dom元素，必须取到数组 下标是0的这个位置上的内容，才能拿到这个父元素 
          $r1 = $('.menu').parent()[0];
          console.log($r1);
          
          $r2 = $('.nav').parent();
          console.log($r2);
          
            
        })
    </script>

预览：

parents() 查找祖先元素。他可以把你的所有的祖先元素都找到。

$r3 = $('.menu').parents();
console.log($r3);

如果你想找某一个祖先，你要指定这个祖先是谁。

$r4 = $('.menu').parents("#box");
console.log($r4);

next() $("li").next(); 找下一个兄弟，紧邻的后面同辈元素的元素集合。

使用有两个理解和写法

第一种理解和写法：

       // 第二种方式 

         //如果你在找 p的时候，指定的是某一个p，next() 找到的就是 这个指定p后面紧挨他的那一个兄弟节点
          $(".txt").find('p.cur').next().css('color','red');

prev() $("li").prev(); 找上一个兄弟

也有两种理解：

//如果有很多p，浏览器渲染 找到的是其中p，prev() 找到的是这个p前面的所有的同辈兄弟节点
$(".txt").find('p').prev().css('color','red');

 //如果你在找 p的时候，指定的是某一个p，prev() 找到的就是 这个指定p后面紧挨他的上一个兄弟节点
$(".txt").find('p.cur').prev().css('color','red');

index() 返回当前元素在所有兄弟元素里面的索引，搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

<ul id="nav">
        <li id="foo">foo</li>
        <li id="bar">bar</li>
        <li id="baz">baz</li>
    </ul>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //查找 获取 匹配元素 所在位置的索引值    
            $i = $('#baz').index();
            console.log($i);

        })
    </script>

预览：

eq(N) 获取第N个元素。 N代表索引。

ul id="nav">
        <li id="foo">foo</li>
        <li id="bar">bar</li>
        <li id="baz">baz</li>
    </ul>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //根据 索引 查找 获取元素
            $('#nav li').eq(1).css('color','blue');

        })
    </script>

预览：

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=5

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。