DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery中this的使用說明
jquery中this的使用說明
編輯:JQuery特效代碼     

原來js中的this這麼好用
代碼如下:
$(document).ready(function(){
  var DragElement=null;
  $("#zz").mousedown(function(){
  DragElement=this;//這時this指的就是$("#zz")對象
  $(document).mousemove(function(){
  如果直接$(this).css("left")//由於是在mousemove內,這樣this對象就不是$("#zz"),
  這時可以用$(DragElement).css("left")//這樣取的就是$("#zz")
})
})
})


$(this)生成的是什麼

$()生成的是什麼呢?實際上$()=jquery(),那麼也就是說返回的是一個jquery的對象。
題外話:通常我們為了簡便直接使用$(),實際上,該函數省略了一個參數context,即$(selector)=$(selector,document).如果指定context,可以指定context為一個dom元素集或者jquery對象。

那麼依照,$()返回的是jquery對象這一結論,我們可以得出$(this)得到的是一個jquery對象.我們可以使用萬能的alert()方法打印出一個對象:
alert($('#btn'));
顯示的結果:

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

this代表什麼?

this,編程的人都知道this表示上下文所處的這個對象,這個自然是不錯的,可是這個對象到底是個什麼對象呢?加入js裡面也有getType的話返回的值會是什麼呢?其實js裡面不需要使用getType,因為我們有萬能的alert.請看看下面的代碼:
代碼如下:
$('#btn').bind("click",function(){

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

根據我們的經驗(因為$()生成的是jquery的對象嘛),this自然是一個jquery的對象咯。可是我們看看返回的結果:


返回的是什麼?【object HTMLInputElement】——偉大的html對象,嘿嘿。所以我們通常在直接使用this.val()或者直接通過this來調用jquery所特有的方法或屬性的時候會報錯誤: 為什麼呢?明知故問!html對象當然“不包含屬性或方法”了。那麼為什麼在一個jquery對象的上下文中調用this返回的是一個html對象而不是jquery對象 呢?翻遍jquery的api文檔,貌似jquery中並未對this這一關鍵字進行過特殊“處理”,也就是說這裡this是js中的,而不是jquery重新定義了的。so...當然這僅僅是我自己的想法,如果有對此更了解的朋友可以留言更正。而我們再看一下以上代碼中alert($(this));的返回,自然是jquery的對象了,在此調用jquery特有的方法和屬性,完全沒有問題。

結論:

this,表示當前的上下文對象是一個html對象,可以調用html對象所擁有的屬性,方法
$(this),代表的上下文對象是一個jquery的上下文對象,可以調用jquery的方法和屬性值。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved