<!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. java中的trim()

    trim():去掉字符串首尾的空格.但该方法并不仅仅是去除空格,它能够去除从编码'\u0000′ 至 '\u0020′ 的所有字符. 回车换行也在这20个字符 例1: public static vo ...

  2. MongoDB上的索引

    1. 将索引建在number键上名为nameIndex并且为正序索引({number:-1}为倒序索引) 如: db.list名.ensureIndex({number:1},{name:" ...

  3. http请求及模拟浏览器发送http请求

    /**    *测试新增图片   * @throws IOException    * @throws HttpException    * @throws SAXException    * @th ...

  4. [开源]STM32F103RBT6最小系统，LEDx2，KEYx4

    STM32F103RBT6最小系统,调试通过,可以SWD模式下载程序,支持串口,一键下载. stm32f103rbt6最小系统链接:http://pan.baidu.com/s/1qYCHeHY 密码 ...

  5. http://blinkfox.com/shi-yong-spring-aoplai-tong-ji-fang-fa-de-zhi-xing-shi-jian/

    http://blinkfox.com/shi-yong-spring-aoplai-tong-ji-fang-fa-de-zhi-xing-shi-jian/ spring-aop.xml @Com ...

  6. js的运算

    1.表达式 表达式是EMCAscript中的一个“短语”,解释器会通过计算把它转换成一个值.最简单的表达式是字面量或者变量名. 2.前置递增(++box)和后置递增(box++)的区别 看下面一段代码 ...

  7. asm/aam links

    http://personalpages.manchester.ac.uk/staff/timothy.f.cootes/asm_links.html

  8. saltstack之(十)扩展组件salt-ssh

    场景:公司有50台服务器,需要安装salt-minion客户端,并完成与salt-master的认证,接受salt-master的管理.本片文章只用了2台服务器做演示,大家可以在roster文件中定义 ...

  9. 深入SQL截取字符串(substring与patindex)的详解

    首先学习两个函数1.substring  返回字符.binary.text 或 image 表达式的一部分.基本语法:SUBSTRING ( expression , start , length ) ...

  10. Android中读取短信信息

    Android中读取的短信文件有 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /**  * 所有的短信  */ public static final Strin ...