快捷導(dǎo)航

jquery中this的使用說明

更新時(shí)間：2010年09月06日 11:29:19 作者：

在使用jquery操作js時(shí)，經(jīng)常整不明白this與$(this)。抽空仔細(xì)測(cè)試了一把，記錄下來以供在忘記的時(shí)候拉出來參考參考！

原來js中的this這么好用

$(document).ready(function(){ 
　　var DragElement=null; 
　　$("#zz").mousedown(function(){ 
　　DragElement=this;//這時(shí)this指的就是$("#zz")對(duì)象 
　　$(document).mousemove(function(){ 
　　如果直接$(this).css("left")//由于是在mousemove內(nèi)，這樣this對(duì)象就不是$("#zz")， 
　　這時(shí)可以用$(DragElement).css("left")//這樣取的就是$("#zz") 
}) 
}) 
})

$(this)生成的是什么

$()生成的是什么呢？實(shí)際上$()=jquery()，那么也就是說返回的是一個(gè)jquery的對(duì)象。
題外話：通常我們?yōu)榱撕?jiǎn)便直接使用$(),實(shí)際上,該函數(shù)省略了一個(gè)參數(shù)context,即$(selector)=$(selector,document).如果指定context，可以指定context為一個(gè)dom元素集或者jquery對(duì)象。

那么依照，$()返回的是jquery對(duì)象這一結(jié)論，我們可以得出$(this)得到的是一個(gè)jquery對(duì)象.我們可以使用萬能的alert()方法打印出一個(gè)對(duì)象：
alert($('#btn'));
顯示的結(jié)果：

該圖紅色框勾選出來的是一個(gè)object，不用考慮，該object自然是jquery的對(duì)象咯。也即是說我們用通過$('#btn')來調(diào)用jquery的方法和屬性等。

this代表什么？

this，編程的人都知道this表示上下文所處的這個(gè)對(duì)象，這個(gè)自然是不錯(cuò)的，可是這個(gè)對(duì)象到底是個(gè)什么對(duì)象呢？加入js里面也有g(shù)etType的話返回的值會(huì)是什么呢？其實(shí)js里面不需要使用getType,因?yàn)槲覀冇腥f能的alert.請(qǐng)看看下面的代碼：

復(fù)制代碼代碼如下:

 
$('#btn').bind("click",function(){ 

alert(this); 
alert($(this)); 
}); 

根據(jù)我們的經(jīng)驗(yàn)（因?yàn)?()生成的是jquery的對(duì)象嘛），this自然是一個(gè)jquery的對(duì)象咯?？墒俏覀兛纯捶祷氐慕Y(jié)果：

返回的是什么？【object HTMLInputElement】——偉大的html對(duì)象，嘿嘿。所以我們通常在直接使用this.val()或者直接通過this來調(diào)用jquery所特有的方法或?qū)傩缘臅r(shí)候會(huì)報(bào)錯(cuò)誤：為什么呢？明知故問！html對(duì)象當(dāng)然“不包含屬性或方法”了。那么為什么在一個(gè)jquery對(duì)象的上下文中調(diào)用this返回的是一個(gè)html對(duì)象而不是jquery對(duì)象呢？翻遍jquery的api文檔，貌似jquery中并未對(duì)this這一關(guān)鍵字進(jìn)行過特殊“處理”，也就是說這里this是js中的，而不是jquery重新定義了的。so...當(dāng)然這僅僅是我自己的想法，如果有對(duì)此更了解的朋友可以留言更正。而我們?cè)倏匆幌乱陨洗a中alert($(this));的返回，自然是jquery的對(duì)象了，在此調(diào)用jquery特有的方法和屬性，完全沒有問題。

結(jié)論：

this，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象，可以調(diào)用html對(duì)象所擁有的屬性，方法
$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jquery的方法和屬性值。

您可能感興趣的文章: