在JQuery中可以使用过滤器对选取的数据进行过滤，选择更加明确的元素，JQuery过滤器的通常语法：$("选择器:过滤器")
基本过滤器：
- ：first(可以找到匹配的第一个元素)
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<table>
<tr>第一行</tr>
<tr>第二行</tr>
<tr>第三行</tr>
</table>
<script>
$(document).ready(function(){
$("tr:first").css("font-style","italic");
});
</script>
</body>
</html>- :last(可以匹配找到最后一个元素) 例如：$("tr:last");
- :not(<选择器>):（可以去除所有与给定的选择器匹配的元素）例如：$("input:not(:checked)");
- :even(可以匹配所有索引值为偶数的元素。注意 ： 索引值是从0开始计数的) 例如： $("tr:even")选择表格的奇数行：索引值为偶数；
- :odd（可以匹配所有索引值为奇数的元素）；
- :eq(index)(可以匹配索引值为index的元素)；
- :gt(index)(可以匹配索引值大于index的元素)；
- :it(index)(可以匹配索引值小于index的元素)；
- :header(可以选择所有H1、H2、H3等一类的header标签)；
- :animated(可以匹配所有正在执行动画效果的元素)；
内容过滤器：
- ：contains()(可以匹配到包含指定文本的元素)；
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div>HTML</div>
<div>JAVASCRIPT</div>
<div>CSS</div>
<div>JQUERY</div>
<script>
$(document).ready(function(){
$("div:contains(HTML)").css({background:'yellow',color:'blue'})
});
</script>
</body>
</html>注意：
若有一个参数： $("div:contains(HTML)").css("background","yellow")
若有多个参数，各个参数之间用逗号隔开：$("div:contains(HTML)").css({background:'yellow',color:'blue'})
- :empty()(可以匹配不包含子元素或文本为空的元素) 例如：$("td:empty") 可以选择内容为空的表格单元格；
- :has()(可以匹配包含指定子元素的元素) 例如： $("div:has(p)")可以选择包含p元素的div元素；
- :parent()(可以匹配至少包含一个子元素或文本的元素) 例如： $("div:parent(p)")可以选择包含p元素的div元素；
可见性过滤器：
- :hidden(可以匹配到所有不可见元素) 例如：$("input:hidden") 匹配所有不可见的input元素；
- :visible(可以匹配所有的可见元素)
属性过滤器：
- [属性名]（可以根据元素的属性或属性值对元素进行过滤）
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="id1">id1</div>
<div>no id</div>
<div id="id2">id2</div>
<script>
$(document).ready(function(){
$("div[id]").css("border","2px dotted blue")
});
</script>
</body>
</html>$("div[id]")表示匹配所有的包含id的div元素。
- [属性名=值]（匹配属性等于指定值的元素） 例如：$("div[id=id1]") 可以匹配所有di=id1的div元素；
- [属性名！=值]（匹配属性不等于指定值的元素）；
- [属性名^=值]（指定属性值以指定值开始的元素） 例如：$("input[name^=news]")可以匹配所有的name属性值以news开始的input元素；
- [属性名$=值]（指定属性值以指定值结束的元素）；
- [属性名*=值]（指定属性值包含指定值的元素） ；
2919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
