JQuery基本过滤选择器

言之有李
96 阅读1分钟 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .bg {
        background:yellowgreen
    }
</style>
</head>

<body>
<ul>
        <h1>1</h1>
        <h2>2</h2>
        <h3>3</h3>
        <h4>4</h4>
        <h5>5</h5>
        <h6>6</h6>
    <li>我是新入职的程序员0</li>
    <li>我是新入职的程序员1</li>
    <li class="a">我是新入职的程序员2</li>
    <li>我是新入职的程序员3</li>
    <li>我是新入职的程序员4</li>
    <li>我是新入职的程序员5</li>
    <li>我是新入职的程序员6</li>
</ul>

<script src="./jquery-1.12.4.js"></script>
<script>
    /* 选取第一个元素 */
    $('ul li:first').addClass('bg');
    /* 选取最后一个元素 */
    $('ul li:last').addClass('bg');
    /* 选取去除所有与给定选择器匹配的元素 */
    $('ul li:not(.a)').addClass('bg');
    /* 选取索引是偶数的所有元素（index从0开始） */
    $('ul li:even').addClass('bg');
    /* 选取索引是奇数的所有元素（index从0开始） */
    $('ul li:odd').addClass('bg');
    /* 选取索引等于index的元素（index从0开始） */
    $('ul li:eq(1)').addClass('bg');
    /* 选取索引大于index的元素（index从0开始）(不包括当前的索引的) */
    $('ul li:gt(1)').addClass('bg');
    /* 选取索引小于index的元素（index从0开始）(不包括当前的索引的) */
    $('ul li:lt(3)').addClass('bg');
    /* 选取所有标题元素，如h1~h6 */
    $('ul li :header').addClass('bg')
</script>
</body>

</html>
avatar
文章
阅读
粉丝