jquery 选择对象,遍历数组

(http://www.cnblogs.com/wellsoho/p/5073161.html)
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":"\u95ee\u989844444","answers":{"14":{"cid":"14","title":"A","cont":"\u7b54\u68484-1","iscorrect":"1","qid":"4"},"15":{"cid":"15","title":"B","cont":"\u7b54\u68484-2","iscorrect":"0","qid":"4"},"16":{"cid":"16","title":"C","cont":"\u7b54\u68484-3","iscorrect":"0","qid":"4"}}},"2":{"qid":"2","title":"\u95ee\u98982222","answers":{"5":{"cid":"5","title":"A","cont":"\u7b54\u68482-1","iscorrect":"1","qid":"2"},"6":{"cid":"6","title":"B","cont":"\u7b54\u68482-2","iscorrect":"0","qid":"2"},"7":{"cid":"7","title":"A","cont":"aa","iscorrect":"0","qid":"2"},"8":{"cid":"8","title":"D","cont":"\u7b54\u68482-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,2alert(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":"\u95ee\u989844444","answers":{"14":{"cid":"14","title":"A","cont":"\u7b54\u68484-1","iscorrect":"0","qid":"4"},"15":{"cid":"15","title":"B","cont":"\u7b54\u68484-2","iscorrect":"1","qid":"4"},"16":{"cid":"16","title":"C","cont":"\u7b54\u68484-3","iscorrect":"0","qid":"4"}}},"2":{"qid":"2","title":"\u95ee\u98982222","answers":{"5":{"cid":"5","title":"A","cont":"\u7b54\u68482-1","iscorrect":"0","qid":"2"},"6":{"cid":"6","title":"B","cont":"\u7b54\u68482-2","iscorrect":"0","qid":"2"},"7":{"cid":"7","title":"A","cont":"aa","iscorrect":"0","qid":"2"},"8":{"cid":"8","title":"D","cont":"\u7b54\u68482-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>" ); } );

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,023评论 0 2
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 699评论 0 9
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,157评论 0 1
  • 本节任务 设置开关状态 设置不可用状态 修改背景 获取开关状态 本节内容比较简单,创建一个switch.vue 来...
    酷走天涯阅读 1,626评论 1 1