jQuery對(duì)象的鏈?zhǔn)讲僮饔梅ǚ治?/h1>
更新時(shí)間:2016年05月10日 09:35:56 作者:dingyan954
這篇文章主要介紹了jQuery對(duì)象的鏈?zhǔn)讲僮饔梅?結(jié)合實(shí)例形式分析了鏈?zhǔn)讲僮鞯脑怼⑻攸c(diǎn)及相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery對(duì)象的鏈?zhǔn)讲僮饔梅ā7窒斫o大家供大家參考,具體如下:
jQuery對(duì)象的鏈?zhǔn)讲僮?/strong>
首先來看一個(gè)例子:
復(fù)制代碼 代碼如下:$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good");
對(duì)一個(gè)jQuery對(duì)象先調(diào)用了css()函數(shù)修改樣式,然后使用attr()函數(shù)修改屬性,這種調(diào)用方式象鏈一樣,所以稱為"鏈?zhǔn)讲僮?。
鏈?zhǔn)讲僮髂軌蜃尨a變得簡(jiǎn)潔,因?yàn)橥梢栽谝粭l語(yǔ)句中實(shí)現(xiàn)以往多條語(yǔ)句才能完成的任務(wù)。比如如果不使用鏈?zhǔn)讲僮?,需要用兩條語(yǔ)句才能完成上面的任務(wù):
$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");
除了增加了代碼量,還調(diào)用了兩次選擇器,降低了速度。
在一個(gè)較短的鏈?zhǔn)讲僮髦?,往往語(yǔ)句比較清晰,可以分步驟地對(duì)jQuery對(duì)象實(shí)現(xiàn)各種操作。但是鏈?zhǔn)讲僮鞑粦?yīng)該太長(zhǎng),否則會(huì)造成語(yǔ)句難以理解,因?yàn)橐榭磈Query對(duì)象當(dāng)前的狀態(tài)并不是容易的事,尤其如果涉及jQuery對(duì)象中元素的增刪操作是更加難以判斷。
并不是所有的jQuery函數(shù)都可以使用鏈?zhǔn)讲僮鳌_@與鏈?zhǔn)讲僮鞯脑碛嘘P(guān),之所以可以實(shí)現(xiàn)鏈?zhǔn)讲僮魇且驗(yàn)槠渲械拿總€(gè)函數(shù)返回的都是jQuery對(duì)象本身。在jQuery類庫(kù)的內(nèi)部實(shí)現(xiàn)中,雖然很多的函數(shù)都返回jQuery對(duì)象本身,但都是通過調(diào)用內(nèi)部有限的幾個(gè)函數(shù)實(shí)現(xiàn)的,比如attr()函數(shù)設(shè)置屬性石,實(shí)際上最后調(diào)用了"jQuery.each(object,callback,args)"方法。注意此方法不是jQuery對(duì)象方法,jQuery對(duì)象方法也有一個(gè)each()函數(shù),為"jQuery.fn.each(callback,args)",此函數(shù)最后同樣調(diào)用jQuery.each函數(shù):
Each:function(callback,args){
ReturnjQuery.each(this,callback,args);
}
下面看一看jQuery.each函數(shù)的返回結(jié)果:
Each.function(object,callback,args){
Retumobject;
}
Object是jQuery.fn對(duì)象,即jQuery對(duì)象。最后返回的還是jQuery對(duì)象。
可以使用下面的原則判斷一個(gè)函數(shù)返回的時(shí)候是jQuery對(duì)象,即是否可以用于鏈?zhǔn)讲僮鳌?/p>
除了獲取某些數(shù)據(jù)的函數(shù),比如獲取屬性值"attr(name)",獲取集合大小"size()"這些函數(shù)明顯是返回?cái)?shù)據(jù)的。除了這些函數(shù)之外的jQuery函數(shù)都可以用于鏈?zhǔn)讲僮?,比如設(shè)置屬性"attr(name.value)"。
"$"變量的使用
"$"變量是"jQuery"變量的引用。"jQuery"變量是全局變量,jQuery對(duì)象是指"jQUery.fn",不要混淆。"jQuery"變量類似于靜態(tài)類,上面的方法都是靜態(tài)方法,可以在任何時(shí)刻調(diào)用。比如"jQuery.each"。"jQuery.fn"是實(shí)例方法,只能在jQuery對(duì)象上調(diào)用。比如"jQuery.fn.each()"方法只能通過"$('#id').each"這種形式調(diào)用。
前面提到,可以使用"$"代替"jQuery",因?yàn)樵趈Query的內(nèi)部有如下實(shí)現(xiàn):
jQuery=window.jQuery=window.$
所以"$"變量和"jQuery"變量實(shí)際上是Window對(duì)象的屬性,也就是全局變量??梢栽陧?yè)面上得任何地方調(diào)用。
更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》
希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- jQuery如何將選中的對(duì)象轉(zhuǎn)化為原始的DOM對(duì)象
- jQuery獲取單擊節(jié)點(diǎn)對(duì)象的方法
- jquery遍歷json對(duì)象集合詳解
- 解析Jquery中如何把一段html代碼動(dòng)態(tài)寫入到DIV中(實(shí)例說明)
- jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- phpQuery讓php處理html代碼像jQuery一樣方便
- jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
- JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
- jquery模擬LCD 時(shí)鐘的html文件源代碼
- Jquery在指定DIV加載HTML示例代碼
- jquery隨意添加移除html的實(shí)現(xiàn)代碼
- jQuery查看選中對(duì)象HTML代碼的方法
相關(guān)文章
-
jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)select下拉框效果的相關(guān)操作技巧,需要的朋友可以參考下 2019-05-05
-
深入研究jQuery圖片懶加載 lazyload.js使用方法
這篇文章主要介紹了jQuery圖片懶加載 lazyload.js使用方法,通過設(shè)置臨界點(diǎn),占位符,設(shè)置事件來觸發(fā)加載等等來講解lazyload.js的使用,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。 2017-08-08
-
了解jQuery技巧來提高你的代碼(個(gè)人覺得那個(gè)jquery的手冊(cè)很不錯(cuò))
這個(gè)jQuery選擇器實(shí)驗(yàn)室非??幔茉诰€免費(fèi)使用,當(dāng)然你也能下來到本地離線使用。這個(gè)測(cè)試頁(yè)面包含復(fù)雜的HTML組合字段,然后你能嘗試預(yù)定義使用各種jQuery選擇器。如果這還不夠你也可以自定義選擇器 2012-02-02
-
一個(gè)簡(jiǎn)單的實(shí)現(xiàn)下拉框多選的插件可移植性比較好
一個(gè)簡(jiǎn)單的實(shí)現(xiàn)下拉框多選的插件,可移植性也比較好,需要的朋友可以參考下 2014-05-05
-
jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果,上傳文件時(shí)顯示上傳進(jìn)度條,以百分比的形式顯示上傳進(jìn)度,感興趣的小伙伴們可以參考一下 2015-11-11
-
AspNet中使用JQuery上傳插件Uploadify詳解
Uploadify是JQuery的一個(gè)上傳插件,實(shí)現(xiàn)的效果非常不錯(cuò),帶進(jìn)度顯示。不過官方提供的實(shí)例時(shí)php版本的,本文將詳細(xì)介紹Uploadify在Aspnet中的使用
2015-05-05
-
jQuery滾動(dòng)條美化插件nicescroll簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery滾動(dòng)條美化插件nicescroll簡(jiǎn)單用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery滾動(dòng)條美化插件jquery.nicescroll.js的引入與使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下 2018-04-04
-
jQuery數(shù)據(jù)緩存功能的實(shí)現(xiàn)思路及簡(jiǎn)單模擬
jQuery緩存系統(tǒng)不僅運(yùn)用于DOM元素,動(dòng)畫、事件等都有用到這個(gè)緩存系統(tǒng) 2013-05-05
-
基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)類似跑馬燈的效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)效果類似跑馬燈,需要的朋友可以參考下 2014-06-06
-
基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
倒計(jì)時(shí)效果在我們的日常生活中經(jīng)常會(huì)用到,比如說高考倒計(jì)時(shí)、元旦放假倒計(jì)時(shí)、春節(jié)放假倒計(jì)時(shí)等等,下面通過本篇文章給大家分享基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼,對(duì)jquery倒計(jì)時(shí)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧 2015-12-12
最新評(píng)論
本文實(shí)例講述了jQuery對(duì)象的鏈?zhǔn)讲僮饔梅ā7窒斫o大家供大家參考,具體如下:
jQuery對(duì)象的鏈?zhǔn)讲僮?/strong>
首先來看一個(gè)例子:
對(duì)一個(gè)jQuery對(duì)象先調(diào)用了css()函數(shù)修改樣式,然后使用attr()函數(shù)修改屬性,這種調(diào)用方式象鏈一樣,所以稱為"鏈?zhǔn)讲僮?。
鏈?zhǔn)讲僮髂軌蜃尨a變得簡(jiǎn)潔,因?yàn)橥梢栽谝粭l語(yǔ)句中實(shí)現(xiàn)以往多條語(yǔ)句才能完成的任務(wù)。比如如果不使用鏈?zhǔn)讲僮?,需要用兩條語(yǔ)句才能完成上面的任務(wù):
$("#myphoto").css("border","solid 2px#FF0000"); $("#myphoto").arrt("alt","good");
除了增加了代碼量,還調(diào)用了兩次選擇器,降低了速度。
在一個(gè)較短的鏈?zhǔn)讲僮髦?,往往語(yǔ)句比較清晰,可以分步驟地對(duì)jQuery對(duì)象實(shí)現(xiàn)各種操作。但是鏈?zhǔn)讲僮鞑粦?yīng)該太長(zhǎng),否則會(huì)造成語(yǔ)句難以理解,因?yàn)橐榭磈Query對(duì)象當(dāng)前的狀態(tài)并不是容易的事,尤其如果涉及jQuery對(duì)象中元素的增刪操作是更加難以判斷。
并不是所有的jQuery函數(shù)都可以使用鏈?zhǔn)讲僮鳌_@與鏈?zhǔn)讲僮鞯脑碛嘘P(guān),之所以可以實(shí)現(xiàn)鏈?zhǔn)讲僮魇且驗(yàn)槠渲械拿總€(gè)函數(shù)返回的都是jQuery對(duì)象本身。在jQuery類庫(kù)的內(nèi)部實(shí)現(xiàn)中,雖然很多的函數(shù)都返回jQuery對(duì)象本身,但都是通過調(diào)用內(nèi)部有限的幾個(gè)函數(shù)實(shí)現(xiàn)的,比如attr()函數(shù)設(shè)置屬性石,實(shí)際上最后調(diào)用了"jQuery.each(object,callback,args)"方法。注意此方法不是jQuery對(duì)象方法,jQuery對(duì)象方法也有一個(gè)each()函數(shù),為"jQuery.fn.each(callback,args)",此函數(shù)最后同樣調(diào)用jQuery.each函數(shù):
Each:function(callback,args){ ReturnjQuery.each(this,callback,args); }
下面看一看jQuery.each函數(shù)的返回結(jié)果:
Each.function(object,callback,args){ Retumobject; }
Object是jQuery.fn對(duì)象,即jQuery對(duì)象。最后返回的還是jQuery對(duì)象。
可以使用下面的原則判斷一個(gè)函數(shù)返回的時(shí)候是jQuery對(duì)象,即是否可以用于鏈?zhǔn)讲僮鳌?/p>
除了獲取某些數(shù)據(jù)的函數(shù),比如獲取屬性值"attr(name)",獲取集合大小"size()"這些函數(shù)明顯是返回?cái)?shù)據(jù)的。除了這些函數(shù)之外的jQuery函數(shù)都可以用于鏈?zhǔn)讲僮?,比如設(shè)置屬性"attr(name.value)"。
"$"變量的使用
"$"變量是"jQuery"變量的引用。"jQuery"變量是全局變量,jQuery對(duì)象是指"jQUery.fn",不要混淆。"jQuery"變量類似于靜態(tài)類,上面的方法都是靜態(tài)方法,可以在任何時(shí)刻調(diào)用。比如"jQuery.each"。"jQuery.fn"是實(shí)例方法,只能在jQuery對(duì)象上調(diào)用。比如"jQuery.fn.each()"方法只能通過"$('#id').each"這種形式調(diào)用。
前面提到,可以使用"$"代替"jQuery",因?yàn)樵趈Query的內(nèi)部有如下實(shí)現(xiàn):
jQuery=window.jQuery=window.$
所以"$"變量和"jQuery"變量實(shí)際上是Window對(duì)象的屬性,也就是全局變量??梢栽陧?yè)面上得任何地方調(diào)用。
更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》
希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。
- jQuery如何將選中的對(duì)象轉(zhuǎn)化為原始的DOM對(duì)象
- jQuery獲取單擊節(jié)點(diǎn)對(duì)象的方法
- jquery遍歷json對(duì)象集合詳解
- 解析Jquery中如何把一段html代碼動(dòng)態(tài)寫入到DIV中(實(shí)例說明)
- jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- phpQuery讓php處理html代碼像jQuery一樣方便
- jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
- JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
- jquery模擬LCD 時(shí)鐘的html文件源代碼
- Jquery在指定DIV加載HTML示例代碼
- jquery隨意添加移除html的實(shí)現(xiàn)代碼
- jQuery查看選中對(duì)象HTML代碼的方法
相關(guān)文章
jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)select下拉框效果的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05深入研究jQuery圖片懶加載 lazyload.js使用方法
這篇文章主要介紹了jQuery圖片懶加載 lazyload.js使用方法,通過設(shè)置臨界點(diǎn),占位符,設(shè)置事件來觸發(fā)加載等等來講解lazyload.js的使用,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08了解jQuery技巧來提高你的代碼(個(gè)人覺得那個(gè)jquery的手冊(cè)很不錯(cuò))
這個(gè)jQuery選擇器實(shí)驗(yàn)室非??幔茉诰€免費(fèi)使用,當(dāng)然你也能下來到本地離線使用。這個(gè)測(cè)試頁(yè)面包含復(fù)雜的HTML組合字段,然后你能嘗試預(yù)定義使用各種jQuery選擇器。如果這還不夠你也可以自定義選擇器2012-02-02一個(gè)簡(jiǎn)單的實(shí)現(xiàn)下拉框多選的插件可移植性比較好
一個(gè)簡(jiǎn)單的實(shí)現(xiàn)下拉框多選的插件,可移植性也比較好,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果,上傳文件時(shí)顯示上傳進(jìn)度條,以百分比的形式顯示上傳進(jìn)度,感興趣的小伙伴們可以參考一下2015-11-11AspNet中使用JQuery上傳插件Uploadify詳解
Uploadify是JQuery的一個(gè)上傳插件,實(shí)現(xiàn)的效果非常不錯(cuò),帶進(jìn)度顯示。不過官方提供的實(shí)例時(shí)php版本的,本文將詳細(xì)介紹Uploadify在Aspnet中的使用2015-05-05jQuery滾動(dòng)條美化插件nicescroll簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery滾動(dòng)條美化插件nicescroll簡(jiǎn)單用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery滾動(dòng)條美化插件jquery.nicescroll.js的引入與使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-04-04jQuery數(shù)據(jù)緩存功能的實(shí)現(xiàn)思路及簡(jiǎn)單模擬
jQuery緩存系統(tǒng)不僅運(yùn)用于DOM元素,動(dòng)畫、事件等都有用到這個(gè)緩存系統(tǒng)2013-05-05基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)類似跑馬燈的效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)效果類似跑馬燈,需要的朋友可以參考下2014-06-06基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
倒計(jì)時(shí)效果在我們的日常生活中經(jīng)常會(huì)用到,比如說高考倒計(jì)時(shí)、元旦放假倒計(jì)時(shí)、春節(jié)放假倒計(jì)時(shí)等等,下面通過本篇文章給大家分享基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼,對(duì)jquery倒計(jì)時(shí)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12