jQuery對(duì)象的鏈?zhǔn)讲僮饔梅ǚ治?/h1>
更新時(shí)間：2016年05月10日 09:35:56 作者：dingyan954
這篇文章主要介紹了jQuery對(duì)象的鏈?zhǔn)讲僮饔梅?結(jié)合實(shí)例形式分析了鏈?zhǔn)讲僮鞯脑?、特點(diǎn)及相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery對(duì)象的鏈?zhǔn)讲僮饔梅?。分享給大家供大家參考，具體如下：
jQuery對(duì)象的鏈?zhǔn)讲僮?/strong>
首先來(lái)看一個(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ì)象本身，但都是通過(guò)調(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)讲僮鳎热缭O(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()"方法只能通過(guò)"$('#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àn)事件用法與技巧總結(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í)例說(shuō)明)
- 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實(shí)用密碼強(qiáng)度檢測(cè)
本篇文章主要介紹了jQuery實(shí)用密碼強(qiáng)度檢測(cè)，這是一個(gè)非常常見(jiàn)的功能，可以驗(yàn)證密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。
2017-03-03
-
在一些網(wǎng)站上，我們經(jīng)常見(jiàn)到返回頂部的效果，本文給大家介紹基于jquery如何實(shí)現(xiàn)返回頂部效果，非常不錯(cuò)，感興趣的朋友可以參考下 2016-07-07
-
基于jQuery的可用于選項(xiàng)卡及幻燈的切換插件
最近公司項(xiàng)目頁(yè)面中用到選項(xiàng)卡與幻燈比較多，特地寫了個(gè)集選項(xiàng)卡、幻燈片與播放控制于一體的插件，同頁(yè)面可多次使用。 2011-03-03
-
為了避免和美工沖突，對(duì)特定操作對(duì)象加上id標(biāo)識(shí)，美工不大改也沒(méi)什么問(wèn)題。 2011-01-01
-
下面小編就為大家?guī)?lái)一篇json定義及jquery操作json的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 2016-09-09
-
jQuery選擇頭像并實(shí)時(shí)顯示的代碼，以前腳本之家用js實(shí)現(xiàn)了，這里使用jquery實(shí)現(xiàn)的。 2010-06-06
-
這篇文章主要為大家詳細(xì)介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下 2016-05-05
-
JQuery是一個(gè)非常優(yōu)秀的框架，在特定場(chǎng)合下使用JQuery提交數(shù)據(jù)，相當(dāng)?shù)姆奖憧旖荨?但是，在處理一個(gè)GB2312編碼的網(wǎng)站AJAX提交時(shí)，中文數(shù)據(jù)卻成了亂碼。
2010-07-07
-
jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下 2016-11-11
-
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下 2019-12-12
最新評(píng)論
本文實(shí)例講述了jQuery對(duì)象的鏈?zhǔn)讲僮饔梅?。分享給大家供大家參考，具體如下：
jQuery對(duì)象的鏈?zhǔn)讲僮?/strong>
首先來(lái)看一個(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ì)象本身，但都是通過(guò)調(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)讲僮鳎热缭O(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()"方法只能通過(guò)"$('#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àn)事件用法與技巧總結(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í)例說(shuō)明)
- 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實(shí)用密碼強(qiáng)度檢測(cè)
本篇文章主要介紹了jQuery實(shí)用密碼強(qiáng)度檢測(cè)，這是一個(gè)非常常見(jiàn)的功能，可以驗(yàn)證密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。2017-03-03 - 在一些網(wǎng)站上，我們經(jīng)常見(jiàn)到返回頂部的效果，本文給大家介紹基于jquery如何實(shí)現(xiàn)返回頂部效果，非常不錯(cuò)，感興趣的朋友可以參考下2016-07-07
-
基于jQuery的可用于選項(xiàng)卡及幻燈的切換插件
最近公司項(xiàng)目頁(yè)面中用到選項(xiàng)卡與幻燈比較多，特地寫了個(gè)集選項(xiàng)卡、幻燈片與播放控制于一體的插件，同頁(yè)面可多次使用。2011-03-03 - 為了避免和美工沖突，對(duì)特定操作對(duì)象加上id標(biāo)識(shí)，美工不大改也沒(méi)什么問(wèn)題。2011-01-01
- 下面小編就為大家?guī)?lái)一篇json定義及jquery操作json的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
- jQuery選擇頭像并實(shí)時(shí)顯示的代碼，以前腳本之家用js實(shí)現(xiàn)了，這里使用jquery實(shí)現(xiàn)的。2010-06-06
- 這篇文章主要為大家詳細(xì)介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05
- JQuery是一個(gè)非常優(yōu)秀的框架，在特定場(chǎng)合下使用JQuery提交數(shù)據(jù)，相當(dāng)?shù)姆奖憧旖荨?但是，在處理一個(gè)GB2312編碼的網(wǎng)站AJAX提交時(shí)，中文數(shù)據(jù)卻成了亂碼。2010-07-07
-
jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11 - 這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12