<!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. C++ 简易时间类

    .h file #ifndef LIBFRAME_DATETIME_H_ #define LIBFRAME_DATETIME_H_ #include <stdint.h> #include ...

  2. Processes vs Threads

    A process is an executing instance of an application. What does that mean? Well, for example, when y ...

  3. MVC强类型和弱类型的区别

    1 强类型的处理 首先必须要有一个对象的实体类,UserINfo就是一个实体类,如下: public class UserInfo() { public  int Id{set;get;} publi ...

  4. 实践JAVA wait(), notify(),sleep方法--一道多线程的面试题

    建立三个线程,A线程打印10次A,B线程打印10次B,C线程打印10次C,要求线程同时运行,交替打印10次ABC. 这个问题用Object的wait(),notify()就可以很方便的解决. publ ...

  5. SqlServer基础：IsNull

    SELECT  @temp = ISNULL(point, 0) FROM   dbo.User where Nid=6 如果User表中的point字段为null的话,则对@temp赋值0

  6. AES对称加密算法原理

    原著:James McCaffrey 翻译:小刀人 原文出处:MSDN Magazine November 2003 (Encrypt It) 本文的代码下载:msdnmag200311AES.exe ...

  7. PISA

    http://www.oecd.org/pisa/ 国际学生评估 PISA类测试:一种国际性的科学的评价方法,可强化对考生知识面.综合分析.创新素养方面的考查. 评估内容 第一次PISA评估于2000 ...

  8. RabbitMQ学习总结 第二篇：快速入门HelloWorld

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

  9. 初涉MySQL

    本文要点: MySQL基础 安装MySQL 配置MySQL 使用MYSQL 一.MySQL基础 MySQL 由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一个开源的关系型数据 ...

  10. ISymbol

    public void Draw (IGeometry Geometry); public void QueryBoundary (     int hDC,     ITransformation ...