jq选择器学习

132 阅读1分钟

基本过滤选择器

   // for(var i=0;i<document.getElementsByTagName('li').length;i++){
    //     document.getElementsByTagName('li')[i].style.background = 'red'; 
    // }
    /*选取第一个元素 :first 
        $('li:first').css('background','red')
    */
    /* 选取最后一个元素 :last 
        $('li:last').css('background','red')
    */
    /* 排除指定元素之外的所有元素 :not(selector) */
    /* $('li:not(".feiji")').css('background','red') */
    /* 
        选取索引是偶数的所有元素(index0开始) :even 0也是偶数
    */
    // $('li:even').css('background','red')

    /* 选取索引是奇数的所有元素(index0开始) :odd */
    // $('li:odd').css('background','red')

    /* 选取索引等于index的元素(index0开始):eq(index) */
    // $('li:eq(3)').css('background','red')

    /* 选取索引大于index的元素(index0开始):gt(index) */
    // $('li:gt(2)').css('background','red')

    /* 选取索引小于index的元素(index0开始) */
    // $('li:lt(4)').css('background','red')

    /* 选取所有标题元素,如h1~h6 :header */
    // $(':header').css('background','red')

    /* 选取当前获取焦点的元素 :focus */
    // $('input').click(function(){
    //     $('input:focus').css('background','red')
    
    

使用可见性过滤器选择器

            /* 写一个按钮 使用可见性过滤器 实现 点击 让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') );