<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

        <script>

            window.onload = function(){

                document.getElementById('btnok').onclick = function(){

                    //1.通过匹配div1的所有span后代元素

                    //$('.div1 span').html('test');

                    //2.匹配div元素的所有span元素

                    //$('div > span').html('test');

                    //3.匹配div紧邻的div元素

                    //$('.div1 + div').html('test');

                    //4.匹配div1紧邻的所有div元素

                    $('.div1 ~ div').html('test');

                }

            }

        </script>

    </head>

    <body>

        <input type="button" id="btnok" value="匹配" />

        <hr />

        <div class="div1">

            <span>第一个span标签噢</span>

            <div>

                <span>span元素，第一个div元素的后代元素</span>

            </div>

        </div>

        <div class="div2">

            <span>第二个div的子元素</span>

        </div>

        <div class="div3">div3</div>

    </body>

</html>

夺命雷公狗jquery---2层级选择器的更多相关文章

  1. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  2. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  3. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  5. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  7. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  10. 夺命雷公狗-----React---3--标签的规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. php--分享插件

    分享插件地址:   http://www.jiathis.com/

  2. Java进制转换

    其他转10进制 System.out.println(Integer.parseInt("10", 2));// bin System.out.println(Integer.pa ...

  3. ios UIPickerView 技巧集锦（包括循环滚动）

    摘自: http://blog.csdn.net/ipromiseu/article/details/7436521 http://www.cnblogs.com/dabaopku/archive/2 ...

  4. imx6 system boot

    imx6开机启动就进入download模式,有的板子进入文件系统之后会进入download模式.查看datasheet,Chapter 8 System Boot查找原因,记录于此. freescal ...

  5. iOS Architecture和Valid architectures

    目前ios的指令集有以下几种: 1,armv6,支持的机器iPhone,iPhone2,iPhone3G及对应的iTouch 2,armv7,支持的机器iPhone4,iPhone4S 3,armv7 ...

  6. RabbitMQ学习总结 第四篇：发布/订阅 Publish/Subscribe

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  7. Power-BI 仪表盘实现动态预警

    BI系统中仪表盘“序列”中的“预警”属性可以手工填入固定的值,也可从数据集里取值设定预警范围 ,以实现动态预警.其中的“范围”属性手工输入固定值应该为百分比(0-1),而在下拉选择绑定列为值是为数值. ...

  8. Visual Studio 2013发布网站

  9. css实现元素居中

     参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...

  10. 为Virtual Studio Code配置Python调试插件（Ubuntu14.04）

    详情见以下python for virtual studio code插件的链接: python 安装依赖 1.Python is installed on the current system Pa ...