jQuery---节点操作(下)

最新推荐文章于 2022-07-12 21:07:45 发布

司天宏

最新推荐文章于 2022-07-12 21:07:45 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_41532872/article/details/86545164

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

遍历节点(同辈)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
   
</head>
<body>
    <ul>
        <li>我是一个li标签1</li>
        <li class="txt">我是一个li标签2</li>
        <li>我是一个li标签3</li>
        <li>我是一个li标签4</li>
        <li>我是一个li标签5</li>
        <li id="box" class="box">我是一个li标签6</li>
        <li class="txt">我是一个li标签7</li>
        <li>我是一个li标签8</li>
        <li class="txt">我是一个li标签9</li>
        <li>我是一个li标签10</li>
    </ul>
   <script>
        /**
         * 节点遍历操作：
         *    1.节点遍历-父元素
         *        -- 找直接父元素
         *          语法：子元素.parent()
         *        -- 找祖先元素
         *          语法: 子元素.parents() 找到全部的父辈元素
         *          语法: 子元素.parents("CSS选择器") 找到指定的父辈元素
         *    2.节点操作-后代
         *        -- 找直接子元素(可以有多个)
         *           语法：父元素.children() 找到全部的亲儿子
         *           语法：父元素.children("CSS选择器") 找到指定的亲儿子
         *        -- 找后代元素
         *           语法：父元素.find("*") 找到全部的后代元素
         *           语法：父元素.find("CSS选择器") 找到指定的后代元素
         *    3.节点操作-同辈
         *        -- 找参照元素【后面】的兄弟元素
         *           语法：参照元素.next() 找到参照元素后面的那一个兄弟，只返回1个元素
         *           语法：参照元素.nextAll() 找到参照元素后面的所有兄弟
         *           语法：参照元素.nextAll("CSS选择器") 找到参照元素后面的指定的兄弟
         *         -- 找参照元素【前面】的兄弟元素
         *           语法：参照元素.prev() 找到参照元素前面的那一个兄弟
         *           语法：参照元素.prevAll() 找到参照元素前面的所有兄弟
         *           语法：参照元素.prevAll("CSS选择器") 找到参照元素前面的指定的兄弟
         *         -- 找参照元素【所有】的兄弟元素
         *           语法：参照元素.siblings() 找到参照元素所有的兄弟(前面的兄弟+后面的兄弟)
         *           语法：参照元素.siblings("CSS选择器") 找到参照元素符合条件的兄弟
         */
  //  $("#box").siblings().css("background-color","yellow");
 // $("#box").siblings(".txt").css("background-color","yellow");
  
  //$("#box").nextAll(".txt").css("background-color","yellow");
  $("#box").prevAll(".txt").css("background-color","yellow");
    </script>
</body>
</html>

在这里插入图片描述

遍历节点(过滤)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
    <script>
            /**
             * 节点遍历操作：
             *    1.节点遍历-父元素
             *        -- 找直接父元素
             *          语法：子元素.parent()
             *        -- 找祖先元素
             *          语法: 子元素.parents() 找到全部的父辈元素
             *          语法: 子元素.parents("CSS选择器") 找到指定的父辈元素
             *    2.节点操作-后代
             *        -- 找直接子元素(可以有多个)
             *           语法：父元素.children() 找到全部的亲儿子
             *           语法：父元素.children("CSS选择器") 找到指定的亲儿子
             *        -- 找后代元素
             *           语法：父元素.find("*") 找到全部的后代元素
             *           语法：父元素.find("CSS选择器") 找到指定的后代元素
             *    3.节点操作-同辈
             *        -- 找参照元素【后面】的兄弟元素
             *           语法：参照元素.next() 找到参照元素后面的那一个兄弟
             *           语法：参照元素.nextAll() 找到参照元素后面的所有兄弟
             *           语法：参照元素.nextAll("CSS选择器") 找到参照元素后面的指定的兄弟
             *         -- 找参照元素【前面】的兄弟元素
             *           语法：参照元素.prev() 找到参照元素前面的那一个兄弟
             *           语法：参照元素.prevAll() 找到参照元素前面的所有兄弟
             *           语法：参照元素.prevAll("CSS选择器") 找到参照元素前面的指定的兄弟
             *         -- 找参照元素【所有】的兄弟元素
             *           语法：参照元素.siblings() 找到参照元素所有的兄弟
             *           语法：参照元素.siblings("CSS选择器") 找到参照元素符合条件的兄弟
             *   4.节点操作-过滤
             *        -- 找符合条件的第一个元素，对应过滤选择器:first
             *           语法：jQuery对象.first()
             *        -- 找符合条件的最后一个元素，对应过滤选择器:last
             *           语法：jQuery对象.last()
             *        -- 找指定索引位置的元素，对应过滤选择器:eq(index)
             *           语法：jQuery对象.eq(索引)   索引从0开始
             *        -- 找符合筛选条件的元素
             *           语法：jQuery对象.filter("CSS选择器")
             *        -- 找出不符合筛选条件的元素，对应过滤选择器:not()
             *           语法：jQuery对象.not("CSS选择器")
             */
            $(function(){
            	 // $("ul>li").last().css("background-color","yellow");
            	  // $("ul>li").eq(4).css("background-color","yellow");
            	   //$("ul>li").filter(".txt").css("background-color","yellow");
            	    $("ul>li").not(".txt").css("background-color","yellow");
            })
    </script>
</head>
<body>
<ul id="list">
    <li>我是一个li标签1</li>
    <li>我是一个li标签2</li>
    <li>我是一个li标签3</li>
    <li>我是一个li标签4</li>
    <li>我是一个li标签5</li>
    <li class="txt">我是一个li标签6</li>
    <li>我是一个li标签7</li>
    <li class="txt">我是一个li标签8</li>
    <li>我是一个li标签9</li>
    <li>我是一个li标签10</li>
    
</ul>
</body>
</html>```

在这里插入图片描述