jQuery的语法

基本过滤选择器

 <h1>我爱中国</h1>
    <h2>我爱南京</h2>
    <h3>我爱雨花台</h3>
    <h4>我爱安德门</h4>
    <h5>我爱警官学院</h5>
    <h6>我爱青鸟</h6>
    <ul>
        <li>我是飞行员0</li>
        <li class="feiji">我是飞行员1</li>
        <li>我是飞行员2</li>
        <li>我是飞行员3</li>
    </ul>
    <input type="text">
    <script src="./jquery-1.12.4.js"></script>
    <script>
    </script>

选取第一个元素 :first

$('li:first').css('background','red')

选取最后一个元素 :last

$('li:last').css('background','red')

排除指定元素之外的所有元素 :not(selector)

$('li:not(".feiji")').css('background','red')

选取索引是偶数的所有元素（index从0开始） :even 0也是偶数

$('li:even').css('background','red')

选取索引是奇数的所有元素（index从0开始） :odd

$('li:odd').css('background','red')

选取索引等于index的元素（index从0开始）:eq(index)

$('li:eq(3)').css('background','red')

选取索引大于index的元素（index从0开始）:gt(index)

$('li:gt(2)').css('background','red')

选取索引小于index的元素（index从0开始）

$('li:lt(4)').css('background','red')

选取所有标题元素，如h1~h6 :header

$(':header').css('background','red')

选取当前获取焦点的元素 :focus

 $('input').click(function(){
    //     $('input:focus').css('background','red')
    // })

    <!-- 特殊符号的转义 -->
    <div id="id#a">aa</div>

    <div id="id[2]">cc</div>

    <h1 style="display: none;">你好
        <span style="display: none;">1</span>
    </h1>
   
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('h1:hidden').show()
        $('h1 :hidden').show()

        /* \\ 来转义 让jq 把id#a当成字符串 */
        // console.log( $('#id\\#a') );

         /* \\ 来转义 让jq 把id\\[2\\]当成字符串 */
        // console.log( $('#id\\[2\\]') );
    </script>
    
练习
    <script>
        /* 写一个按钮 使用可见性过滤器 实现 点击 让div 点一下显示
        再点隐藏 */
        $('button').click(function(){
            console.log('隐藏的h1的个数：', $('h1:hidden').length );
            if(  $('h1:hidden').length ){
                $('h1:hidden').show('slow')
            }else{
                $('h1:visible').hide('slow')
            }
        })

        /* 选取所有可见的元素 :visible */
        // console.log( $('div:visible') );

        /* 选取所有隐藏的元素 :hidden */
        // console.log( $('div:hidden') );
    </script>