jquery選擇器之屬性過(guò)濾選擇器詳解
更新時(shí)間：2014年01月27日 09:21:27 作者：
本篇文章主要是對(duì)jquery選擇器之屬性過(guò)濾選擇器進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<style type="text/css">
/*高亮顯示*/
.highlight{
background-color: gray
}
</style>
復(fù)制代碼 代碼如下:
<body>
<div>
<p>Hello</p>
</div>
<div id="test">ID為test的DIV</div>
<input type="checkbox" id="s1" name="football" value="足球" />足球
<input type="checkbox" name="volleyball" value="排球" />排球
<input type="checkbox" id="s3" name="basketball" value="籃球" />籃球
<input type="checkbox" id="s4" name="other" value="其他" />其他
</body>
1. [attribute]用法
定義：匹配包含給定屬性的元素
復(fù)制代碼 代碼如下:
$("div[id]").addClass("highlight"); //查找所有含有ID屬性的div元素
2. [attribute=value]用法
定義：匹配給定的屬性是某個(gè)特定值的元素
復(fù)制代碼 代碼如下:
$("input[name='basketball']").attr("checked",true); //name屬性值為basketball的input元素選中
3. [attribute!=value]用法
定義：匹配給定的屬性是不包含某個(gè)特定值的元素
復(fù)制代碼 代碼如下:
$("input[name!='basketball']").attr("checked",true); //name屬性值不為basketball的input元素選中
//此選擇器等價(jià)于:not([attr=value])要匹配含有特定屬性但不等于特定值的元素，請(qǐng)使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);
4. [attribute^=value]用法
定義：匹配給定的屬性是以某些值開始的元素
復(fù)制代碼 代碼如下:
$("input[name^='foot']").attr("checked",true); //查找所有 name 以 'foot' 開始的 input 元素
5. [attribute$=value]用法
定義：匹配給定的屬性是以某些值結(jié)尾的元素
復(fù)制代碼 代碼如下:
$("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 結(jié)尾的 input 元素
6. [attribute*=value]用法
定義：匹配給定的屬性是以包含某些值的元素
復(fù)制代碼 代碼如下:
$("input[name*='sket']").attr("checked",true); //查找所有 name 包含 'sket' 的 input 元素
7. [selector1][selector2][selectorN]用法
定義：復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
復(fù)制代碼 代碼如下:
$("input[id][name$='ball']").attr("checked",true); //找到所有含有 id屬性，并且它的 name屬性是以 ball結(jié)尾的
您可能感興趣的文章:
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
- JQuery 選擇器、過(guò)濾器介紹
- jquery選擇器排除某個(gè)DOM元素的方法（實(shí)例演示）
- jQuery Selector選擇器小結(jié)
- JQuery中$之選擇器用法介紹
- jquery選擇器-根據(jù)多個(gè)屬性選擇示例代碼
- jQuery中的類名選擇器（.class）用法簡(jiǎn)單示例
- jQuery選擇器全集詳解
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery 選擇器用法實(shí)例分析【prev + next】
相關(guān)文章
Json實(shí)現(xiàn)異步請(qǐng)求提交評(píng)論無(wú)需跳轉(zhuǎn)其他頁(yè)面
Json實(shí)現(xiàn)異步請(qǐng)求，效果即為，在輸入框中輸入相關(guān)文字，點(diǎn)擊提交，下方會(huì)自動(dòng)將書寫的文字進(jìn)行展示，無(wú)需跳轉(zhuǎn)其他頁(yè)面2014-10-10
jQuery操作DOM_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery操作DOM，下面的DOM操作將圍繞上面的DOM樹進(jìn)行學(xué)習(xí)JQueryDOM操作，有興趣的可以了解一下2017-07-07
用jquery實(shí)現(xiàn)的checkbox全選和反選代碼,需要的朋友可以參考下。2010-03-03
JQuery中$.ajax()方法參數(shù)詳解及應(yīng)用
JQuery中$.ajax()方法想必大家并不陌生吧，在本文將為大家介紹下其參數(shù)及應(yīng)用示例，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
上篇文章我簡(jiǎn)單的描述了加載頁(yè)面、事件委派、事件切換三種JQuery的事件機(jī)制，這篇文章我講下在JQuery事件機(jī)制中占主導(dǎo)地位并且在我們的實(shí)際工作中最常用到的機(jī)制-事件處理2010-12-12
jQuery操作listbox原理并不難，就是將listbox中的選中項(xiàng)進(jìn)行移動(dòng)，實(shí)現(xiàn)我們需要的移動(dòng)效果，具體實(shí)例如下，感興趣的朋友可以學(xué)習(xí)下2013-05-05
這篇文章主要介紹了jquery.ajax之beforeSend方法使用介紹,beforeSend方法用于在向服務(wù)器發(fā)送請(qǐng)求前添加一些處理函數(shù),需要的朋友可以參考下2014-12-12
Jquery跨域獲得Json時(shí)invalid label錯(cuò)誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候，經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來(lái)的 json 值，一般跨域用到的兩個(gè)方法為：$.ajax 和 $.getJson2011-01-01
這篇文章主要介紹了jquery傳參及獲取方式,本文給大家兩種方式，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
通過(guò)實(shí)例解析jQ Ajax操作相關(guān)原理
這篇文章主要介紹了通過(guò)實(shí)例解析jQ Ajax操作相關(guān)原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09