JQuery this和$(this)的區別及獲取$(this)子元素對象的方法


1.JQuery this和$(this)的區別

// this其實是一個Html 元素。
// $this 只是個變量名,加$是為說明其是個jquery對象。
// 而$(this)是個轉換,將this表示的dom對象轉為jquery對象,這樣就可以使用jquery提供的方法操作。
相信很多剛接觸JQuery的人,很多都會對$(this)和this的區別模糊不清,那么這兩者有什么區別呢?

       首先來看看JQuery中的  $()  這個符號,實際上這個符號在JQuery中相當於JQuery(),即$(this)=jquery();也就是說,這樣可以返回一個jquery對象。那么,當你在網頁中alert($('#id'));時,會彈出一個[object Object ],這個object對象,也就是jquery對象了。

       那么,我們再回過頭來說$(this),這個this是什么呢?假設我們有如下的代碼:

$("#desktop a img").each(function(index){

            alert($(this));

            alert(this);

}

那么,這時候可以看出來:

alert($(this));  彈出的結果是[object Object ]

alert(this);        彈出來的是[object HTMLImageElement]

也就是說,后者返回的是一個html對象(本例中是遍歷HTML的img對象,所以為HTMLImageElement)。

很多人在使用jquery的時候,經常this.attr('src');   這時會報錯“對象不支持此屬性或方法”,這又是為什么呢?其實看明白上面的例子,就知道錯在哪里了:很簡單,this操作的是HTML對象,那么,HTML對象中怎么會有val()方法了,所以,在使用中,我們不能直接用this來直接調用jquery的方法或者屬性。

 

2.獲取$(this)子節點對象的方法:find(element)

明白了$(this)和this的區別,再來看看這個例子:(假設,我的頁面中a標簽包含img,並含有src屬性),當我在遍歷的時候,想取到$(this)下img中src的地址

      $("#desktop a ").each(function(index){

         var imgurl=$(this).find('img').attr('src');

         alert(imgurl);

        }

其中 .find(element) 是返回一個用於匹配元素的DOM元素,這樣就可以取到想要的src地址了。

 

 

---------------------------------------------------------------------------------------------------------------

this 與 $(this) 是不一樣的對象
this指針表示的是當前function中的context對象,

在 jQuery 事件中:
- this 表示的是當前事件發生的目標元素(DOM對象)
- $(this) 表示將該元素封裝為一個 jQuery 對象

例如
$( "p" ).bind() 中的 this 就是一個 p 元素,它是DOM對象,擁有的屬性和方法都是DOM對象的屬性和方法。
$(this)則是將這個p元素封裝為一個jQuery對象,從而可以使用jQuery定義的一些方法來訪問DOM對象。
$(this).text() 方法屬於jQuery對象,作用是取得元素的文本內容,與之對應的DOM對象屬性是 this.textContent
同樣,$(this).html() 是取得元素內的HTML內容,對應的是 this.innerHTML。
而 this.nodeName 則沒有對應的jQuery方法了。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM