jQuery - 遍历

其他 2018-07-19 00:25:11 阅读次数: 0

jQuery遍历之children()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left {width: auto;height: 120px;}
        .left div {width: 150px;height: 70px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>children方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button id="bt1">点击：children无参数</button>
    <button id="bt2">点击：children传递表达式</button>
    <script type="text/javascript">
    $("#bt1").click(function() {
        $("div").children().fadeToggle()
    })
    </script>

    <script type="text/javascript">
    $("#bt2").click(function() {
        //找到所有class=div的元素
        //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
        $('.div').children(':last').css('color', 'blue')
    })
    </script>
</body>
</html>

jQuery遍历之find()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left {width: auto;height: 200px;}
        .left div {width: 150px;height: 70px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        span {color: blue;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>find方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：find传递表达式</button>

    <h3>find表达式</h3>
    <div style="border:1px solid red;">
        <p>
            <span>测试1</span>
            <a>测试2</a>
        </p>
        <p>
            <span>慕课网1</span>
            <a>慕课网2</a>
        </p>
        <div>
            <span>V1</span>
            <a>V2</a>
        </div>
    </div>
    <br/>
    <br/>
    <button>点击：find传递$对象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $("ul").find(".item-1").css("color","blue")
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有p元素，然后筛选出子元素是span标签的节点
        //改变其字体颜色
        var $spans = $('span');
        $("p").find($spans).css('color', 'red');
    })
    </script>
</body>
</html>

jQuery遍历之parent()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left div {width: 350px;height: 150px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        span {color: blue;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>parent方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>

            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>

            </ul>
        </div>
    </div>

    <button>点击：parent无参数</button>
    <button>点击：paren传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('.level-3').parent().css('border', '1px solid red')
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-a的父元素
        //然后给每个ul,然后筛选出最后一个，加上蓝色的边
       $('.item-a').parent(':last').css('border', '1px solid blue')
    })
    </script>
</body>
</html>

jQuery遍历之parents()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left{width: 500px;height: 400px;}
        .left div {width: 350px;height: 150px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        span {color: blue;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>parents方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>
            </ul>
        </div>
    </div>
    <button>点击：parents无参数</button>
    <button>点击：parents传递选择器</button>

    <script type="text/javascript">
    $("button:first").click(function() {
        $('.item-b').parents().css('border', '1px solid red')
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
        //并且附上一个边
        $('.item-b').parents('.first-div').css('background-color', 'pink')
    })
    </script>
</body>
</html>

jQuery遍历之closest()方法

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style>
        .left {width: auto;height: 200px;}
        .left div {width: 350px;height: 150px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        span {color: blue;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>closest方法()</h2>
    <div class="left first-div">
    <div class="div">
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </div>
    </div>
    <br/>
    <button>点击：closest传递选择器 </button>
    <button>点击：closest传递一个元素对象</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            $('li.item-1').closest('.level-2').css('border', '1px solid red')
        })
    </script>

    <script type="text/javascript">
        $("button:last").click(function() {
            var itemB = $('.item-b')
            $('li.item-1')
                .closest(itemB)
                .css('border', '1px solid blue');
        })
    </script>
</body>
</html>

jQuery遍历之next()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style>
        .left {width: auto;height: 120px;}
        .left div {width: 150px;height: 70px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        a {display: block;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>next方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：next无参数</button>
    <button>点击：next传递表达式</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('.item-1').next().css('color', 'red')
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-3的li
        //然后筛选出第一个li，加上蓝色的边
       $('.item-2').next(':first').css('color', 'blue')
    })
    </script>
</body>
</html>

jQuery遍历之prev()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style>
        .left {width: auto;height: 150px;}
        .left div {width: 150px;height: 100px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        a {display: block;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>prev方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：prev无参数</button>
    <button>点击：prev传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('.item-2').prev().css('color', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出最后一个，加上蓝色的边
       $('.item-3').prev(':last').css('border', '1px solid blue')
    })
    </script>
</body>

</html>

jQuery遍历之siblings()

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style>
        .left {width: auto;height: 150px;}
        .left div {width: 150px;height: 100px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
        a {display: block;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>siblings方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：siblingsv无参数</button>
    <button>点击：siblings传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $('.item-2').siblings().css('border', '2px solid red')
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到class=item-2的所有兄弟节点
        //然后筛选出最后一个，加上蓝色的边
        $('.item-2').siblings(':last').css('border', '2px solid blue')
    })
    </script>
</body>
</html>

jQuery遍历之add()方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left{width: 200px;height: 200px;background-color: blue;}
        .right{width: 200px;height: 200px;background-color: pink;}
        .left div {width: 150px;height: 120px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>add方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
            <p>新的p元素</p>
        </div>
    </div>

    <div class="right"></div>

    <br/>
    <button>点击：add传递元素标签</button>
    <button>点击：add传递html结构</button>

    <script type="text/javascript">
    $("button:first").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    })
    </script>
</body>
</html>

jQuery遍历之each()

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style>
        .left {width: auto;height: 150px;}
        .left div {width: 150px;height: 120px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>each方法</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>list item 4</li>
                <li>list item 5</li>
                <li>list item 6</li>
            </ul>
        </div>
    </div>
    <br/>
    <button>点击：each方法遍历元素</button>
    <button>点击：each方法回调判断</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //遍历所有的li
        //修改每个li内的字体颜色
        $("li").each(function(index, element) {
            $(this).css('color','red')
        })

    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //遍历所有的li
        //修改偶数li内的字体颜色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/cai181191/article/details/81085229
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022