<!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. Qt窗体内控件自适应调整大小

    http://stackoverflow.com/questions/3492739/auto-expanding-layout-with-qt-designer After creating you ...

  2. 【转载】拒绝平庸——浅谈WEB登录页面设计

    用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

  3. The Shortest Path in Nya Graph---hdu4725（spfa+扩点建图）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4725  有n个点,每个点都有一个层l[i],相邻层的边有一条无向带权边,权值为都为C,另外 ...

  4. .net加载到vb 进程

    .net加载到vb 进程时,总是不能加载进去,什么原因呢? 要尝试三个步骤, 首先调试vb ,没有问题,代码能够调试 然后注册.net的dll,生成tlb文件,生成解决方案,调整附加到进程时的选项. ...

  5. 开始了ecshop

    一个多星期前开始接触ecshop,突然决定要用它来做网站,于是从网上找各种手册与视频,联系官网客服,然后知道官网一共提供三种类型的服务,一种是ecshop授权,不包含任何技术支持,第二种是易开店的标准 ...

  6. android studio 0.8.11 如何导入Library（新手向）

    网上下了个ViewPagerIndicator的库,下载下来是个zip包,解压开来,里面有一个library和一个sample文件夹,还有一些其他的配置文件. 其中library就是我们新项目中要引入 ...

  7. 学习GitHub

    学习GitHub: GitHub教程:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b00 ...

  8. 表单设置line-height，在ff中的不垂直居中问题？？？

    在ff中有时候input中的line-height,是有bug存在的,设置了line-height,发现文字并不是垂直居中. 1.这是正常现象,不需要刻意调整样式 2.以后尽量使用button,来避免 ...

  9. POJ 1032问题描述

    Description New convocation of The Fool Land's Parliament consists of N delegates. According to the ...

  10. 通过 ec2-api / boto 调用 OpenStack 功能

    通过 ec2-api / boto 调用 OpenStack 功能 OpenStack 支持 amazon ec2 的 api,并能通过 python 库 boto 来进行调用.目前,社区在把 ec2 ...