<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }

            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }

            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function(){

                $("#btn1").click(function(){
                    $("body div").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    $("body > div").css("background", "#ffbbaa");
                });
                $("#btn3").click(function(){
                    $("#one + div").css("background", "#ffbbaa");
                });

                $("#btn4").click(function(){
                    $("#two ~ div").css("background", "#ffbbaa");
                });
                $("#btn5").click(function(){
                    $("#two").siblings("div").css("background", "#ffbbaa");
                });
                $("#btn6").click(function(){
                    //以下选择器选择的是近邻 #one 的 span 元素, 若该span
                    //和 #one 不相邻, 选择器无效.
                    //$("#one + span").css("background", "#ffbbaa");
                    $("#one").nextAll("span:first").css("background", "#ffbbaa");
                });
                $("#btn7").click(function(){
                    $("#two").prevAll("div").css("background", "#ffbbaa");
                });

            })

        </script>
    </head>
    <body>
        <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
        <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
        <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
        <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
        <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
        <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
        <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />

        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
        <span id="span">--span元素--</span>
    </body>
</html>

jQuery选择器(层级选择器)第二节的更多相关文章

  1. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  2. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery的层级选择器

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  4. jquery div层级选择器

    div id="modelName" class="modelName"> <!-- 车系的层 --> <div name=" ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. Jquery 之 使用选择器

    jQuery选择器描述 jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的.jQuery 选择器采用CSS ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

    jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   jQuery是继prototype ...

  9. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

随机推荐

  1. Rundeck部署和基本使用

    rundeck 介绍 Rundeck 是一款能在数据中心或云环境中的日常业务中使程序自动化的开源软件.Rundeck 提供了大量功能,可以减轻耗时繁重的体力劳动.团队可以相互协作,分享如何过程自动化, ...

  2. Android在 普通类（非Activity，多数为Adapter） 中 传输数据为空值 解决方法 ：在startActivity 用 intent传输数据

    这是bundle是传输不了数据的,获取到 出现这种情况的原因是非activity类中不存在Context,而在活动中传输数据时需要Context. 我收集到了两种解决方法. 1. 在调用该Adapte ...

  3. TCO之旅

    TCO之旅 时间限制: 1 Sec  内存限制: 128 MB提交: 77  解决: 24[提交][状态][讨论版] 题目描述 我们的小强终于实现了他TCO的梦想了,爬进了TCO的全球总决赛,开始了他 ...

  4. django集成celery之callback方式link_error和on_failure

    在使用django集成celery进行了异步调度任务之后,如果想对失败的任务进行跟踪或者告警,怎么做? 这里提供一个亲测的方法. 1.任务callback 假如你想在任务执行失败的时候,打印错误信息并 ...

  5. 接口自动化测试方案PHP + mysql

    接口测试在测试工作中是很常见的工作,但是在以往的接口测试工作中借助的一般是第三方插件.python开发的发送请求脚本.LR脚本.Jmeter脚本,之前也使用python开发了一套接口自动化测试系统,但 ...

  6. C＃命令行解析工具

    我将告诉大家两个方法去获取C#输入的命令行参数. 第一个方法: 林选臣大神写的,他的方法很简单. 首先复制两个类到项目 public class CommandLineArgumentParser { ...

  7. visio移动形状 上下左右键 移动滚动条

    今天在用visio写作业,想微移visio的形状,于是按上下左右方向键,结果移动的是滚动条. 那么如何让visio按上下左右移动的是形状,其实按Scroll键就好了.

  8. uva242，Stamps and Envelope Size

    这题紫薯上翻译错了 应该是:如果有多个并列,输出邮票种类最少的那个,如果还有并列,输出最大面值最小的那个 坑了我一个下午 dp[p][q]==1表示可以用不超过q张组成面额p 结合记忆化,p从1开始枚 ...

  9. linux 投影仪

    注:文章转自http://goo.gl/aI9Ycd如果侵权,请原作者留言,立即删除 之前在 R219 做 C++ 演講的時候,發現 Ubuntu 沒有辦法使用 VGA 輸出,臨時改用 Windows ...

  10. LINUX 笔记之常用打包压缩命令

    1.将所有.jpg文件打成一个名为all.tar的包 tar -cf all.tar *.gif 2.将所有.gif文件追加到all.tar tar -rf all.tar *.gif 3.更新原来t ...