zoukankan      html  css  js  c++  java
  • css选择器querySelectorAll

    * querySelectorAll(css的选择器)
    * 通过css的选择器获取到的一组元素
    * 获取的也是类数组
    *
    * 主语
    * document 从整个页面去获取一组元素
    * 父级 从父级下去获取一组元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
    {#        #color>li:first-child{#}
    {#            background: #ff0000;#}
    {#        }#}
    {#        #}
    {#        #color>li:nth-child(4){#}
    {#            background: yellow;#}
    {#        }#}
        </style>
        <script>
            window.onload=function(){
                var lis=document.querySelectorAll('li');
    
                console.dir(lis);
    
                var color=document.getElementById('color');
                var lis1=color.querySelectorAll('li');
                var lis2=document.querySelectorAll('#color li');
                console.dir(lis1);
                console.dir(lis2);
    
                var lis3=document.querySelectorAll('#color ul li');
                console.dir(lis3);
                lis3[lis3.length-1].style.background='gold';
    
                var greens=document.querySelectorAll('.green');
                console.dir(greens);
                greens[0].style.background='green';
    
                var uls=document.querySelectorAll('ul');
                console.dir(uls);
                uls[2].style.background='blue';
            }
        </script>
    </head>
    <body>
    <ul id="color">
        <li>red</li>
        <li class="green">green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>
            <ul>
                <li>pink</li>
                <li>white</li>
                <li>black</li>
                <li>gold</li>
            </ul>
        </li>
    </ul>
    <ul class="color2">
        <li>red</li>
        <li class="green">green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>pink</li>
    </ul>
    </body>
    </html>
    

      

  • 相关阅读:
    ES6(四)字符串的扩展
    ES6(三)数组的扩展
    ES6(二) Destructuring-变量的解构赋值
    ES6(一) let and const
    canvas(七) 文字编写
    canvas(五)createPattern
    canvas(四) Gradient- demo
    canvas(三) star- demo
    jQuery之简单动画效果
    web开发小白之路
  • 原文地址:https://www.cnblogs.com/cqq-20151202/p/6638059.html
Copyright © 2011-2022 走看看