码迷,mamicode.com
首页 > Web开发 > 详细

jquery循环方法

时间:2021-07-22 17:36:27      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:jquer   click   for   set   ever   div   type   onclick   query   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <script src="jquery-3.3.1.js"></script>
    <script>
        attr=[11,22,33]
        // for (var i=0;i<attr.length;i++) {
        //     $(‘p‘).eq(i).html(attr[i]);
        // }; // js可以混用jquery

        // jquery循环方式一
        $.each(attr,function (x,y) {
            console.log(x); // 0 1 2
            console.log(y); // 11 22 33
        });
        // jquery循环方式二
        $(p).each(function () {
            console.log($(this));
            $(this).html(p);
        }); // 对三个p标签进行循环,$this表示的是每个p标签,对标签的循环用的更多一些
    </script>

    <!--正反选案例练习-->
    <button onclick="selectAll()">全选</button>
    <button onclick="reverse()">反选</button>
    <button onclick="cancel1()">取消</button>
    <table border="1px">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
        </tr>
    </table>
    <script>
        function selectAll() {
            $(:checkbox).each(function () {
                $(this).prop(checked,true);
            })
        };
        function cancel1() {
            $(:checkbox).each(function () {
                $(this).prop(checked,false);
            })
        };
        function reverse() {
            $(:checkbox).each(function () {
                if ($(this).prop(checked)) {
                    $(this).prop(checked,false)
                }else{
                    $(this).prop(checked,true)
                }
            })
        };
    </script>

</body>
</html>

 

jquery循环方法

标签:jquer   click   for   set   ever   div   type   onclick   query   

原文地址:https://www.cnblogs.com/xuewei95/p/15041847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!