jQuery遍歴小結
1832 ワード
1.DOMオブジェクトの遍歴
構文:$(selector).each(function(index,element));
ここでselectorはjQueryセレクタであり、functionには2つのパラメータがあり、indexは遍歴オブジェクトの下付き文字を指し、elementは遍歴の値を指す.これは配列要素と少し似ています.array[i]indexはiの値であり、elementはarray[i]です.
用途:作業中にクエリー処理のすべての要素を特別なスタイルで処理する必要がある場合があります.
htmlコード
jQueryコード:
遍歴関数では、this値はDOMオブジェクトであり、これは$(this)でjQueryオブジェクトに変換できることに注意してください.ループ中にreturnによってループを制御できます.return fasleはループから飛び出し、return trueが今回のループから飛び出した場合.
2、オブジェクト、配列の遍歴
例のjQueryオブジェクトの$()とは異なる.each()メソッド.このメソッドは、任意のオブジェクトをインスタンス化するために使用できます.コールバック関数には、2つのパラメータがあります.1つ目はオブジェクトのメンバーまたは配列のインデックスで、2つ目は対応する変数または内容です.eachループを終了してコールバック関数をfalseに戻す必要がある場合、他の戻り値は無視されます.
オブジェクトの遍歴
遍歴配列
以上、この2つの異なるタイプの遍歴について簡単に説明したが、具体的な使用には実際の過程で熟知する必要がある.
構文:$(selector).each(function(index,element));
ここでselectorはjQueryセレクタであり、functionには2つのパラメータがあり、indexは遍歴オブジェクトの下付き文字を指し、elementは遍歴の値を指す.これは配列要素と少し似ています.array[i]indexはiの値であり、elementはarray[i]です.
用途:作業中にクエリー処理のすべての要素を特別なスタイルで処理する必要がある場合があります.
htmlコード
<button>Change colors</button>
<span></span>
<div name=wzw></div>
<div id="stop">Stop here</div>
<div ></div>
<div></div>
<div></div>
jQueryコード:
$("button").click(function () {
$("div").each(function (index, domEle) {
//
$(domEle).css("backgroundColor", "yellow");
if($(this).attr("name")=='wzw'){
return true;
}
if ($(this).attr("id")=='stop') {
$("span").text("Stopped at div index #" + index);
return false; // break;
}
});
});
遍歴関数では、this値はDOMオブジェクトであり、これは$(this)でjQueryオブジェクトに変換できることに注意してください.ループ中にreturnによってループを制御できます.return fasleはループから飛び出し、return trueが今回のループから飛び出した場合.
2、オブジェクト、配列の遍歴
例のjQueryオブジェクトの$()とは異なる.each()メソッド.このメソッドは、任意のオブジェクトをインスタンス化するために使用できます.コールバック関数には、2つのパラメータがあります.1つ目はオブジェクトのメンバーまたは配列のインデックスで、2つ目は対応する変数または内容です.eachループを終了してコールバック関数をfalseに戻す必要がある場合、他の戻り値は無視されます.
オブジェクトの遍歴
$.each( [{"name":" ","password":"123456"}];, function(i, n){
alert(n.name);//
alert(n.password);//123456
});
遍歴配列
$.each( ["name"," ","password","123456"}];, function(i, n){
alert(n);//
if(n=='123456'){
return false;
}
});
以上、この2つの異なるタイプの遍歴について簡単に説明したが、具体的な使用には実際の過程で熟知する必要がある.