jQuery 择择器

基本筛选（基本过滤选择器）

名称	说明	举例
:first	匹配找到的第一个元素	查找表格的第一行:$("tr:first")
:last	匹配找到的最后一个元素	查找表格的最后一行:$("tr:last")
:not(selector)	去除所有与给定选择器匹配的元素	查找所有未选中的 input 元素: $("input:not(:checked)")
:even	匹配所有索引值为偶数的元素，从 0 开始计数	查找表格的1、3、5...行:$("tr:even")
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	查找表格的2、4、6行:$("tr:odd")
:eq(index)	匹配一个给定索引值的元素注:index从 0 开始计数	查找第二行:$("tr:eq(1)")
:gt(index)	匹配所有大于给定索引值的元素注:index从 0 开始计数	查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")
:lt(index)	选择结果集中索引小于 N 的 elements 注:index从 0 开始计数	查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")
:header	选择所有h1,h2,p一类的header标签.	给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
:animated	匹配所有正在执行动画效果的元素	只有对不在执行动画效果的元素执行一个动画特效: $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });

:first

选取第一个元素

1). 获取匹配的第一个元素，相当于 :eq(0) 和 :lt(1)

2). 虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个，即为每个父级元素匹配第一个子元素

3). 请使用 $("your-pure-css-selector").eq(index) 代替，在现代浏览器上获得更佳的性能

:last

选取最后一个元素

为了在现代浏览器上获得更佳的性能，请使用 .filter(":last") 代替

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:first :last</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
p{height:90px;width:90px;float:left;border:1px solid #ddd;margin-left: 10px;}
</style>
</head>
<body>
	<p>p 1</p>
	<p>p 2</p>
	<p>p 3</p>
	<p>p 4</p>
	<p>p 5</p>
	<p>p 6</p>

<script>

	// 选择第一个p标签
	// 注意: p和:first之间不要有空格，会选取p标签下一层的第一个标签
	$('p:first').css('background' ,'red');

	// 选择最后一个
	$('p:last').css('background' ,'yellow');

</script>
</body>
</html>

效果

p 1span 7

p 2span 8

p 3

p 4

p 5

p 6

:not

在开发中很有用

p3和p5有.cname样式，没有添加黄色背景，其它的兄弟标签都添加了黄色背景

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:not()在开发中很有用</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
p{height: 90px;width: 90px;float: left;border:1px solid #ddd;margin-right:10px;}
</style>
</head>
<body>
    
	<p>p 1</p>
	<p>p 2</p>
	<p class="cname">p 3</p>
	<p>p 4</p>
	<p class="cname">p 5</p>
	<p>p 6</p>
	<span style="display:block;clear:both; margin-bottom:60px;"><!-- 清除浮动 --></span>

<script>

	$('p:not(\'.cname\')').css('background' ,'yellow');

	// 如果不用单引号不使用转义,里面用双引号也是可以的,如下
	// $('p:not(".cname")').css('background' ,'yellow');

</script>
</body>
</html>

效果

p 1

p 2

p 3

p 4

p 5

p 6

Example

1. 选择器可以放置在:not()中，例如 :not(div a)和:not(div,a)

2. 而使用:not()通常会构建出一个非常复杂的选择器，所以大多数情况下，推荐使用.not()方法

<input name="glee" value="glee" />
<input name="rose" value="rose" />
<input name="flower" disabled="disabled" />
<em></em>

<script>

	// 选中:not()之外的两个表单，添加黄色背景
	var input = $("input:not(':disabled')").css('background' ,'yellow');

	//把选中的input元素，赋值em元素
	var str = input.map(function(index){
		// alert($(this).val());
		return $(this).val();
	}).get().join(", ");

	$('em').html(str);

</script>

:even() 选择所引值为偶数的元素 0,2,4

:odd() 选择索引值为奇数元素 1,3,5

从0开始计数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:even/:odd</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
p{height: 90px;width: 90px;float: left;border:1px solid #ddd;margin-left: 10px;}
</style>
</head>
<body>

<p>p #0</p>
<p>p #1</p>
<p>p #2</p>
<p>p #3</p>
<p>p #4</p>
<p>p #5</p>

<script>
    
    $('p:even').css('background' ,'yellow'); //选择所引值为偶数的元素
    
    $('p:odd').css('background' ,'red'); //选择索引值为奇数元素

    /*
    其他注意事项：
    :even/:odd是一个jQuery延伸出来的选择器，并不是的CSS规范的一部分，使用:even 查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。
    为了当使用:even/:odd的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用.filter(":even")/.filter(":odd")
    */
</script>
</body>
</html>

效果

p #0

p #1

p #2

p #3

p #4

p #5

:eq()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:eq(index)</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
p{height: 90px;width: 90px;float: left;border:1px solid #ddd;margin-left: 10px;}
</style>
</head>
<body>

<p>p #1</p>
<p>p #2</p>
<p>p #3</p>
<p>p #4</p>
<p>p #5</p>
<p>p #6</p>
<span style="display:block;clear:both;"><!-- 清除浮动 --></span>

<script>

    $('p:eq(2)').css('background' ,'yellow'); // 索引从0开始,索引2实际选中个第三个p元素

    $('p:eq(-2)').css('background' ,'orange'); // 在jQuery 1.8之前:eq(index)不接受负值所引值（虽然.eq(index)方法接受），-2 选择倒数第二个元素

</script>
</body>
</html>

效果

p #1

p #2

p #3

p #4

p #5

p #6

:eq()是一个jQuery延伸出来的选择器，并不是的CSS规范的一部分,

使用:eq()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。

为了在现代浏览器上获得更佳的性能，

请使用$("your-pure-css-selector").eq(index)代替。

由于JavaScript数组使用基于0的索引,这些选择器也是如此。

这就是为什么$('p:eq(1)')选择器选择文档中第二个p的元素，而不是第一个。

与此相反，:nth-child(n)是基于1的索引的，以符合CSS规范。

列表项目中应用三种不同的样式，以此来展示:eq()只会选择一个元素，而:nth-child()或:eq()会像.each()一样，有类似循环的构造，从而选择多个元素

<ul class="nav">
    <li>List 1, item 1</li>
    <li>List 1, item 2</li>
    <li>List 1, item 3</li>
</ul>
<ul class="nav">
    <li>List 2, item 1</li>
    <li>List 2, item 2</li>
    <li>List 2, item 3</li>
</ul>

<script>

    // 选中一个元素
    $("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" ); 

    // 通过each()循环,选中两ul的第二个li元素
    $("ul.nav").each(function(index) {
        $(this).find("li:eq(1)").css( "fontStyle", "italic" );
    });

    //:nth-child()可以直接选中两个ul下的第二个li元素
    $("ul.nav li:nth-child(2)").css( "color", "red" );

</script>

:gt(index)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:gt()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
p{height: 90px;width: 90px;float: left;border:1px solid #ddd;margin-left: 10px;}
</style>
</head>
<body>
    <p>p #1</p>
    <p>p #2</p>
    <p>p #3</p>
    <p>p #4</p>
    <p>p #5</p>
    <p>p #6</p>

<script>

    //索引从零开始,索引大于3的都被选中
    $('p:gt(2)').css('background' ,'yellow');
    //大于-3的的-1，-2被选中
    $('p:gt(-3)').css('color' ,'red');

    /*
    1: jQuery1.8以前的版本，:gt(index)选择器不接收一个负数的index值。

    2: :gt()是一个jQuery延伸出来的选择器。并且不是的CSS规范的一部分, 
    使用:gt()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。
    为了在现代浏览器上获得更佳的性能，请使用$("your-pure-css-selector").slice(index)代替。
    */
</script>
</body>
</html>

效果

p #1

p #2

p #3

p #4

p #5

p #6

lt(indxe)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:lt(index)</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
p{height: 90px;width: 90px;float: left;border:1px solid #ddd;margin-left: 10px;}
</style>
</head>
<body>
    <p>p #1</p>
    <p>p #2</p>
    <p>p #3</p>
    <p>p #4</p>
    <p>p #5</p>
    <p>p #6</p>

<script>
    //索引从零开始,小3的元素都被选中
    $('p:lt(2)').css('background' ,'yellow');

    //-2之后-3,-4...都被选中
    $('p:lt(-2)').css('color' ,'red');

    /***
    其他与:gt()一样
    1:jQuery 1.8以前的版本，:lt(index)选择器不接收一个负数的index值
    2:请使用$("your-pure-css-selector").slice(0, index)代替。
    ***/
</script>
</body>
</html>

效果

p #1

p #2

p #3

p #4

p #5

p #6

:header

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:lt(index)</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:header</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding:30px;}
</style>
</head>
<body>
    <!--视频教程的老师说 :header 这个基本没用! -->
    <h1>h1</h1>
    <p>p</p>
    <h3>h3</h3>
    <div>div</div>
    <h5>h5</h5>
    <span style="display: block;">span</span>

<script>
    //只选中h标签
    $(':header').css('color' ,'yellow');

    /***
    :header()是一个jQuery延伸出来的一个选择器,不是的CSS规范的一部分, 
    使用:header()查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。
    为了在现代浏览器上获得更佳的性能，请使用.filter(":header")代替。
    ***/
</script>
</body>
</html>

:animated

<!DOCTYPE html>
<html>
<head>
<title>:animated</title>
<style>
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<div></div>
<div id="mover"></div>
<div></div>

<button id="run">Run</button>


<p style="width: 100px;height: 100px;background: teal;position:absolute;left:0;top: 120px;">:animated</p>

<script>
    //选择所有正在执行动画效果的元素.

    //手册上的例子
    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

    //视频里的例子，比较直接
    $('p').animate({'left':'600'},10000);
    $('p:animated').css('background','green');

</script>
</body>
</html>

手册上提示的注意事项：

:first()

:even

:odd

:header()

:animated

:eq()

:gt()

:lt()

:not()

上面这些是一个jQuery延伸出来的一个选择器，并且不是的CSS规范的一部分, 不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。

为了在现代浏览器上获得更佳的性能，请分别使用:

.filter(":first")

.filter(":even")

.filter(":odd")

.filter(":header")

代替

:eq()使用$("your-pure-css-selector").eq(index)代替

:gt()/:lt()使用$("your-pure-css-selector").slice(0, index)代替。

:not()推荐使用.not()方法

jQuery 择择器

Leave a Reply