<!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. background:transparent的作用

    background的属性值 background : background-color | background-image | background-repeat | background-att ...

  2. xcode7的那些坑－“Your binary is not optimized for iPhone 5” (ITMS-90096) when submitting

    用Xcode7向App Store提交二进制文件是,提示ERROR ITMS-90096:"You binary is not optimized for iPhone 5...." ...

  3. [RVM is not a function] Interating RVM with gnome-terminal

    Ubuntu 12.04 64bit LTS, running the 'rvm use 1.9.3' brings the 'RVM is not a function' warning. Here ...

  4. iOS初级数据持久化 沙盒机制 归档与反归档

    数据持久化就是数据保存成文件,存储到程序中的沙盒中. 沙盒构成 Document 存储用户数据,需要备份的信息 Caches 缓存文件, 程序专用的支持文件 Temp 临时文件 通过代码查找程序沙盒的 ...

  5. synchronized锁自旋2

    http://www.infoq.com/cn/articles/java-se-16-synchronized 1 引言 在多线程并发编程中Synchronized一直是元老级角色,很多人都会称呼它 ...

  6. POJ 1028题目描述

    Description Standard web browsers contain features to move backward and forward among the pages rece ...

  7. zabbix配置发送报警邮件

    配置邮件分为两种情况: 第一种:使用远端邮件服务器发送报警邮件 Linux系统版本:CentOS6.5-64 下载mailx: http://nchc.dl.sourceforge.net/proje ...

  8. 详解OpenGL中的各种变换（投影变换，模型变换，视图变换）（完）——法线变换

    前面两节内容已经说完了所有的三种变换.也就是说我们现在程序里面既不需要glLookAt(),也不需要gluPerspective(),这些矩阵我们都可以自己写.然后,再用glMultMatrix()来 ...

  9. python深复制和浅复制

    深复制:一个更改后不会影响到其他的变量,另一个变量B赋值给变量A时,虽然A和B的内存空间仍然相同,但当A的值发生变化时,会重新给A分配空间,A和B的地址变得不再相同 浅复制:改变一个就会引起另一个的改 ...

  10. Linux 中的零拷贝技术，第 2 部分

    技术实现 本系列由两篇文章组成,介绍了当前用于 Linux 操作系统上的几种零拷贝技术,简单描述了各种零拷贝技术的实现,以及它们的特点和适用场景.第一部分主要介绍了一些零拷贝技术的相关背景知识,简要概 ...