• 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>"
                           );               
                            
                                }
                       );

  • 相关阅读:
    设计模式走一遍---观察者模式
    从0打卡leetcode之day 6--最长回文串
    回车与换行的故事
    线程安全(中)--彻底搞懂synchronized(从偏向锁到重量级锁)
    线程安全(上)--彻底搞懂volatile关键字
    从0打卡leetcode之day 5 ---两个排序数组的中位数
    聊一聊让我蒙蔽一晚上的各种常量池
    从零打卡leetcode之day 4--无重复最长字符串
    C4.5算法总结
    数据库游标使用
  • 原文地址:https://www.cnblogs.com/wellsoho/p/5073161.html
Copyright © 2020-2023  润新知