zoukankan      html  css  js  c++  java
  • jquery 选择对象随心所欲,遍历数组更是易如反掌

    jquery只要研究总结透彻了,那选择对象就会随心所欲,遍历数组更是易如反掌。选对对象,才能“娶妻生子”,才能有后续的数据处理。呵呵遍历对很关键。

    怕只怕,学东西浅尝辄止一知半解。本篇特别研究总结jquery的遍历。

    一、最大的遍历就是树遍历,还有就是遍历数组。树遍历主要有以下函数:
    1、向上遍历 parent() parents() parentsUntil()
    2、向下遍历 children() find()
    3、同级遍历 siblings() next() nextAll()nextUntil() prev()prevAll()prevUntil()
    4、遍历的检索与筛选,缩写搜索元素的范围
      三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
      其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

    另外:触发遍历通常结合click等绑定事件,通过某个ID来遍历。绑定事件有 .live() .delegate() .bind() .on()

    $("a").live("click",function(){alert("ok");});
    delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

    $("#container").delegate("a","click",function(){alert("ok");})
    on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    具体差别:
    .bind()是直接绑定在元素上
    .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
    .delegate()则是更精确的小范围使用事件代理,性能优于.live()
    .on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制

    具体用哪个需要根据场景来区别使用。
    1.bind 是对具体的元素绑定具体的事件;
    2.live,或者 delegate 是事件代理模式,在动态生成的将来元素中用bind 需要恰当的时机,而用代理则避免这个模式。还有代理会更高效。
    bind()只能对已有的元素绑定事件,而.live()能对未来插入的元素绑定事件。live使用了冒泡方式来判断当前触发事件的对象,用的场景会少很多,相比bind有性能问题!
     
    特别说明:
    JQuery从1.7版本开始将bind(),live()和delegate()方法合并成了on()方法了
    同样unbind(),die()和undelegate()方法也合并成了off()方法


    二、数组遍历,使用最多的主要用each函数,或使用foreach ,for 来实现。
    解析json串时要注意,是转成对象,还是数组。
    //json串中全是{}罗列的,所以只能按对象来解析,[]这样可以按数组解析。
    $json='{"return":"OK","questions":{"4":{"qid":"4","title":"u95eeu989844444","answers":{"14":{"cid":"14","title":"A","cont":"u7b54u68484-1","iscorrect":"1","qid":"4"},"15":{"cid":"15","title":"B","cont":"u7b54u68484-2","iscorrect":"0","qid":"4"},"16":{"cid":"16","title":"C","cont":"u7b54u68484-3","iscorrect":"0","qid":"4"}}},"2":{"qid":"2","title":"u95eeu98982222","answers":{"5":{"cid":"5","title":"A","cont":"u7b54u68482-1","iscorrect":"1","qid":"2"},"6":{"cid":"6","title":"B","cont":"u7b54u68482-2","iscorrect":"0","qid":"2"},"7":{"cid":"7","title":"A","cont":"aa","iscorrect":"0","qid":"2"},"8":{"cid":"8","title":"D","cont":"u7b54u68482-4","iscorrect":"0","qid":"2"}}}}}';
    //php中一定要注意true的使用,When true, returned objects will be converted into associative arrays.
    $arr=json_decode($json,true);
    在js脚本中是这个样子的
    var jn=jQuery.parseJSON(data,true);

    例子1: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

    例子2: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']

    例子3:遍历对象数组
    $("#ID")返回的是一个对象,因为ID唯一
    $(".className"),Find()等返回一般是个集合,或者说是个JQ对象数组
    html中数据
    <dl id="menu_title">
        <dt>人</dt> <dd> 一种高级动物</dd>
               <dt>狗</dt> <dd>  人类的朋友</dd>
               <dt>猫</dt> <dd>  猫科动物的祖先</dd>
    </dl>

    //js取对象集合并遍历
    var jqArr = $("#menu_title").find("dt");
          jqArr.each(function (i, o) {
                    console.log("第" + i + "号元素的内容是:" + $(o).html());
     });
          
    $.each(function(i,o){});
    方法中的i表示JQ数组的索引值,而o表示JQ数组的值,而o加上$()变成JQ对象之后,使用html()这个方法可以输出o这个对象里的内容;JQ产生的数组的索引也是从0开始的。       
                

    例子4:遍历复杂的json串
    (1)、json串不规范的{}大括号连环套的要解析成object ,也就是var jn=jQuery.parseJSON(data,true);

                data='{"return":"OK","questions":{"4":{"qid":"4","title":"u95eeu989844444","answers":{"14":{"cid":"14","title":"A","cont":"u7b54u68484-1","iscorrect":"0","qid":"4"},"15":{"cid":"15","title":"B","cont":"u7b54u68484-2","iscorrect":"1","qid":"4"},"16":{"cid":"16","title":"C","cont":"u7b54u68484-3","iscorrect":"0","qid":"4"}}},"2":{"qid":"2","title":"u95eeu98982222","answers":{"5":{"cid":"5","title":"A","cont":"u7b54u68482-1","iscorrect":"0","qid":"2"},"6":{"cid":"6","title":"B","cont":"u7b54u68482-2","iscorrect":"0","qid":"2"},"7":{"cid":"7","title":"A","cont":"aa","iscorrect":"0","qid":"2"},"8":{"cid":"8","title":"D","cont":"u7b54u68482-4","iscorrect":"0","qid":"2"}}}}}';
    
                var jn=jQuery.parseJSON(data,true);
                var qs=jn.questions;
                if(jn.return!=null&&jn.return=='OK'){
                    $.each( qs , function(property1,value1){            
                             // console.log("属性名1=" + property1 + "; 属性值1=" + value1);
                              $.each( value1  , function(property2, value2){
                                  //console.log("--属性名2=" + property2 + "; 属性值2=" + value2);
                                   if(property2=="qid")   qid=value2;
                                     if(property2=="title") qtitle=value2;    
                                       if(property2=="title") {
                                            //console.log("--属性名2=" + property2 + "; 属性值2=" + value2+" qid:"+qid +" qtitle:"+ qtitle );
                                           $("#datalist").append(
                                                      "<div class='a32 str'>"+ qid+" "+qtitle+"</div>"+
                                                      "<div class='a33'><input type='hidden' name='t"+qid+"' id='t"+qid+"' value='"+qid+"_0'>"+
                                                       "<div>"
                                                      );
                                       }
                                  if(property2=='answers'){
                                     $.each( value2, function(property3, value3){                                                     
                                              $.each( value3, function(property4, value4){
                                                     //console.log("------属性名4=" + property4 + "; 属性值4=" + value4);
                                                     if(property4=="cid") cid=value4;
                                                     if(property4=="title") ctitle=value4;    
                                                     if(property4=="cont") cont=value4;                        
                                                 } );
                                              // console.log("----属性名3=" + property3 + "; 属性值3=" + value3+" cid:"+cid +" ctitle:"+ ctitle +" cont:"+cont);    
                                            $("#datalist").append(
                                                   
                                                    "<div class='a331 t"+qid+"'  id='"+qid+"_"+cid+"'><span class='radio"+qid+"'></span></div>"+
                                                    "<div class='a332 str'>"+" cid:"+cid +" "+ ctitle +" "+cont+"</div>"+
                                                          "<div class='cls'></div></div>");
                                            
                                         } );
                                       $("#datalist").append("</div>");
                                  };
                              // $("#datalist").append("</div>");
                                  } );
                              
                          } );         
                        
                        
                }else{
                      //alert("失败!");
                }


    (2)、json串规范的是[]中括号就直接遍历,var jn=jQuery.parseJSON(data);//不用加true
                    var jn=jQuery.parseJSON(data);
                    //jn.userlist 就是[]列表数据
             $.each(jn.userlist, function(i, item) {                
                             $("#datalist").append(
                                   "<div class='a53'>"+
                                        "<div class='a531 fl str'>"+(i+1)+"</div>"+
                                        "<div class='a532 fl str'>"+item.unick+"</div>"+
                                        "<div class='a533 fl str'>"+item.speed+"s</div>"+
                                        "<div class='a534 fl str'>"+item.corrects+"/"+jn.total+"</div>"+
                                        "<div class='cls'></div>"+
                                    "</div>"
                           );               
                            
                                }
                       );

  • 相关阅读:
    背水一战 Windows 10 (90)
    背水一战 Windows 10 (89)
    背水一战 Windows 10 (88)
    背水一战 Windows 10 (87)
    背水一战 Windows 10 (86)
    背水一战 Windows 10 (85)
    背水一战 Windows 10 (84)
    背水一战 Windows 10 (83)
    背水一战 Windows 10 (82)
    背水一战 Windows 10 (81)
  • 原文地址:https://www.cnblogs.com/wellsoho/p/5073161.html
Copyright © 2011-2022 走看看