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版本整合了之前的三種方式的新事件綁定機制
2.live,或者 delegate 是事件代理模式,在動態生成的將來元素中用bind 需要恰當的時機,而用代理則避免這個模式。還有代理會更高效。
bind()只能對已有的元素綁定事件,而.live()能對未來插入的元素綁定事件。live使用了冒泡方式來判斷當前觸發事件的對象,用的場景會少很多,相比bind有性能問題!
同樣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,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":"\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>"
);
}
);