锋利Jquery第十天 ----Jquery 属性过滤选择器
锋利Jquery第十天 ----Jquery 属性过滤选择器
匹配包含给定属性的元素 [attribute]
匹配给定的属性是某个特定值的元素 [attribute = value]
匹配所有含有指定的属性，但属性不等于特定值的元素 [attribute != value]
匹配给定的属性是以某些值开始的元素 [attribute^=value]
匹配给定的属性是以某些值结尾的元素 [attribute$=value]
匹配给定的属性是以包含某些值的元素 [attribute*=value]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>属性过滤选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//属性过滤选择器是通过元素的属性来获取相应的元素
//改变含有属性title的div元素的背景色
$("div[title]").css("background","red");
[attribute] 匹配包含给定属性的元素。返回值 Array<Element>
参数 attribute (String) : 属性名
示例
查找所有含有 id 属性的 div 元素
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:[ <div id="test2"></div> ]
//改变属性title 的值等于test，的div 元素的背景色
$("div[title=test]").css("background","yellow");
[attribute=value]
匹配给定的属性是某个特定值的元素
返回值 Array<Element>
参数 attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例
查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
//改变属性title 的值不等于test，的div 元素的背景色
$("div[title!=test]").css("background","blue");
[attribute!=value]
匹配所有含有指定的属性，但属性不等于特定值的元素。
在jQuery 1.3之前是这样的："匹配那些没有指定的属性的元素，或者指定的属性不等于特定值的元素。"，这等价于:not([attr=value])
返回值 Array<Element>
参数 attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例
查找所有 name 属性不是 newsletter 的 input 元素
HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
//改变属性值title以te开始div 元素
$("div[title^=te]").css("background","green");
[attribute^=value]
匹配给定的属性是以某些值开始的元素
返回值 Array<Element>
参数 attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例
查找所有 name 以 'news' 开始的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
//改变属性值title以te结束div 元素
$("div[title$=sst]").css("background","#bbeeff");
//改变属性值title包含es的div 元素
$("div[title*=es]").css("background","#ddaaff");
[attribute$=value]
匹配给定的属性是以某些值结尾的元素
返回值
Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例
查找所有 name 以 'letter' 结尾的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
//改变元素含有id属性，并且属性值title包含es的div 元素
$("div[id][title*=es]").css("background","red");
[attribute*=value]
匹配给定的属性是以包含某些值的元素
返回值
Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
示例
查找所有 name 包含 'man' 的 input 元素
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
});
</script>
<style type="text/css">
div,span,p
{
width:140px; height:140px;
margin:5px;
background:#aaa;
border: solid 1px #000;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini
{
width:55px; height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide
{
display:none
}
</style>
</head>
<body>
<h3 align="center">过滤选择器</h3>
<div class="one" id="one">
class等于one,id等于one
<div class="mini">class等于mini</div>
</div>
<div class="one" id="two" title="test">
class="one" id="two" title="test" 的DIV
<div class="mini" title="ohter">class为mini,title="ohter"</div>
<div class="mini" title="test">class为mini,title="test"</div>
</div>
<div class="one">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini"></div>
</div>
<div class="mini">
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini">class等于mini</div>
<div class="mini" title="tesst">class等于mini,title="tesst"</div>
</div>
<div style="display:none" class="one">style="display:none" class="one"的div</div>
<div class="hide">class="hide"的div</div>
<div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div>
<span id="mover">正在执行动画的span元素</span>
<div><p>含有p元素的div</p></div>
</body>
</html>
