JQuery中屬性過(guò)濾選擇器用法實(shí)例分析
本文實(shí)例講述了JQuery中屬性過(guò)濾選擇器用法。分享給大家供大家參考。具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>屬性過(guò)濾選擇器</title> <style type="text/css"> div{width:200px;border:1px solid red;margin:10px auto;} </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //==========舉例1================ //: $("div[id]") ; 說(shuō)明: 匹配包含給定屬性的元素. 例子中是選取了所有帶”id”屬性的div標(biāo)簽. showElements($("div[id]")); //==========舉例2================ //$("div[myTag]='tt2') 匹配給定的屬性是某個(gè)特定值的元素 //匹配div中myTag屬性為tt2的div alert($("div[myTag='tt2']").attr("myTag")); //注意中括號(hào)的結(jié)束位置 //==========舉例3================ //[attribute!=value] //用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素 //說(shuō)明: 匹配所有不含有指定的屬性,或者屬性不等于特定值的元素. //此選擇器等價(jià)于:not([attr=value]),要匹配含有特定屬性但不等于特定值的元素, //請(qǐng)使用[attr]:not([attr=value]).之前看到的 :not 派上了用場(chǎng). //...<1> 查找div中myTag屬性不為tt1的所有div 會(huì)找到兩個(gè) //showElements($("div[myTag!='tt1']")); //...<2> 查找div中包含myTag屬性,并且myTag屬性不等于tt1的div showElements($("div[myTag]:not([myTag='tt1'])")); //注意中括號(hào)和括號(hào)的方式 //==========舉例4================ //[attribute^=value] 匹配給定的屬性是以某些值開(kāi)始的元素 //...<1>查找myTag屬性以tt2開(kāi)頭的所有div showElements($("div[myTag^='tt2']")); //==========舉例5================ //[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素. //...<1>查找myTag屬性以3結(jié)尾的所有div showElements($("div[myTag$='3']")); //==========舉例6================ //[attribute*=value] 匹配給定的屬性是以包含某些值的元素. //...<1>查找myTag屬性包含tt的所有div showElements($("div[myTag*='tt']")); //==========舉例7================ //用法: $(”input[id][name$=‘man']“) 返回值 集合元素 //復(fù)合屬性選擇器,需要同時(shí)滿(mǎn)足多個(gè)條件時(shí)使用.又是一個(gè)組合,這種情況我們實(shí)際使用的時(shí)候很常用. //這個(gè)例子中選擇的是所有含有 id 屬性,并且它的 name 屬性是以 man 結(jié)尾的元素. //...<1>查找包含id屬性,并且myTag屬性不為tt2的所有div showElements($("div[id][myTag!='tt2']")); }); function showElements(elements) { var output = ""; for (var i = 0; i < elements.length; i++) { if (output == "") { output = elements.eq(i).html(); } else { output += "\r\n" + elements.eq(i).html(); } } alert(output); } </script> </head> <body> <div>我是沒(méi)有id的DIV</div> <div id="div1" myTag="tt1">我是id為div1的DIV myTag為tt1</div> <div id="div2" myTag="tt2">我是id為div2的DIV myTag為tt2</div> <div id="div3" myTag="tt23">我是id為div2的DIV myTag為tt23</div> <div id="div4" myTag="tt33">我是id為div2的DIV myTag為tt33</div> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 舉例講解jQuery中可見(jiàn)性過(guò)濾選擇器的使用
- jquery可見(jiàn)性過(guò)濾選擇器使用示例
- jQuery子元素過(guò)濾選擇器用法示例
- jQuery內(nèi)容過(guò)濾選擇器用法示例
- jQuery過(guò)濾選擇器經(jīng)典應(yīng)用
- 簡(jiǎn)單講解jQuery中的子元素過(guò)濾選擇器
- JQuery中基礎(chǔ)過(guò)濾選擇器用法實(shí)例分析
- jquery表單對(duì)象屬性過(guò)濾選擇器實(shí)例分析
- jQuery子屬性過(guò)濾選擇器用法分析
- jQuery內(nèi)容過(guò)濾選擇器用法分析
- jQuery過(guò)濾選擇器用法分析
- jQuery過(guò)濾選擇器詳解
- jQuery可見(jiàn)性過(guò)濾選擇器用法示例
相關(guān)文章
JQuery 確定css方框模型(盒模型Box Model)
做過(guò)前臺(tái)設(shè)置的都知道css存在兩種盒模型,W3C標(biāo)準(zhǔn)的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁(yè)面的呈現(xiàn)模式的定義而是用對(duì)性的方框模式。已用哪中呈現(xiàn)的模式取決于頁(yè)面上的DOCTYPE的聲明。2010-01-01jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
這是一個(gè)基于jQuery的效果,當(dāng)鼠標(biāo)在小圖片上懸停時(shí),會(huì)彈出一個(gè)大圖,該大圖會(huì)跟隨鼠標(biāo)的移動(dòng)而移動(dòng)2013-07-07jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳的相關(guān)資料,需要的朋友可以參考下2016-05-05jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果(示例代碼)
這篇文章主要介紹了jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11Jquery 自定義事件實(shí)現(xiàn)發(fā)布/訂閱的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery 自定義事件實(shí)現(xiàn)發(fā)布/訂閱的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單項(xiàng)呈現(xiàn)文字上下滑動(dòng)變換的效果,涉及jQuery頁(yè)面元素樣式的動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下2015-09-09easyui Draggable組件實(shí)現(xiàn)拖動(dòng)效果
Draggable是easyui中用于實(shí)現(xiàn)拖拽功能的一個(gè)插件。利用它,我們可以實(shí)現(xiàn)控件的拖拽效果。Draggble覆蓋默認(rèn)值$.fn.draggable.defaults。2015-08-08jQuery LigerUI 插件介紹及使用之ligerDrag和ligerResizable示例代碼打包
jQuery LigerUI 插件介紹及使用之ligerDrag和ligerResizable使用。2011-04-04BootStrap iCheck插件全選與獲取value值的解決方法
這篇文章主要介紹了BootStrap iCheck插件全選與獲取value值的解決方法,解決方法其實(shí)很簡(jiǎn)單,下面小編給大家分享下這方面的知識(shí)2016-08-08