JQuery过滤选择器(属性过滤)

1、[attribute] 匹配包含给定属性的元素   attribute:属性名

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

查找所有包含id属性的div元素

$("div[id]")

结果

[ <div id="test2"></div> ]

2、[attribute=value]  匹配给定的属性室某个特定值的元素

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

查找所有name属性是newsletter的input元素

$("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" /> ]

3、[attribute!=value]    匹配所有不包含指定的属性，或者属性不等于特定值的元素

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

查找所有name属性不是newsletter的input元素

$("input[name!='newsletter']").attr("checked", true);

结果

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

4、[attribute^=value]  匹配给定的属性是以某些值开始的元素

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

查找所有name以‘news’开始的input元素

$("input[name^='news']")

结果

[ <input name="newsletter" />, <input name="newsboy" /> ]

5、[attribute$=value]   匹配给定的属性是以某些值结尾的元素

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

查找所有nae以'letter'结尾的input元素

$("input[name$='letter']")

结果

[ <input name="newsletter" />, <input name="jobletter" /> ]

7、[attribute*=value]  匹配给定的属性是以包含某些值的元素

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

查找所有name包含'man'的input元素

$("input[name*='man']")

结果

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

8、[selector1] [selector2][selectorN]   复合属性选择器，需要同时满足多个条件时使用

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

找到所有包含id属性，并且它的name属性是以man结尾的

$("input[id][name$='man']")

结果

[ <input id="letterman" name="new-letterman" /> ]