jquery 學(xué)習(xí)之一 對(duì)象訪問(wèn)
更新時(shí)間：2010年11月23日 16:51:50 作者：
jquery 學(xué)習(xí)之一 對(duì)象訪問(wèn)整理，學(xué)習(xí)jquery的朋友可以參考下。
each（）
each(callback)
以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)。
意味著，每次執(zhí)行傳遞進(jìn)來(lái)的函數(shù)時(shí)，函數(shù)中的this關(guān)鍵字都指向一個(gè)不同的DOM元素（每次都是一個(gè)不同的匹配元素）。
而且，在每次執(zhí)行函數(shù)時(shí)，都會(huì)給函數(shù)傳遞一個(gè)表示作為執(zhí)行環(huán)境的元素在匹配的元素集合中所處位置的數(shù)字值作為參數(shù)（從零開始的整形）。
返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。返回 'true' 跳至下一個(gè)循環(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) : 對(duì)于每個(gè)匹配的元素所要執(zhí)行的函數(shù)
示例
迭代兩個(gè)圖像，并設(shè)置它們的 src 屬性。注意:此處 this 指代的是 DOM 對(duì)象而非 jQuery 對(duì)象。
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對(duì)象，可以使用 $(this) 函數(shù)。
jQuery 代碼:
$("img").each(function(){
$(this).toggleClass("example");
});
$(this).toggleClass("example");
});
你可以使用 'return' 來(lái)提前跳出 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 對(duì)象中元素的個(gè)數(shù)。
這個(gè)函數(shù)的返回值與 jQuery 對(duì)象的'length' 屬性一致。
The number of elements in the jQuery object.
This returns the same number as the 'length' property of the jQuery object.
返回值
Number
示例
計(jì)算文檔中所有圖片數(shù)量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").size();
結(jié)果:
2
-------------------------------------------------------------------------------------------------------------------------
length
jQuery 對(duì)象中元素的個(gè)數(shù)。
當(dāng)前匹配的元素個(gè)數(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
示例
計(jì)算文檔中所有圖片數(shù)量
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").length;
結(jié)果:
2
---------------------------------------------------------------------------------------------------------------------------------------
get()
取得所有匹配的 DOM 元素集合。
這是取得所有匹配元素的一種向后兼容的方式（不同于jQuery對(duì)象，而實(shí)際上是元素?cái)?shù)組）。
如果你想要直接操作 DOM 對(duì)象而不是 jQuery 對(duì)象，這個(gè)函數(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>
示例
選擇文檔中所有圖像作為元素?cái)?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)
取得其中一個(gè)匹配的元素。 num表示取得第幾個(gè)匹配的元素。
這能夠讓你選擇一個(gè)實(shí)際的DOM 元素并且對(duì)他直接操作，而不是通過(guò) jQuery 函數(shù)。$(this).get(0)與$(this)[0]等價(jià)。
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 個(gè)位置上的元素
示例
HTML 代碼:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代碼:
$("img").get(0);
結(jié)果:
[ <img src="test1.jpg"/> ]
---------------------------------------------------------------------------------------------------------------------------------------
index(subject)
搜索與參數(shù)表示的對(duì)象匹配的元素，并返回相應(yīng)元素的索引值值。
如果找到了匹配的元素，從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) : 要搜索的對(duì)象
示例
返回ID值為foobar的元素的索引值值。
HTML 代碼:
<div id="foobar"><b></b><span id="foo"></span></div>
jQuery 代碼:
$("*").index($('#foobar')[0])
結(jié)果:
5
您可能感興趣的文章:
- jquery下利用jsonp跨域訪問(wèn)實(shí)現(xiàn)方法
- 使用Jquery Aajx訪問(wèn)WCF服務(wù)(GET、POST、PUT、DELETE)
- jQuery $.get 的妙用 訪問(wèn)本地文本文件
- jquery入門—訪問(wèn)DOM對(duì)象方法
- 用jQuery與JSONP輕松解決跨域訪問(wèn)的問(wèn)題
- JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法
- JS/Jquery判斷對(duì)象為空的方法
- javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法
- jquery對(duì)象訪問(wèn)是什么及使用方法介紹
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性的相關(guān)資料,需要的朋友可以參考下2015-01-01
jquery trigger函數(shù)執(zhí)行兩次的解決方法
這篇文章主要介紹了jquery trigger函數(shù)執(zhí)行兩次的解決方法,詳細(xì)分析了trigger函數(shù)執(zhí)行兩次的原因與響應(yīng)的解決技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-02-02
基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示，能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
如何使用jquery控制CSS樣式,并且取消Css樣式(如背景色,有實(shí)例)
使用jquery控制CSS樣式,并且取消Css樣式的一個(gè)簡(jiǎn)單小實(shí)例，需要的朋友可以參考下2013-07-07
這篇文章主要介紹了jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效，很全面的圖片輪播，特別適合用與產(chǎn)片展示，感興趣的小伙伴們可以參考一下2015-12-12
原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效
本文主要分享了原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效的實(shí)例代碼?？芍苯訌?fù)制保存HTML運(yùn)行查看效果。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果,涉及jquery操作頁(yè)面屬性的動(dòng)態(tài)添加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
在用jquery加ajax寫的時(shí)候，發(fā)現(xiàn)如果傳進(jìn)去的數(shù)據(jù)包含&則無(wú)法獲取數(shù)據(jù)而+號(hào)的話就會(huì)被判定為空，解決辦法就是使用encodeURIComponent()函數(shù)對(duì)要發(fā)送的數(shù)據(jù)進(jìn)行編碼,需要的朋友可以參考下2017-01-01
jQuery刪除當(dāng)前節(jié)點(diǎn)元素
本文給大家分享一段代碼給大家介紹jquery刪除當(dāng)前節(jié)點(diǎn)元素的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下吧2016-12-12
jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕
這篇文章主要為大家詳細(xì)介紹了jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03