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

更新時間：2014年12月08日 09:01:57 投稿：junjie

這篇文章主要介紹了實例講解JQuery中this和$(this)的區(qū)別,this表示當前的上下文對象是一個html對象,可以調用html對象所擁有的屬性和方法,$(this),代表的上下文對象是一個jquery的上下文對象,可以調用jquery的方法和屬性值,需要的朋友可以參考下

平時很少在jquery中用到this。查看代碼時發(fā)現(xiàn)用到了，就調試出this的值，心想原來如此。還是挺有用的。這里總結一下this與$(this)的區(qū)別和使用。

　　$(this)生成的是什么？

　　$()生成的是什么呢？實際上$()=jquery()，就是說返回的是一個jquery的對象。

　　通常我們?yōu)榱撕啽阒苯邮褂?()。實際上，該函數(shù)省略了一個參數(shù)context。根據選擇器選取匹配的對象即$(selector, context)，以jQuery包裝集的形式返回。

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

　　this指的是，調用函數(shù)的那個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);

 });

}

您可能感興趣的文章: