jquery的 filter()方法使用教程
定義和用法
filter() 方法返回符合一定條件的元素。
該方法讓您規(guī)定一個(gè)條件。不符合條件的元素將從選擇中移除,符合條件的元素將被返回。
該方法通常用于縮小在被選元素組合中搜索元素的范圍。
提示:filter() 方法是與 not() 方法相對(duì)的。
filter()是根據(jù)括號(hào)中的 屬性來進(jìn)行篩選 比如:$(“p”).filter(“p”)
這樣是不允許的。filter括號(hào)里只一些屬性,或者包含什么的,不能是一個(gè)元素,例如”p”
//filter() --獲取具有某些屬性值的標(biāo)簽 :(指定的對(duì)象集合進(jìn)行過濾) $("li").filter(".item-1") //獲取class屬性值為item-1的li元素 $("li").filter(":even").css("background", "red"); //獲取所有偶數(shù)號(hào)的li元素,并將它們的背景顏色設(shè)為紅色 $("li").filter(".item-1,#abc").css("background-color", "yellow"); //獲取class屬性值為item-1的所有l(wèi)i標(biāo)簽 ,同時(shí)獲取id屬性值為abc的所有l(wèi)i標(biāo)簽 $("p").filter(".selected, :first");//獲取class屬性值為selected的所有P標(biāo)簽,同時(shí)獲取第一個(gè)P標(biāo)簽 //:contains() --獲取標(biāo)簽里包含了某些文字的標(biāo)簽 (contains是判斷文本的) //jQuery:has()和jQuery:contains()兩個(gè)方法比較類似。不同點(diǎn)在于:has是判斷標(biāo)簽的 contains是判斷文本的 $("p p:contains('測(cè)試')").text(); //獲取p標(biāo)簽下包含“測(cè)試”的p標(biāo)簽的text值 //打印一下,結(jié)果為“測(cè)試1 測(cè)試2” //alert($("p").contains("測(cè)試").text()); //不能這么用,提示錯(cuò)誤“contains不是一個(gè)函數(shù)”
html
<div class="model_content" style=""> <div class="model_content_search layui-bg-gray"> <form class="layui-form"> <div class="layui-form-item fl" style="margin-top: 15px;"> <label class="layui-form-label" style="width:66px;">選擇框</label> <div class="layui-input-inline" style="width:174px;"> <input id="search_val" class="layui-input" name="keyword" type="text" placeholder="請(qǐng)輸入關(guān)鍵字"> </div> </div> <div class="layui-input-inline fl" style="margin-top: 15px;"> <button class="layui-btn">搜索</button> </div> <div class="clear"></div> </form> </div> <div class="search_result"> <div class="mapAddress"> <ul> <li> <div class="addressInfo"> <h3>要素大市場(chǎng)</h3> <span class="bold">地址:</span>徽州大道與錦繡大道交叉口<br> </div> </li> <li> <div class="addressInfo"> <h3>錦繡大道</h3> <span class="bold">地址:</span>徽州大道與錦繡大道交叉口<br> </div> </li> <li> <div class="addressInfo"> <h3>蜀山區(qū)</h3> <span class="bold">地址:</span>徽州大道與錦繡大道交叉口<br> </div> </li> <li> <div class="addressInfo"> <h3>瑤海區(qū)</h3> <span class="bold">地址:</span>徽州大道與錦繡大道交叉口<br> </div> </li> </ul> </div> </div> </div> //input中輸入篩選 var $sub2 = $("#search_val"); $sub2.on("input", function () { var $iptVal2 = $sub2.val(); $(".mapAddress li").hide(); $(".mapAddress .addressInfo h3").filter(":contains('" + $iptVal2 + "')").parents("li").show(); });
總結(jié)
以上所述是小編給大家介紹的jquery的 filter()方法使用教程,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery中each()、find()和filter()等節(jié)點(diǎn)操作方法詳解(推薦)
- jQuery里filter()函數(shù)與find()函數(shù)用法分析
- jquery中filter方法用法實(shí)例分析
- jQuery中filter()方法用法實(shí)例
- jQuery 過濾方法filter()選擇具有特殊屬性的元素
- jQuery filter函數(shù)使用方法
- 從jquery的過濾器.filter()方法想到的
- jQuery中filter()和find()的區(qū)別深入了解
- 基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
- jQuery中filter(),not(),split()使用方法
相關(guān)文章
jquery實(shí)現(xiàn)焦點(diǎn)輪播效果
本文主要介紹了jquery實(shí)現(xiàn)焦點(diǎn)輪播效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02jQuery多個(gè)input求和的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery多個(gè)input求和的實(shí)現(xiàn)方法,涉及jQuery獲取input表單元素值及運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2015-02-02jquery實(shí)現(xiàn)抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10jQuery實(shí)現(xiàn)跨域iframe接口方法調(diào)用
頁面a.html域名為www.a.com嵌入頁面http://www.b.com/b.html,b.html要調(diào)用a.html中的js函數(shù),由于兩個(gè)頁面不在一個(gè)域中,會(huì)提示沒權(quán)限。如何解決該問題呢,請(qǐng)看下面示例代碼。2015-03-03jQuery.Validate 使用筆記(jQuery Validation范例 )
學(xué)習(xí)jQuery Validation,于是手寫一公共范例,并收藏以便后用,里面附有測(cè)試代碼,需要的朋友一起來測(cè)試。2010-06-06