<!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#中集合汇总

    平时敲代码,只关注如何使用,没有深入去研究一些本质性的东西,靠死记硬背,不去真正理解,其实最后是很难记住的. 对于C#常见的集合,自己平时好像只有用到List,Dictionary,ArrayList ...

  2. job_chain

    JOB链:JOB之间的相互触发操作. 实验意图:有些JOB具有先后调用次序,比如先做一件事情,这件事情做完才能继续下一件事情,而第一个JOB如果自己挂掉的话,第二个JOB需要正常运行(默认是终止),这 ...

  3. Moogoose操作之Schema实现增删查改

    Schema不仅定义了文档结构和使用性能,可以为后面的Model和Entity提供公共的属性和方法. Schema.Model.Entity的关系: Schema : 可以定义字段类型,不具备数据库的 ...

  4. socketserve及其应用

    1.cmd命令 利用socket socket服务端 import socket import subprocess s = socket.socket() s.bind(("127.0.0 ...

  5. sqlserver 中server 函数GETDATE(),DEFAULT用法

    alter table Persons add datenow date DEFAULT GETDATE() null, datetimenow datetime DEFAULT GETDATE()n ...

  6. C++经典编程题＃6：分配病房

    总时间限制:  1000ms 内存限制:  65536kB 描述 某个科室的病房分为重症和普通,只有当病人的疾病严重程度超过了入住重症病房的最低严重值,才可以安排入住重症病房. 现在要求设计一个程序, ...

  7. dede完美分页样式

    html <div class="dede_pages">              <ul class="pagelist">     ...

  8. java版本区别

    java版本区别 点我,点我,Eclipse几个版本号的区别(part1) 点我,点我,Eclipse几个版本号的区别(part2) 点我,点我,Eclipse几个版本号的区别(part3)

  9. 如何在 Linux 中清除缓存（Cache）

              如何在 Linux 中清除缓存(Cache)            方法一: http://mp.weixin.qq.com/s?__biz=MjM5ODAzODgyMQ==&am ...

  10. 【长期有效】1分钱抢100M上网流量及iPhone5S免费抽奖

    声明:本活动经作者亲自体验,绝对真实.安全.可靠.下文中图片为手机界面截图,最终得到官方手机流量增加100M的短信通知,回家过年使用最合适! 0.点击下方活动图片,进入“百度钱包”页面,你也可以直接 ...