NO | 选择器 | 描述 |
---|---|---|
1 | :first | 集合里的第一个元素 |
2 | :last | 集合里的最后一个元素 |
3 | :not(选择器) | 集合里除去括号中的选择器选中的元素集合 |
4 | :even | 集合里索引为偶数的元素集合,索引从0开始 |
5 | :odd | 集合里索引为奇数的元素集合,索引从0开始 |
6 | :eq(索引值) | 集合里索引等于括号中的索引值的元素,索引从0开始 |
7 | :gt(索引值) | 集合里索引大于括号中的索引值的元素集合,索引从0开始 |
8 | :lt(索引值) | 集合里索引小于括号中的索引值的元素集合,索引从0开始 |
9 | :header | 集合里所有的标题元素(h1~h6)集合 |
示例:运用上面的几个选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<p id="p0">p1</p>
<div>
<p id="p1">p2</p>
<p id="p2">p3</p>
</div>
<div>
<p id="p3">p4</p>
</div>
<p id="p4">p5</p>
<h1>h1</h1>
<div>
<h2>h2</h2>
<h3>h3</h3>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
var first=$("div p:first");
var last=$("div p:last");
// var a=$("div,p:first");
var not=$("*:not(#p1,:header)");
var even=$("p:even")
var odd=$("p:odd")
var eq=$("p:eq(3)")
var gt=$("p:gt(3)")
var lt=$("P:lt(3)")
var header=$("div :header")
console.log(first)
console.log(last)
// console.log(a)
console.log(not)
console.log(even)
console.log(odd)
console.log(eq)
console.log(gt)
console.log(lt)
console.log(header)
</script>
</html>
运行结果: