JQuery过滤选择器

常见的几个过滤选择器
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>

运行结果:

猜你喜欢

转载自blog.csdn.net/linghuainian/article/details/82078675
今日推荐