基于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元素做為條件，檢測原結(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)文章
jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08
Jquery post傳遞數(shù)組方法實(shí)現(xiàn)思路及代碼
Jquery post 傳遞數(shù)組以做批量刪除會需要傳遞要?jiǎng)h除的數(shù)據(jù)ID數(shù)組，下面是具體的實(shí)現(xiàn)代碼，感興趣的童鞋們可以參考下2013-04-04
BootStrap日期控件在模態(tài)框中選擇時(shí)間下拉菜單無效的原因及解決辦法(火狐下不能點(diǎn)擊)
今天同事讓我?guī)退黄鸾鉀Q一個(gè)問題，關(guān)于兼容的bug問題，在火狐中使用模態(tài)框加載日期控件時(shí)選擇時(shí)間下拉菜單沒有效果（不能點(diǎn)擊），而在谷歌中卻是好的，下面小編附上原因分析及解決辦法，有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery瀏覽器CSS3特寫兼容的方法,實(shí)例分析了jQuery兼容瀏覽器的使用技巧,需要的朋友可以參考下2015-01-01
jQuery簡單實(shí)現(xiàn)彩色云標(biāo)簽效果示例
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)彩色云標(biāo)簽效果,結(jié)合實(shí)例形式分析了jQuery隨機(jī)數(shù)運(yùn)算與頁面元素樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果,涉及jQuery動態(tài)操作頁面元素的顯示及隱藏技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jquery滾動到頂部底部是一款簡單的滾動到頂部底部控制。是一個(gè)很實(shí)用的功能，他能幫助新手和高級開發(fā)者們創(chuàng)造美好的用戶體驗(yàn)。這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
jquery實(shí)現(xiàn)的一個(gè)導(dǎo)航滾動效果具體代碼
首頁有一個(gè)導(dǎo)航頁面要實(shí)現(xiàn)滾動效果，索性就仿造別人的效果自己做了一個(gè)，大體上還行，看起來還是比較流暢的,現(xiàn)滾動效果，腳本代碼如下，感興趣的朋友可以參考下2013-05-05
jQuery ajax 當(dāng)async為false時(shí)解決同步操作失敗的問題
這篇文章主要介紹了 jQuery ajax 當(dāng)async為false時(shí)解決同步操作失敗的問題的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了jQuery中siblings()方法用法,實(shí)例分析了siblings()方法的功能、定義及獲取匹配元素集合中每一個(gè)元素的同輩元素的使用技巧,是進(jìn)行元素篩選時(shí)非常實(shí)用的方法,需要的朋友可以參考下2015-01-01