jQuery-过滤选择器
2016-08-23 22:07
281 查看
jQuery过滤选择器
（1）基本过滤选择器
:first 选取第1个元素 单个元素$("div:first")选取所有 <div>元素中第一个<div>元素
:last 选取最后1个元素单个元素$("div:last")选取所有 <div>元素中最后一个<div>元素
:not(selector)去除所有与给定选择器匹配的元素 集合元素$("input:not(.myClass)")选取class不是myClass的<input>元素
:even 选取索引(从0开始)是偶数的所有元素 集合元素 $("input:even")选取索引是偶数的<input>元素
:odd 选取索引(从0开始)是奇数的所有元素 集合元素$("input:odd")选取索引是奇数的<input>元素
:eq(index) 选取索引(从0开始)等于index的元素 单个元素$("input:eq(1)")选取索引等于1的<input>元素
:gt(index) 选取索引(从0开始)大于index的元素 集合元素$("input:gt(1)")选取索引大于1的<input>元素
:lt(index) 选取索引(从0开始)小于index的元素 集合元素$("input:lt(1)")选取索引小于1的<input>元素
:header 选取所有的标题元素，即<h1>到<h6> 集合元素$(":header")选取页面中所有的标题元素
:animated 选取当前正在执行动画的所有元素 集合元素$("div:animated")选取当前正在执行动画的<div>元素
（2）内容过滤选择器
:contains(text)
:empty()
:parent
（3）可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
:visible
:hidden
（4）子元素过滤选择器
:first-child
:last-child
:only-child
:nth-child
这里值得一提的是:nth-child()，这个选择器的详细功能如下：
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<input type="button" value="向下滑动" id="slidebtn"/>
<input type="button" value="停止动态元素" id="stopbtn"/>
<p>请选择你喜欢的水果</p>
<div id="choice">
<div style="display: none;">
<input type="checkbox" value="apple" />苹果<br />
<input type="checkbox" value="orange" />橘子<br />
<input type="checkbox" value="banana" />香蕉<br />
<input type="checkbox" value="pear" />梨<br />
<input type="checkbox" value=" watermelon" />西瓜<br />
<input type="checkbox" value="grape" />葡萄<br />
</div>
</div>
<div id="tab">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</table>
</div>
<div id="content">
<div style="display: none;">
<p>你好，世界</p>
</div>
<div>
<p>你好，世界</p>
<p>世界</p>
<p></p>
<p></p>
<p>你好</p>
</div>
</div>
<div id="log"></div>
</body>
<script>
$(function(){
$("#tab table").css("border","black solid 1px").css("width","500px").css("height","200px");
//基本过滤选择器
//:odd
$("#tab table tr:odd").css("background-color","bisque");
//:even
$("#tab table tr:even").css("background-color","deepskyblue");
//:first
$("#tab table tr:first").css("background-color","dodgerblue");
//:last
$("#tab table tr:last").css("background-color","black");
$("#slidebtn").click(function(){
$("#choice div").slideToggle(5000);
});
//:animated
$("#stopbtn").click(function(){
$("div:animated").stop();
});
//内容过滤选择器
//:contains(text)
$("#content div p:contains(你好)").css("font-size","40px");
//:empty
var len=$("#content p:empty").length;
$("#log").css("border","solid 1px blue");
$("#log")[0].innerHTML+='$("#content div p:empty").length-->'+len+'<br/>';
//:parent
$("#content div:parent").css("background-color","darkorange").css("margin","10px");
//可见性过滤选择器
//:visible
$("#content div:visible").fadeOut(5000);
//:hidden
$("#content div:hidden").fadeIn(5000);
//子元素选择器
//first-child
$("#content p:first-child").css("color","darkmagenta");
//last-child
$("#content p:last-child").css("color","red");
//only-child
$("div p:only-child").css("background-color","black");
//nth-child
//$("#choice div input:nth-child(2n)").css("checked"."checked");
});
</script>
</html>
（1）基本过滤选择器
:first 选取第1个元素 单个元素$("div:first")选取所有 <div>元素中第一个<div>元素
:last 选取最后1个元素单个元素$("div:last")选取所有 <div>元素中最后一个<div>元素
:not(selector)去除所有与给定选择器匹配的元素 集合元素$("input:not(.myClass)")选取class不是myClass的<input>元素
:even 选取索引(从0开始)是偶数的所有元素 集合元素 $("input:even")选取索引是偶数的<input>元素
:odd 选取索引(从0开始)是奇数的所有元素 集合元素$("input:odd")选取索引是奇数的<input>元素
:eq(index) 选取索引(从0开始)等于index的元素 单个元素$("input:eq(1)")选取索引等于1的<input>元素
:gt(index) 选取索引(从0开始)大于index的元素 集合元素$("input:gt(1)")选取索引大于1的<input>元素
:lt(index) 选取索引(从0开始)小于index的元素 集合元素$("input:lt(1)")选取索引小于1的<input>元素
:header 选取所有的标题元素，即<h1>到<h6> 集合元素$(":header")选取页面中所有的标题元素
:animated 选取当前正在执行动画的所有元素 集合元素$("div:animated")选取当前正在执行动画的<div>元素
（2）内容过滤选择器
:contains(text)
:empty()
:parent
（3）可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
:visible
:hidden
（4）子元素过滤选择器
:first-child
:last-child
:only-child
:nth-child
这里值得一提的是:nth-child()，这个选择器的详细功能如下：
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<input type="button" value="向下滑动" id="slidebtn"/>
<input type="button" value="停止动态元素" id="stopbtn"/>
<p>请选择你喜欢的水果</p>
<div id="choice">
<div style="display: none;">
<input type="checkbox" value="apple" />苹果<br />
<input type="checkbox" value="orange" />橘子<br />
<input type="checkbox" value="banana" />香蕉<br />
<input type="checkbox" value="pear" />梨<br />
<input type="checkbox" value=" watermelon" />西瓜<br />
<input type="checkbox" value="grape" />葡萄<br />
</div>
</div>
<div id="tab">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</table>
</div>
<div id="content">
<div style="display: none;">
<p>你好，世界</p>
</div>
<div>
<p>你好，世界</p>
<p>世界</p>
<p></p>
<p></p>
<p>你好</p>
</div>
</div>
<div id="log"></div>
</body>
<script>
$(function(){
$("#tab table").css("border","black solid 1px").css("width","500px").css("height","200px");
//基本过滤选择器
//:odd
$("#tab table tr:odd").css("background-color","bisque");
//:even
$("#tab table tr:even").css("background-color","deepskyblue");
//:first
$("#tab table tr:first").css("background-color","dodgerblue");
//:last
$("#tab table tr:last").css("background-color","black");
$("#slidebtn").click(function(){
$("#choice div").slideToggle(5000);
});
//:animated
$("#stopbtn").click(function(){
$("div:animated").stop();
});
//内容过滤选择器
//:contains(text)
$("#content div p:contains(你好)").css("font-size","40px");
//:empty
var len=$("#content p:empty").length;
$("#log").css("border","solid 1px blue");
$("#log")[0].innerHTML+='$("#content div p:empty").length-->'+len+'<br/>';
//:parent
$("#content div:parent").css("background-color","darkorange").css("margin","10px");
//可见性过滤选择器
//:visible
$("#content div:visible").fadeOut(5000);
//:hidden
$("#content div:hidden").fadeIn(5000);
//子元素选择器
//first-child
$("#content p:first-child").css("color","darkmagenta");
//last-child
$("#content p:last-child").css("color","red");
//only-child
$("div p:only-child").css("background-color","black");
//nth-child
//$("#choice div input:nth-child(2n)").css("checked"."checked");
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery选择器之表单对象属性过滤选择器Demo
- jQuery过滤选择器
- 举例讲解jQuery中可见性过滤选择器的使用
- jQuery基础教程之强大的选择器（过滤选择器-基本过滤选择器）
- jQuery选择器——基本过滤选择器
- jQuery_可见性过滤选择器
- JQuery属性过滤选择器
- JQuery过滤选择器
- jQuery选择器的过滤器，即对选择的结果再进行一个过滤（如我不想要在<div id="test"></div>这里的input控件）
- jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器
- 一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
- jquery之层次选择器和过滤选择器
- jQuery过滤选择器
- jquery选择器之属性过滤选择器
- 【代码片段】jQuery测试内容过滤选择器
- jQuery表单对象属性过滤选择器
- 使用jquery内容过滤选择器
- jQuery基本过滤选择器
- Jquery 过滤选择器大全
- jquery 过滤选择器