DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 實例教程講解JQuery中this和$(this)區別
實例教程講解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);
 });
}

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