基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
has(selector選擇器或DOM元素) 將匹配元素集合根據(jù)選擇器或DOM元素為條件,檢索該條件在每個(gè)元素的后代中是否存在,將符合條件的的元素構(gòu)成新的結(jié)果集。
下面舉一個(gè)例子:
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li><div><span>a</span></div>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
$('li').has('span').css('background-color', 'red');
得到的結(jié)果如下:
這個(gè)例子可以看出:在匹配li時(shí),要檢查該li的后代元素中是否包含了span,如果包含,則該元素包含在結(jié)果中。如果不包含,那么就排除。
注意:has只起判斷作用。以has參數(shù)中的選擇器或DOM元素做為條件,檢測(cè)原結(jié)果集中的元素是否符合。去掉不符合的元素,將符合的元素構(gòu)成一個(gè)新結(jié)果集。
這與find()方法不同,find()方法是獲得在當(dāng)前結(jié)果集中每個(gè)元素的后代。參數(shù)(選擇器、jquery集合或DOM元素)做為過濾條件,滿足過濾條件的則保留,保留的是后代。而has()方法中,參數(shù)只做為條件,符合條件的,它的前元素加入新的結(jié)果集,而不是后代加入新的結(jié)果集。
$('li').find('span').css('background-color', 'red');
結(jié)果為:
filter()方法與has()方法中的參數(shù),都是過濾條件。不同的是filter()方法,條件作用于自身;has()方法條件是作用于它的后代元素中。
以下面的例子為例:filter()方法中,條件作用于自身li,has()方法條件是作用于li的后代元素
<ul>
<li class="a">list item 1</li>
<li>list item 2
<ul>
<li><div><span>a</span></div>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
$('li').filter('.a').css('background-color', 'red');
結(jié)果為:
相關(guān)文章
(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡單表單驗(yàn)證,初學(xué)者必看
下面小編就為初學(xué)者們分享一篇(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡單表單驗(yàn)證,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩
這篇文章主要為大家詳細(xì)介紹了jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03使用Jquery搭建最佳用戶體驗(yàn)的登錄頁面之記住密碼自動(dòng)登錄功能(含后臺(tái)代碼)
今天將登錄功能徹底完成,加入記住密碼自動(dòng)登錄功能,密碼在客戶端進(jìn)行第一次加密存儲(chǔ)。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-10-10jQuery結(jié)合ajax實(shí)現(xiàn)動(dòng)態(tài)加載文本內(nèi)容
本文實(shí)例講述了jquery通過ajax加載一段文本內(nèi)容的方法。分享給大家供大家參考。這是一個(gè)簡單的例子,注意編碼問題,否則可能會(huì)出現(xiàn)亂碼。2015-05-05