jQuery選擇器——屬性過濾選擇器

changuncle發表於2017-08-02
jQuery

上一章介紹了常用的表單元素過濾選擇器，為我們選擇目標元素又增添了一種工具，今天介紹屬性過濾選擇器，它也是很常用的，下面請看使用介紹。為了更好的學習，我們先列出一段HTML程式碼：

<body>
    <div id="one" class="aaa">
        id=one，class=aaa的div
        <br />
        <div class="mini">class=mini的div</div>
    </div>
    <div id="two" class="aaa" title="test">
        id=two，class=aaa，title=test的div
        <br />
        <div class="mini" title="other">
            class=mini，title=other的div
        </div>
        <div class="mini" title="test">
            class=mini，title=test的div
        </div>
    </div>
    <div class="bbb" title="other">
        class=bbb，title=other的div
        <div class="mini">class=mini的div</div>
        <div class="mini">class=mini的div</div>
        <div class="mini" title="west">class=mini，title=west的div</div>
    </div>
    <div>
        <input type="hidden" />
        包含input(type=hidden)的div
    </div>
    <div title="test est">
        title=test est
    </div>
</body>

一、[attribute]

選擇器：[attribute]
描述：匹配包含給定屬性的元素
返回值：元素集合
示例：

$("body div[title]").css("background", "#ffbbaa");

執行截圖如下：
這裡寫圖片描述
二、[attribute=‘value’]

選擇器：[attribute=‘value’]
描述：匹配給定的屬性是某個特定值的元素
返回值：元素集合
示例：

$("body div[title='test']").css("background","#ffbbaa");

執行截圖如下：
這裡寫圖片描述
三、[attribute!=‘value’]

選擇器：[attribute!=‘value’]
描述：匹配所有不包含指定的屬性或屬性不等於特定值的元素
返回值：元素集合
示例：

$("body div[title!='test']").css("background","#ffbbaa");

執行截圖如下：
這裡寫圖片描述
四、[attribute^=‘value’]

選擇器：[attribute^=‘value’]
描述：匹配給定的屬性是以某些值開始的元素
返回值：元素集合
示例：

$("body div[titel^='te']").css("background","#ffbbaa");

執行截圖如下：
這裡寫圖片描述
五、[attribute$=‘value’]

選擇器：[attribute$=‘value’]
描述：匹配給定的屬性是以某些值結尾的元素
返回值：元素集合
示例：

$("body div[title$='est']").css("background","#ffbbaa");

執行截圖如下：
這裡寫圖片描述
六、[attribute~=‘value’]

選擇器：[attribute~=‘value’]
描述：匹配給定的屬性是包含某些值的元素（value必須是用空格分隔的單詞）
返回值：元素集合
示例：

$("body div[title~='est']").css("background","#ffbbaa");
上面這個例子只有
<div title="test est">
    title=test est
</div>
能匹配上，est必須是title屬性值中的一項。

執行截圖如下：
這裡寫圖片描述
七、[attribute*=‘value’]

選擇器：[attribute*=‘value’]
描述：匹配給定的屬性是包含某些值的元素
返回值：元素集合
示例：

$("body div[title*='est']").css("background","#ffbbaa");
上面這個例子
<div title="test est">
    title=test est
</div>
<div class="mini" title="test">
    class=mini，title=test的div
</div>
<div class="mini" title="west">
    class=mini，title=west的div
</div>
......
都能匹配上，只有title的屬性值包含est就行，無論est是屬性值中單獨的一項或者是屬性值的一部分，都可以的。

執行截圖如下：
這裡寫圖片描述
八、[attribute1][attribute2]

選擇器：[attribute]
描述：複合屬性選擇器，需要滿足多個條件時使用（求交集）
返回值：元素集合
示例：

$("body div[id][title*='est']").css("background", "#ffbbaa");

執行截圖如下：
這裡寫圖片描述
九、其他示例

用js給元素新增屬性

$(".c1").css("color","#f00");
$("p").css("background-color","yellow");
$("p").attr('class','yellowBackgroundColor');

給表格隔行變換背景顏色

$("#tab tr:odd").css("background-color","#fceded"); //基數行
$("#tab tr:even").css("background-color","#f79898"); //偶數行

五種獲取元素的方法

//a元素中包含title屬性
$("#div2 a[title]").css(“"text-decoration","none"); 
//a元素中href屬性以http開頭
$("#div2 a[href^=http]").css("color","#f00"); 
//a元素中href屬性以html結尾
$("#div2 a[href$=html]").css("color","#f00"); 
//a元素中href屬性值為www.baidu.com
$("#div2 a[href=’www.baidu.com’]").css("color","#f00");
//a元素中href屬性包含http
$("#div2 a[href*=http]").css("color","#f00");

相關文章