淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法
1.JQuery this和$(this)的區(qū)別
相信很多剛接觸JQuery的人,很多都會對$(this)和this的區(qū)別模糊不清,那么這兩者有什么區(qū)別呢?
首先來看看JQuery中的 $() 這個符號,實(shí)際上這個符號在JQuery中相當(dāng)于JQuery(),即$(this)=jquery();也就是說,這樣可以返回一個jquery對象。那么,當(dāng)你在網(wǎng)頁中alert($('#id'));時(shí),會彈出一個[object Object ],這個object對象,也就是jquery對象了。
那么,我們再回過頭來說$(this),這個this是什么呢?假設(shè)我們有如下的代碼:
$("#desktop a img").each(function(index){
alert($(this));
alert(this);
}
那么,這時(shí)候可以看出來:
alert($(this)); 彈出的結(jié)果是[object Object ]
alert(this); 彈出來的是[object HTMLImageElement]
也就是說,后者返回的是一個html對象(本例中是遍歷HTML的img對象,所以為HTMLImageElement)。
很多人在使用jquery的時(shí)候,經(jīng)常this.attr('src'); 這時(shí)會報(bào)錯“對象不支持此屬性或方法”,這又是為什么呢?其實(shí)看明白上面的例子,就知道錯在哪里了:很簡單,this操作的是HTML對象,那么,HTML對象中怎么會有val()方法了,所以,在使用中,我們不能直接用this來直接調(diào)用jquery的方法或者屬性。
2.獲取$(this)子節(jié)點(diǎn)對象的方法:find(element)
明白了$(this)和this的區(qū)別,再來看看這個例子:(假設(shè),我的頁面中a標(biāo)簽包含img,并含有src屬性),當(dāng)我在遍歷的時(shí)候,想取到$(this)下img中src的地址
$("#desktop a ").each(function(index){
var imgurl=$(this).find('img').attr('src');
alert(imgurl);
}
其中 .find(element) 是返回一個用于匹配元素的DOM元素,這樣就可以取到想要的src地址了。
以上這篇淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼
上次做了一個前端項(xiàng)目,其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能,下面小編抽個時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺供大家參考下2016-08-08
基于jQuery實(shí)現(xiàn)動態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動匹配相關(guān)信息,感興趣的小伙伴們可以參考一下2016-05-05
Jquery 實(shí)現(xiàn)Tab效果 思路是js思路
Jquery 實(shí)現(xiàn)Tab效果,思路就是普通的用js的思路控制的,腳本之家發(fā)布過更精簡的代碼,這個比較適合一直用js開始學(xué)用jquery控制的朋友一個參考。2010-03-03
jQuery實(shí)現(xiàn)簡單飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單飛機(jī)大戰(zhàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
一個簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
這篇文章主要介紹了一個簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子,需要的朋友可以參考下2014-06-06

