淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對(duì)象的方法
1.JQuery this和$(this)的區(qū)別
相信很多剛接觸JQuery的人,很多都會(huì)對(duì)$(this)和this的區(qū)別模糊不清,那么這兩者有什么區(qū)別呢?
首先來(lái)看看JQuery中的 $() 這個(gè)符號(hào),實(shí)際上這個(gè)符號(hào)在JQuery中相當(dāng)于JQuery(),即$(this)=jquery();也就是說(shuō),這樣可以返回一個(gè)jquery對(duì)象。那么,當(dāng)你在網(wǎng)頁(yè)中alert($('#id'));時(shí),會(huì)彈出一個(gè)[object Object ],這個(gè)object對(duì)象,也就是jquery對(duì)象了。
那么,我們?cè)倩剡^(guò)頭來(lái)說(shuō)$(this),這個(gè)this是什么呢?假設(shè)我們有如下的代碼:
$("#desktop a img").each(function(index){ alert($(this)); alert(this); }
那么,這時(shí)候可以看出來(lái):
alert($(this)); 彈出的結(jié)果是[object Object ]
alert(this); 彈出來(lái)的是[object HTMLImageElement]
也就是說(shuō),后者返回的是一個(gè)html對(duì)象(本例中是遍歷HTML的img對(duì)象,所以為HTMLImageElement)。
很多人在使用jquery的時(shí)候,經(jīng)常this.attr('src'); 這時(shí)會(huì)報(bào)錯(cuò)“對(duì)象不支持此屬性或方法”,這又是為什么呢?其實(shí)看明白上面的例子,就知道錯(cuò)在哪里了:很簡(jiǎn)單,this操作的是HTML對(duì)象,那么,HTML對(duì)象中怎么會(huì)有val()方法了,所以,在使用中,我們不能直接用this來(lái)直接調(diào)用jquery的方法或者屬性。
2.獲取$(this)子節(jié)點(diǎn)對(duì)象的方法:find(element)
明白了$(this)和this的區(qū)別,再來(lái)看看這個(gè)例子:(假設(shè),我的頁(yè)面中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) 是返回一個(gè)用于匹配元素的DOM元素,這樣就可以取到想要的src地址了。
以上這篇淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對(duì)象的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery AJAX回調(diào)函數(shù)this指向問(wèn)題
- jQuery 選擇方法及$(this)用法實(shí)例分析
- jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
- 實(shí)例講解JQuery中this和$(this)區(qū)別
- 詳談jQuery中的this和$(this)
- 通過(guò)$(this)使用jQuery包裝后的方法或?qū)傩?/a>
- jquery $(this).attr $(this).val方法使用介紹
- jquery中this的使用說(shuō)明
- JQuery this 和 $(this) 的區(qū)別
- JQuery中this的指向詳解
相關(guān)文章
jQuery實(shí)現(xiàn)元素拖拽并cookie保存順序的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)元素拖拽并cookie保存順序的方法,涉及jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素屬性變換的技巧與使用jQuery的cookie插件保存頁(yè)面信息的功能,需要的朋友可以參考下2016-02-02簡(jiǎn)單實(shí)現(xiàn)的JQuery文本框水印插件
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)JQuery文本框水印插件的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06jquery動(dòng)態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
這段代碼是通過(guò)jquery動(dòng)態(tài)增加限定數(shù)額的text,以及清除文本內(nèi)容,用到了after()方法追加元素,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07正則驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法
下面小編就為大家?guī)?lái)一篇正則驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jQuery判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部的實(shí)現(xiàn)方法
最近做項(xiàng)目遇到這樣的需求,要求基于jq判斷網(wǎng)頁(yè)是否已經(jīng)滾動(dòng)到瀏覽器底部了,下面小編給大家分享實(shí)例代碼,需要的朋友參考下吧2017-10-10解析jquery easyui tree異步加載子節(jié)點(diǎn)問(wèn)題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點(diǎn)問(wèn)題,easyui中的樹(shù)可以從標(biāo)記中建立,也可以通過(guò)指定一個(gè)URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。2017-03-03使用jquery菜單插件HoverTree仿京東無(wú)限級(jí)菜單
這篇文章主要介紹了使用jquery菜單插件HoverTree仿京東無(wú)限級(jí)菜單,需要的朋友可以參考下2014-12-12jQuery篩選數(shù)組之grep、each、inArray、map的用法及遍歷json對(duì)象
本文主要介紹jQuery中g(shù)rep、each、inArray、map的用法,并附實(shí)例講解,非常實(shí)用,有需要的朋友可以參考一下。2016-06-06jQuery中checkbox反復(fù)調(diào)用attr(''checked'', true/false)只有第一次生效的解決方法
這篇文章主要介紹了jQuery中checkbox反復(fù)調(diào)用attr('checked', true/false)只有第一次生效的解決方法,通過(guò)使用prop方法代替attr方法來(lái)解決此問(wèn)題,需要的朋友可以參考下2016-11-11