js过滤 可见选择器 显示和隐藏

一：基本过滤选择器

 选取第一个元素 :first
 选取最后一个元素 :last 
 排除指定元素之外的所有元素 :not(selector) 
 选取索引是奇数的所有元素（index从0开始） :odd 
 选取索引是偶数的所有元素（index从0开始） :even 0也是偶数
选取索引等于index的元素（index从0开始）:eq(index)
选取索引大于index的元素（index从0开始）:gt(index)
选取索引小于index的元素（index从0开始）:lt(index)
选取所有标题元素，如h1~h6 :header 
选取当前获取焦点的元素 :focus 


   <div class="box">
    <!-- 使用标题过滤选择器实现 蓝色 -->
    <h1>我是标题</h1>
    <ul>
        <!-- 第一个li 颜色变红 -->
        <!-- 偶数变 #f0f0f0 -->
        <!-- 奇数变 #cccccc -->
        <!-- li 下标 0 1 2 使用lt 实现字体变 30px -->
        <!-- li 下标 3 4  使用gt 实现字体变 50px -->
        <li>我是列表0</li>
        <li>我是列表1</li>
        <li>我是列表2</li>
        <li>我是列表3</li>
        <li>我是列表4</li>
    </ul>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
    $('li:lt(3)').css('font-size','30px')
    $('li:gt(2)').css('font-size','50px')

    $('li:even').css('background','#f0f0f0')
    $('li:odd').css('background','#ccc')

    $('li:last').css('border-bottom','0')
    $('li:first').css('color','red')
    $(':header').css({background:'blue',color:'#fff'})
    
复制代码

二： show和hide

可以传参数 fast slow normal 和指定的毫秒数

       /* show(2000) 开灯 颜色变化 */
    /* 点第一次 显示 打开 显示红色div */
    /* 开点第二次 显示 打开 显示黄色div */
    /* 开点第三次 关闭 */
    let count = 1;
    $('button').click(function(){
        console.log(count);
        console.log( $('div').css('background-color') );
        if(count==1){
            $('div').css('background-color','red')
            $('div').show(1000);
            count++
            return;
        }
        if(count==2){
            $('div').css('background-color','yellow')
            count++
            return
        }
        if(count==3){
            $('div').hide(1000);
            count=1
        }
    })


    // $('button').click(function(){
    //     if( $('div').css('display')=='block' ){
    //         /* show('slow') 慢速 
    //         show('fast')  快速 也有动画效果
    //         .hide('normal') 普通 */
    //         /* 也可以设置时间 3000 3秒 必须是数字类型 */
    //         $('div').hide(3000)
    //     }else{
    //         $('div').show(3000)
    //     }
    // })
    
复制代码

三：可见性过滤选择器

    ：visible选取所有可见的
    ：hidden选取所有隐藏的
      
      
       /* 写一个按钮 使用可见性过滤器 实现 点击 让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') );
复制代码

四：选项卡

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
    console.log( $('ul').css('color') );
    let a = window.getComputedStyle(document.getElementsByTagName('ul')[0],null).color;
    console.log(a);
    // let lis = document.getElementsByTagName('li')
    // for(let i=0;i<lis.length;i++){
    //     lis[i].onclick = function(){
    //         for(let j=0;j<lis.length;j++){
    //             lis[j].style.background = ''
    //         }
    //         console.log(i);
    //         lis[i].style.background = 'red'
    //     }
    // }
    
复制代码

五：jq语法注意事项

   <!-- 特殊符号的转义 -->
<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\]') );