實例講解JQuery中this和$(this)區別_jquery

平常很少在jquery用到this。查看程式碼時發現用到了，就調試出this的值，心想原來如此。還是挺有用的。這裡總結一下this與$(this)的差異與使用。

　　$(this)產生的是什麼？

　　$()產生的是什麼呢？實際上$()=jquery()，就是說回傳的是一個jquery的物件。

　　通常我們為了簡單直接使用$()。實際上，函數省略了一個參數context。根據選擇器選取符合的物件即$(selector, context)，以jQuery包裝集的形式傳回。

　　context可以是Dom對象集合或jQuery包裝集，傳入則表示要從context中選擇匹配的對象，不傳入則表示範圍為文檔對象(即頁面全部對象)，即$(selector)=$ (selector,document)。

　　this指的是，呼叫函數的那個html物件。

範例：

複製程式碼 程式碼如下:

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

這裡的this其實是一個Html元素(textbox)，this是js中的。 textbox有text屬性，所以這樣寫沒什麼問題。

複製程式碼 程式碼如下:

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

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

結論：

　　this，表示目前的上下文物件是一個html對象，可以呼叫html物件所擁有的屬性和方法。
　　$(this),代表的上下文物件是一個jquery的上下文對象，可以呼叫jquery的方法和屬性值。

實例（選項卡）：

複製程式碼 程式碼如下:

tabs($("#nav a"), $(".content")); 
function tabs(tab, content){
 content.hide();
 content.eq(0).show();
 tab.click(function(){
  var index = tab.index(this);
  tab.removeClass("current");
  $(this).addClass("current");
  content.hide();
  content.eq(index).animate({opacity:'show'}, 200);
 });
}