jquery兄弟元素遍历 jquery获取兄弟元素

转载
技术极先锋 2023-09-21 14:09:14
文章标签 jquery兄弟元素遍历 html css jQuery 文章分类 jQuery 前端开发
t286
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            margin: 6px 0;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //查找后代元素
        //.find(selector)
        $(function () {
            $("#wrapper").hover(function () {
                $(this).find(".select").css("color","blue");
            },function () {
                $(this).find(".select").css("color","black");
            });
        });

        /*
        在jQuery中，如果要查找当前元素的后代元素（子元素，孙元素），有
        3种方法：
        .children()
        .find()
        .contents()

        .children()方法来查找当前元素的子元素，不能查找其后代元素。
        .find()方法可以查找子元素，还可以查找后代元素。
        .contents()方法用来获取子元素及其内部文本，在实际开发中，极少
        会用到此方法，大家了解一下即可.
         */
</script>
</head>
<body>
<div id="wrapper">
    <p>子元素</p>
    <p class="select">子元素</p>
    <div>
        <p>孙元素</p>
        <p class="select">孙元素</p>
    </div>
    <p>子元素</p>
    <p class="select">子元素</p>
</div>
</body>
</html>

t287
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //向前查找兄弟元素
        //.prev()
        $(function () {
           $("#sel").prev().css("color","blue");
        });

        /*
        在jQuery中，对于向前查找兄弟元素，有3种方法
        .prev()
        .prevAll()
        .prevUntil()

        兄弟元素是指该元素在同一个父元素下的同级元素。

         */
</script>
</head>
<body>
    <ul>
        <li>红：red</li>
        <li>橙：orange</li>
        <li>黄：yellow</li>
        <li id="sel">绿：green</li>
        <li>青：cyan</li>
        <li>蓝：blue</li>
        <li>紫：purple</li>
    </ul>
</body>
</html>

t288
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //向前查找兄弟元素
        //.prevUntil()
        $(function () {
            $("#sel").prevUntil("#end").css("color","blue");
        });

        /*
        在jQuery中，对于向前查找兄弟元素，有3种方法
        .prev()
        .prevAll()
        .prevUntil()

        兄弟元素是指该元素在同一个父元素下的同级元素。

        $("#sel").prevUntil("#end")表示以id=sel的元素为基点，向前
        找到id=end的兄弟元素，然后截取这个范围之间的所有兄弟元素。

         */
</script>
</head>
<body>
<ul>
    <li id="end">红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li id="sel">绿：green</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>
</body>
</html>

t289
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //向后查找兄弟元素
        //.next()
        $(function () {
            $("#sel").next().css("color","blue");
        });

        /*
        在jQuery中，对于向后查找兄弟元素，有3种方法
        .next()
        .nextAll()
        .nextUntil()


         */
</script>
</head>
<body>
<ul>
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li id="sel">绿：green</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>
</body>
</html>

t290
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //向后查找兄弟元素
        //.nextAll()
        $(function () {
            $("#sel").nextAll().css("color","blue");
        });

        /*
        在jQuery中，对于向后查找兄弟元素，有3种方法
        .next()
        .nextAll()
        .nextUntil()


         */
</script>
</head>
<body>
<ul>
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li id="sel">绿：green</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>
</body>
</html>

t291
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //向后查找兄弟元素
        //.nextUntil()
        $(function () {
            $("#sel").nextUntil("#end").css("color","blue");
        });

        /*
        在jQuery中，对于向后查找兄弟元素，有3种方法
        .next()
        .nextAll()
        .nextUntil()

        $("#sel").nextUntil("#end")，表示以id=sel的元素为基点，
        向后找到id=end的兄弟元素，然后选取这个范围之间所有的兄弟元素。

        两组方法很相似，加深记忆
        向前查找兄弟元素：prev(),prevAll，prevUntil。
        向后查找兄弟元素：next(),nextAll，nextUntil。

         */
</script>
</head>
<body>
<ul>
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li id="sel">绿：green</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li id="end">紫：purple</li>
</ul>
</body>
</html>

t292
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //查找所有兄弟元素
        //.siblings() 不带参数
        $(function () {
           $("#sel").siblings().css("color","blue");
        });
</script>
</head>
<body>
    <ul>
        <li>红：red</li>
        <li>橙：orange</li>
        <li>黄：yellow</li>
        <li id="sel">绿：green</li>
        <li>青：cyan</li>
        <li>蓝：blue</li>
        <li>紫：purple</li>
    </ul>
</body>
</html>

t293
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //查找所有兄弟元素
        //.siblings(selector) 带参数
        $(function () {
            $("#sel").siblings(".select").css("color","blue");
        });

        /*
        $("#sel").siblings(".select"),表示选取id=sel的元素所有
        符合条件的兄弟元素，兄弟元素不分先后。

         */

        /*
        习题
        1.在jQuery中，如果想要查找某一个元素所有的兄弟元素，应该使用（）方法实现
        a.prev()
        b.next()
        c.siblings()
        d.prevAll

        2.在jQuery中，如果想要查找当前元素所有的后代元素，应该使用（）方法实现
        a.children()
        b.find()
        c.childrens()
        d.contents()

        3.下面有关jQuery查找方法的说法中，不正确的是（）
        a.children()方法不仅可以查找子元素，还可以查找其他后代元素
        b.find()方法可以查找所有的后代元素
        c.next()方法返回的是一个元素，nextAll（）方法返回的是一个集合
        d.parent()方法只能查找当前元素的父元素

        4.下面有一段代码，其中$(".first").nextAll()可以等价于（）。
        <script1>
            $(function)
            {
                $(".first").nextAll().css("color","blue");
            }
        </script1>
        <body>
            <ul>
                <li class="first"></li>
                <li class="second"></li>
                <li class="third"></li>
            </ul>
        </body>
        ------------------
        a.$(".first li")
        b.$(".first>li")
        c.$(".first~li")
        d.$(".first+li")


        答案：
        1C 2B 3A 4D
         */
</script>
</head>
<body>
<ul>
    <li>红：red</li>
    <li class="select">橙：orange</li>
    <li>黄：yellow</li>
    <li id="sel">绿：green</li>
    <li>青：cyan</li>
    <li class="select">蓝：blue</li>
    <li>紫：purple</li>
</ul>
</body>
</html>

t294
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //字符串操作
        //$.trim()
        $(function () {
           var str = " 学习jQuery编程技术 ";
           document.writeln("开始长度：" + str.length + "<br>");
           var str = $.trim(str);
           document.writeln("trim长度：" + str.length);
        });

        /*
        jQuery中所有工具函数都是采用$.函数名的方式来调用的。由于$等价于
        jQuery，所以$.函数名（）还可以写成jQuery.函数名（）。

        工具函数有5大类，
        字符串操作
        URL操作
        数组操作
        对象操作
        检测操作

        字符串操作
        .trim（）方法是用来删除字符串前后空格的

         */
</script>
</head>
<body>

</body>
</html>

t295
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //URL操作
        //$.param() 将数组或对象进行字符串序列化
        $(function () {
           var person = {
               name:"tom",
               age:33
           };

           var str = $.param(person);
           alert(str);
        });
</script>
</head>
<body>

</body>
</html>

t296
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //.inArray(value,array)
        $(function () {
           var arr = [11,22,33,44,55];
           var index = $.inArray(33,arr);
           if(index == -1)
           {
               alert("没有找到元素");
           }
           else
           {
               alert("元素下标为：" + index);
           }
        });
        /*
        $.inArray（）方法返回的是元素在数组中的位置。
        如果元素在数组能找到，返回一个大于或等于0的值，即下标
        如果没有找到，返回-1
         */
</script>
</head>
<body>

</body>
</html>

t297
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作，
        //$.merge(arr1,arr2) 合并数组
        $(function () {
            var frontEnd = ["HTML","CSS","Javascript"];
            var backEnd = ["PHP","JSP","ASP.NET"];
            var result = $.merge(frontEnd,backEnd);
            document.writeln(result);
        });
</script>
</head>
<body>

</body>
</html>

t298
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //$.makeArray(obj) 转换数组
        //将arguments转换为array
        function test() {
            var arr = $.makeArray(arguments);
            alert(arr);
        }
        test("yes",1,{});
        /*
        在jQuery中，我们可以使用$.makeArray（）方法将类数组对象转换
        为真正的数组。类数组对象必须有length属性，例如arguments，
        nodeList等。
        $.makeArray（obj）方法的返回值是一个数组。如果参数obj不是
        类数组对象，则返回一个空数组。

        那我们为什么要将arguments,nodeList这些转换为真正的数组呢？
        因为转换为真正的数组后，就可以调用数组的各种方法来操作对象。
         */
</script>
</head>
<body>

</body>
</html>

t299
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //$.makeArray(obj) 转换数组
        //将nodeList转换为array
        $(function () {
           var arr = $.makeArray($("li"));
           $("ul").html(arr.reverse());
        });

        /*
        在jQuery中，我们可以使用$.makeArray（）方法将类数组对象转换
        为真正的数组。类数组对象必须有length属性，例如arguments，
        nodeList等。
        $.makeArray（obj）方法的返回值是一个数组。如果参数obj不是
        类数组对象，则返回一个空数组。

        那我们为什么要将arguments,nodeList这些转换为真正的数组呢？
        因为转换为真正的数组后，就可以调用数组的各种方法来操作对象。
         */
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

t300
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //$.grep(array,function(value,index),false)
        //过滤数组
        $(function () {
           var arr = [3,9,1,12,50,21];
           var result = $.grep(arr,function (value, index) {
                return value > 10;
           },false);
           alert(result);
        });
        /*
        在jQuery中，我们可以使用$.grep（）方法来过滤数组中不符合条件
        的元素。
        参数1，是一个数组，
        参数2，是一个匿名函数，形参value表示当前元素的值，index表示索引
        参数3，是一个布尔值，该值为false，$.grep（）只会收集函数返回true
        的数组元素，该值为true，则$.grep（）只会收集函数返回false的数组
        元素。

         */
</script>
</head>
<body>

</body>
</html>


t301
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //$j.grep()
        $(function () {
           var a = [3,9,1,12,50,21];
           var b = [2,9,1,16,50,32];
           var result = $.grep(a,function (value, index) {
               if(b.indexOf(value) >= 0)
               {
                   return true;
               }
           },false);
           alert(result);
        });

        /*
        在jQuery中，我们可以使用$.grep（）方法来过滤数组中不符合条件
        的元素。
        参数1，是一个数组，
        参数2，是一个匿名函数，形参value表示当前元素的值，index表示索引
        参数3，是一个布尔值，该值为false，$.grep（）只会收集函数返回true
        的数组元素，该值为true，则$.grep（）只会收集函数返回false的数组
        元素。

        在实际开发中，$.grep（）方法常用于获取两个数组中相同的部分或
        不相同的部分。
         */
</script>
</head>
<body>

</body>
</html>

t302
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //$.each(array,function(index,value))
        $(function () {
           var arr = ["HTML","CSS","Javascript"];
           $.each(arr,function (index,value) {
               var result = "下标：" + index + "，值：" + value + "<br>";
               document.writeln(result);
           })
        });
        /*
        在jQuery中，我们可以使用$.each（）方法来遍历数组。
        参数1，是一个数组
        参数2，是一个匿名函数。函数有两个形参：index表示当前元素的
        索引，value表示当前元素的值。
        如果需要退出循环，可以回调函数的false，即return false.

        这里需要注意，function(index,value)，而不是function(value,index)，
        $.grep和$.each两个方法中的匿名函数的参数顺序不一样。
         */
</script>
</head>
<body>

</body>
</html>

t303
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //数组操作
        //$.each(array,function(index,value))
        $(function () {
           var arr = ["HTML","CSS","Javacript"];
           $.each(arr,function (index,value) {
               var result = value.split("").reverse().join("");
               arr[index] = result;
           });
           document.writeln(arr);
        });
</script>
</head>
<body>

</body>
</html>

t304
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           var person = {
               name:"tom",
               age : 28,
               hobby: "football"
           };
           $.each(person,function (key, value) {
               document.writeln(key + "=" + value + "<br>");
           })
        });

        /*
        在$.each()方法中，参数1是一个对象，参数2是一个匿名函数，
        匿名函数形参1，key表示键，value表示值。
        退出循环，调用return false。

        对于$.each（）方法，可以使用两种方式获取键的值：
        obj[key]和value。


         */
</script>
</head>
<body>

</body>
</html>

t305
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            var person = {
                name:"tom",
                age : 28,
                hobby: "football"
            };
            $.each(person,function (key, value) {
                document.writeln(key + "=" + person[key] + "<br>");
            })
        });
        /*
        在$.each()方法中，参数1是一个对象，参数2是一个匿名函数，
        匿名函数形参1，key表示键，value表示值。
        退出循环，调用return false。

        对于$.each（）方法，可以使用两种方式获取键的值：
        obj[key]和value。


         */
</script>
</head>
<body>

</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。