jQuery选择器——属性过滤选择器

来源：互联网发布：数据库分析工具编辑：程序博客网时间：2024/05/02 01:00

上一章介绍了常用的表单元素过滤选择器，为我们选择目标元素又增添了一种工具，今天介绍属性过滤选择器，它也是很常用的，下面请看使用介绍。为了更好的学习，我们先列出一段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");

运行截图如下：
这里写图片描述

阅读全文

1 0