基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
has(selector選擇器或DOM元素) 將匹配元素集合根據(jù)選擇器或DOM元素為條件,檢索該條件在每個元素的后代中是否存在,將符合條件的的元素構(gòu)成新的結(jié)果集。
下面舉一個例子:
<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é)果如下:
這個例子可以看出:在匹配li時,要檢查該li的后代元素中是否包含了span,如果包含,則該元素包含在結(jié)果中。如果不包含,那么就排除。
注意:has只起判斷作用。以has參數(shù)中的選擇器或DOM元素做為條件,檢測原結(jié)果集中的元素是否符合。去掉不符合的元素,將符合的元素構(gòu)成一個新結(jié)果集。
這與find()方法不同,find()方法是獲得在當前結(jié)果集中每個元素的后代。參數(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)文章
(模仿京東用戶注冊)用JQuery實現(xiàn)簡單表單驗證,初學者必看
下面小編就為初學者們分享一篇(模仿京東用戶注冊)用JQuery實現(xiàn)簡單表單驗證,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01使用Jquery搭建最佳用戶體驗的登錄頁面之記住密碼自動登錄功能(含后臺代碼)
今天將登錄功能徹底完成,加入記住密碼自動登錄功能,密碼在客戶端進行第一次加密存儲。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07基于jQuery的輸入框在光標位置插入內(nèi)容, 并選中
基于jQuery的輸入框在光標位置插入內(nèi)容, 并選中功能的實現(xiàn)代碼,需要的朋友可以參考下。2011-10-10jQuery結(jié)合ajax實現(xiàn)動態(tài)加載文本內(nèi)容
本文實例講述了jquery通過ajax加載一段文本內(nèi)容的方法。分享給大家供大家參考。這是一個簡單的例子,注意編碼問題,否則可能會出現(xiàn)亂碼。2015-05-05