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

JQuery简单入门

时间:2017-11-24 22:50:03      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:doctype   check   checked   oct   说明   集合   meta   this   理解   

  • 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简单入门

标签:doctype   check   checked   oct   说明   集合   meta   this   理解   

原文地址:http://www.cnblogs.com/douzujun/p/7892490.html

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