zoukankan      html  css  js  c++  java
  • jQuery常用的层次选择器

    常用层次选择器

    儿子

    手机品牌

    • 苹果
    • 华为
    • vivo

    电脑品牌

    • 苹果
    • 联想
    • 戴尔

    销量排行

    1. vivo
    2. 苹果
    3. 华为
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>常用层次选择器</title>
        <script src="scripts/jquery-3.1.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                //选择ul下的所有的li
                //var $li = $("ul li");
                //alert($li.length);
                //alert($li.html());
    
                /*for(var i=0;i<$li.length;i++){
                    var li = $li[i];
                    alert(li.innerHTML);
                }*/
                //s1>s2  s1匹配的元素下的匹配的s2 只找第一个 不找后面的
                /*var $h3 = $("body>h3");
                alert($h3.length);*/
                //pre+next紧接在h3后面的ul
                /*var $ul = $("h3+ul");
                alert($ul.length);*/
                //pre~全部的 重复的默认算一次
                var $all = $("h3~ul");
                alert($all.length);
            });
    
        </script>
    </head>
    <body>
        <h3>儿子</h3>
        <div>
            <div>
                <h3>手机品牌</h3>
                <ul>
                    <li>苹果</li>
                    <li>华为</li>
                    <li>vivo</li>
                </ul>
                <h3>电脑品牌</h3>
                <ul>
                    <li>苹果</li>
                    <li>联想</li>
                    <li>戴尔</li>
                </ul>
            </div>
            <div>
                <h3>销量排行</h3>
                <ol>
                    <li>vivo</li>
                    <li>苹果</li>
                    <li>华为</li>
    
                </ol>
            </div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    Iconfont在Vue中的使用
    yarn安装依赖报错
    动漫
    伤痛的魅力。绷带男子特辑
    记STM32F103C8T6+STLINK下载器在Keil中的设置
    JQuery浮动对象插件
    树莓派RTL8723BU_LINUX驱动安装
    python虚拟环境相关设置备忘
    解决树莓派控制台命令行乱码
    python模块wifi使用小记
  • 原文地址:https://www.cnblogs.com/john568300/p/6420948.html
Copyright © 2011-2022 走看看