zoukankan      html  css  js  c++  java
  • Jquery each用法

      each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等.在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

    each处理一维数组

            var arr1 = ["aaa", "bbb", "ccc"];
            $.each(arr1, function (i, val) {
                alert(i);
                alert(val);
            });    

    alert(i)将输出0,1,2
    alert(val)将输出aaa,bbb,ccc

    each处理二维数组 

          var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
            $.each(arr2, function (i, item) {
                alert(i);
                alert(item);
            }); 

    arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
    item[0]相对于取每一个一维数组里的第一个值  
    alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
    alert(item)将输出为  ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

    对此二位数组的处理稍作变更之后

            var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
            $.each(arr2, function (i, item) {
                $.each(item, function (j, val) {
                    alert(j);
                    alert(val);
                });
            });   

    alert(j)将输出为0,1,2,0,1,2,0,1,2
    alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc

    each处理简单的json数据

          var obj = { one: 1, two: 2, three: 3 };
            $.each(obj, function (key, val) {
                alert(key);
                alert(val);
            });   

    这里alert(key)将输出one two three
    alert(val)将输出1,2,3
    这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。而这个val等同于obj[key]

    each处理复杂的json数据

            var obj = { "username": "andy",
                "age": 20,
                "info": { "tel": "123456", "cellphone": "98765" },
                "address":
                [
                    { "city": "beijing", "postcode": "222333" },
                    { "city": "newyork", "postcode": "555666" }
                ]
    
            }
    
            $.each(obj, function (key, val) {
                alert(key);
                alert(val);
            });   

    这里alert(key)将输出username,age,info,address
    alert(val)将输出andy,20,[object object],[object object] [object object]

    为什么回出现object呢,因为info和address的值是jason,想把它读出来,还要继续遍历下去

    ecah处理dom元素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv='Content-Type' content='application/xhtml+xml; charset=UTF-8' />
        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.each($("input:hidden"), function (i, val) {
                    alert(i);
                    alert(val.name);
                    alert(val.value);
                });
            });       
        </script>
    </head>
    <body>
        <input name="aaa" type="hidden" value="111" />
        <input name="bbb" type="hidden" value="222" />
        <input name="ccc" type="hidden" value="333" />
        <input name="ddd" type="hidden" value="444" />
    </body>
    </html>

    alert(i)将输出为0,1,2,3

    alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
    alert(val.value);  将输出111,222,333,444,如果使用this.value将输出同样的结果

     

    如果将以上面一段代码改变成如下的形式 

               $("input:hidden").each(function (i, val) {
                    alert(i);
                    alert(val.name);
                    alert(val.value);
                });

    输出结果也一样

  • 相关阅读:
    javascript 面向对象 new 关键字 原型链 构造函数
    前端性能优化之gzip
    电子商务秒杀所带来的问题
    git 远程版本库,github提供服务原理,git自动更新发送邮件
    单点登陆的三种实现方式(详解)
    使用php实现单点登录
    支付宝异步回调
    http状态码大全
    php 单向散列加密
    curl模拟post请求
  • 原文地址:https://www.cnblogs.com/lgxlsm/p/2821886.html
Copyright © 2011-2022 走看看