jquery中this的使用說明
更新時間:2010年09月06日 11:29:19 作者:
在使用jquery操作js時,經(jīng)常整不明白this與$(this)。抽空仔細測試了一把,記錄下來以供在忘記的時候拉出來參考參考!
原來js中的this這么好用
復制代碼 代碼如下:
$(document).ready(function(){
var DragElement=null;
$("#zz").mousedown(function(){
DragElement=this;//這時this指的就是$("#zz")對象
$(document).mousemove(function(){
如果直接$(this).css("left")//由于是在mousemove內(nèi),這樣this對象就不是$("#zz"),
這時可以用$(DragElement).css("left")//這樣取的就是$("#zz")
})
})
})
$(this)生成的是什么
$()生成的是什么呢?實際上$()=jquery(),那么也就是說返回的是一個jquery的對象。
題外話:通常我們?yōu)榱撕啽阒苯邮褂?(),實際上,該函數(shù)省略了一個參數(shù)context,即$(selector)=$(selector,document).如果指定context,可以指定context為一個dom元素集或者jquery對象。
那么依照,$()返回的是jquery對象這一結論,我們可以得出$(this)得到的是一個jquery對象.我們可以使用萬能的alert()方法打印出一個對象:
alert($('#btn'));
顯示的結果:

該圖紅色框勾選出來的是一個object,不用考慮,該object自然是jquery的對象咯。也即是說我們用通過$('#btn')來調(diào)用jquery的方法和屬性等。
this代表什么?
this,編程的人都知道this表示上下文所處的這個對象,這個自然是不錯的,可是這個對象到底是個什么對象呢?加入js里面也有getType的話返回的值會是什么呢?其實js里面不需要使用getType,因為我們有萬能的alert.請看看下面的代碼:
復制代碼 代碼如下:
$('#btn').bind("click",function(){
alert(this);
alert($(this));
});
根據(jù)我們的經(jīng)驗(因為$()生成的是jquery的對象嘛),this自然是一個jquery的對象咯??墒俏覀兛纯捶祷氐慕Y果:

返回的是什么?【object HTMLInputElement】——偉大的html對象,嘿嘿。所以我們通常在直接使用this.val()或者直接通過this來調(diào)用jquery所特有的方法或?qū)傩缘臅r候會報錯誤: 為什么呢?明知故問!html對象當然“不包含屬性或方法”了。那么為什么在一個jquery對象的上下文中調(diào)用this返回的是一個html對象而不是jquery對象 呢?翻遍jquery的api文檔,貌似jquery中并未對this這一關鍵字進行過特殊“處理”,也就是說這里this是js中的,而不是jquery重新定義了的。so...當然這僅僅是我自己的想法,如果有對此更了解的朋友可以留言更正。而我們再看一下以上代碼中alert($(this));的返回,自然是jquery的對象了,在此調(diào)用jquery特有的方法和屬性,完全沒有問題。
結論:
this,表示當前的上下文對象是一個html對象,可以調(diào)用html對象所擁有的屬性,方法
$(this),代表的上下文對象是一個jquery的上下文對象,可以調(diào)用jquery的方法和屬性值。
您可能感興趣的文章:
- jQuery AJAX回調(diào)函數(shù)this指向問題
- jQuery 選擇方法及$(this)用法實例分析
- 淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法
- jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
- 實例講解JQuery中this和$(this)區(qū)別
- 詳談jQuery中的this和$(this)
- 通過$(this)使用jQuery包裝后的方法或?qū)傩?/a>
- jquery $(this).attr $(this).val方法使用介紹
- JQuery this 和 $(this) 的區(qū)別
- JQuery中this的指向詳解
相關文章
jQuery學習筆記之jQuery構建函數(shù)的7種方法
jQuery把所有的操作都包裝在一個jQuery()函數(shù)中,形成了統(tǒng)一(也是惟一)的操作入口,這為jQuery操作降低了門檻。那我們來看下具體構造函數(shù)的“七種武器”吧。2014-06-06使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
jquery提供了很好的ajax交互,我這里用的是直接返回字符串,用的是jquery.load方法從數(shù)據(jù)庫取出的數(shù)據(jù)2014-01-01jQuery實現(xiàn)輸入框下拉列表樹插件特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)輸入框下拉列表樹特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08JQuery EasyUI 加載兩次url的原因分析及解決方案
這篇文章主要介紹了JQuery EasyUI 加載兩次url的原因分析及解決方案,需要的朋友可以參考下2014-08-08javascript jQuery $.post $.ajax用法
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù),請使用 $.ajax。2008-07-07