JQuery简单入门

Posted 2020-10-15 豆子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery简单入门相关的知识，希望对你有一定的参考价值。

JQuery的遍历操作

1. 被遍历的对象(是一个集合)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用对象访问方式遍历</title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            $(function(){
                // 全选/ 全不选
                $("#checkallbox").click(function(){
                    var isChecked = this.checked;
                    //使用对象访问的方式进行遍历，语法：$().each(function(){})
                    $("input[name=‘hobby‘]").each(function(){
                        this.checked = isChecked;
                    });
                });
            });
        </script>
    </head>
    <body>
        请选择您的爱好<br/>
        <input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
        <input type="checkbox" name="hobby" value="足球" /> 足球
        <input type="checkbox" name="hobby" value="篮球" /> 篮球
        <input type="checkbox" name="hobby" value="游泳" /> 游泳
        <input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
    </body>
</html>

2. 被遍历的对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用工具类遍历方式</title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            /**
             * 说明：两种遍历方式，掌握其中一种即可，个人觉得此种方式较容易理解!
             */
        
            $(function(){
                // 全选/ 全不选
                $("#checkallbox").click(function(){
                    var isChecked = this.checked;
                    //使用工具类遍历方式，语法：$.each(array，function(i,j){}) 
                    //其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
                    $.each($("input[name=‘hobby‘]"), function(i,j) {
                        j.checked = isChecked;
                    });
                });
            });
        </script>
    </head>
    <body>
        请选择您的爱好<br/>
        <input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
        <input type="checkbox" name="hobby" value="足球" /> 足球
        <input type="checkbox" name="hobby" value="篮球" /> 篮球
        <input type="checkbox" name="hobby" value="游泳" /> 游泳
        <input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
    </body>
</html>

以上是关于JQuery简单入门的主要内容，如果未能解决你的问题，请参考以下文章

jQuery简单入门

jQuery应用代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

JQuery简单入门

JQuery的遍历操作