jquery&js $(this) & this

jquery&js $(this) & this
序言：在使用jquery操作js時，經常整不明白this與$(this)。抽空仔細測試了一把，記錄下來以供在忘記的時候拉出來參考參考！$(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的方法和屬性值。

jQuery中this與$(this)的區別

 

  
$("#textbox").hover( 
  
 function() { 
  
 this.title = "Test"; 
  
 }, 
  
 fucntion() { 
  
 this.title = "OK”; 
  
 } 
  
); 
 

這裡的this其實是一個Html 元素(textbox)，textbox有text屬性，所以這樣寫是完全沒有什麼問題的。
但是如果將this換成$(this)就不是那回事了，Error--報了。this與$(this)的區別在此。

 

  
Error Code： 
  
$("#textbox").hover( 
  
 function() { 
  
 $(this).title ＝ "Test"; 
  
 }, 
  
 function() { 
  
 $(this).title = "OK"; 
  
 } 
  
); 
 

這裡的$(this)是一個JQuery對象，而jQuery對象沒有title 屬性，因此這樣寫是錯誤的。

JQuery擁有attr()方法可以get/set DOM對象的屬性，所以正確的寫法應該是這樣：

正確的代碼：

 

  
$("#textbox").hover( 
  
 function() { 
  
 $(this).attr(’title’, ‘Test’); 
  
 }, 
  
 function() { 
  
 $(this).attr(’title’, ‘OK’); 
  
 } 
  
); 
 

使用jQuery的好處是它包裝了各種瀏覽器版本對DOM對象的操作，因此統一使用$(this)而不再用this應該是比較不錯的選擇。

下面再看一個w3School上的例子：

<script type="text/javascript" src="/jquery/jquery.js"></script>

• list item 1 - one strong tag


• list item 2 -
  two strong tags


• list item 3


• list item 4


• list item 5

<script>
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong',this).length === 2;
});
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
});
</script>

注意上面代碼中$('strong',this).length === 2這一句this的作用：通常我們為了簡便直接使用$(),實際上,該函數省略了一個參數context,即$(selector)=$(selector,document).如果指定context，可以指定context為一個dom元素集或者jquery對象。我們可以通過去掉this來查看效果從中來領悟這行代碼的作用。在此不作分析，呵呵!

jQuery中this與$(this)的區別就介紹到這裡。