jquery 學習之一 對象訪問
更新時間：2010年11月23日 16:51:50 作者：
jquery 學習之一 對象訪問整理，學習jquery的朋友可以參考下。
each（）
each(callback)
以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)。
意味著，每次執(zhí)行傳遞進來的函數(shù)時，函數(shù)中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。
而且，在每次執(zhí)行函數(shù)時，都會給函數(shù)傳遞一個表示作為執(zhí)行環(huán)境的元素在匹配的元素集合中所處位置的數(shù)字值作為參數(shù)（從零開始的整形）。
返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。返回 'true' 跳至下一個循環(huán)(就像在普通的循環(huán)中使用'continue')。Execute a function within the context of every matched element.
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.
Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).
Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).返回值
jQuery
參數(shù)
callback (Function) : 對于每個匹配的元素所要執(zhí)行的函數(shù)
示例
迭代兩個圖像，并設置它們的 src 屬性。注意:此處 this 指代的是 DOM 對象而非 jQuery 對象。
HTML 代碼:
<img/><img/>
jQuery 代碼:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
this.src = "test" + i + ".jpg";
});
結(jié)果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
如果你想得到 jQuery對象，可以使用 $(this) 函數(shù)。
jQuery 代碼:
$("img").each(function(){
$(this).toggleClass("example");
});
$(this).toggleClass("example");
});
你可以使用 'return' 來提前跳出 each() 循環(huán)。
HTML 代碼:
<button>Change colors</button><span></span> <div></div> <div></div><div></div> <div></div><div id="stop">Stop here</div> <div></div><div></div><div></div>
jQuery 代碼:
$("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } });});--------------------------------------------------------------------------------------------------------------------------------size()
jQuery 對象中元素的個數(shù)。
這個函數(shù)的返回值與 jQuery 對象的'length' 屬性一致。
The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.
返回值
Number
示例
計算文檔中所有圖片數(shù)量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").size();
結(jié)果:
2
-------------------------------------------------------------------------------------------------------------------------
length
jQuery 對象中元素的個數(shù)。
當前匹配的元素個數(shù)。 size 將返回相同的值。
The number of elements in the jQuery object.
The number of elements currently matched. The size function will return the same value.
返回值
Number
示例
計算文檔中所有圖片數(shù)量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").length;
結(jié)果:
2
---------------------------------------------------------------------------------------------------------------------------------------
get()
取得所有匹配的 DOM 元素集合。
這是取得所有匹配元素的一種向后兼容的方式（不同于jQuery對象，而實際上是元素數(shù)組）。
如果你想要直接操作 DOM 對象而不是 jQuery 對象，這個函數(shù)非常有用。
Access all matched DOM elements.
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.
返回值
Array<Element>
示例
選擇文檔中所有圖像作為元素數(shù)組，并用數(shù)組內(nèi)建的 reverse 方法將數(shù)組反向。
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").get().reverse();
結(jié)果:
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
---------------------------------------------------------------------------------------------------------------------------------------
get(index)
取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。
這能夠讓你選擇一個實際的DOM 元素并且對他直接操作，而不是通過 jQuery 函數(shù)。$(this).get(0)與$(this)[0]等價。
Access a single matched DOM element at a specified index in the matched set.
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].
返回值
Element
參數(shù)
index (Number) :取得第 index 個位置上的元素
示例
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").get(0);
結(jié)果:
[ <img src="test1.jpg"/> ]
---------------------------------------------------------------------------------------------------------------------------------------
index(subject)
搜索與參數(shù)表示的對象匹配的元素，并返回相應元素的索引值值。
如果找到了匹配的元素，從0開始返回；如果沒有找到匹配的元素，返回-1。
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.
返回值
Number
參數(shù)
subject (Element) : 要搜索的對象
示例
返回ID值為foobar的元素的索引值值。
HTML 代碼:
<div id="foobar"><b></b><span id="foo"></span></div>
jQuery 代碼:
$("*").index($('#foobar')[0])
結(jié)果:
5
相關文章
本文是對JQGrid的用法--列編輯,添加行,刪除行。進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細介紹了jquery簡易手風琴插件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
將要高亮顯示的文字加上<span>段落標記， class=”mask”的div 做為遮罩層，使此遮罩層位于文字內(nèi)容之上（z-index屬性，使用Jquery給段落動態(tài)添加樣式類。2009-12-12
這篇文章主要介紹了JQuery each()嵌套使用，非常適合初學者,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了jQuery表單設置值的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了jQuery中可見性過濾器簡單用法,結(jié)合實例形式簡單分析了jQuery中可見性過濾器的原理及相關使用技巧,需要的朋友可以參考下2018-03-03
想在頁面加載完成后，有幾個地方顯示當前時間，所以想通過jquery給多個span賦值,需要的朋友可以參考下2014-05-05
JQuery擴展插件Validate 2通過參數(shù)設置驗證規(guī)則
在前面示例中使用的的方法簡單方便，但沒有完全將js與頁面結(jié)構(gòu)完全分離，也就是說js依賴了class,下面通過validate()方法的參數(shù)設置驗證規(guī)則將js與頁面結(jié)構(gòu)完全分離2011-09-09
在下面的集合中，你會發(fā)現(xiàn)很多便利的 jQuery 導航插件和有用的教程，幫助你實現(xiàn)充滿吸引力的網(wǎng)站導航，讓你網(wǎng)站更有組織性和交互性2012-09-09
這篇文章主要介紹了HTML頁面如何彈出居中可拖拽的自定義窗口層,需要的朋友可以參考下2014-05-05