<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>层级选择器</title>

        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

        <script src="../../js/jquery-1.8.3.js"></script>

        <script>

            $(function(){

                $("#btn1").click(function(){

                    $("body div").css("background-color","gold");

                });

                $("#btn2").click(function(){

                    $("body>div").css("background-color","gold");

                })

                $("#btn3").click(function(){

                    $("#two+div").css("background-color","gold");

                })

                $("#btn4").click(function(){

                    $("#one~div").css("background-color","gold");

                });

            })

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="选择body中的所有的div元素"/>

        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>

        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>

        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

        <hr/>

        <div id="one">

            <div class="mini">

                111

            </div>

        </div>

        <div id="two">

            <div class="mini">

                222

            </div>

            <div class="mini">

                333

            </div>

        </div>

        <div id="three">

            <div class="mini">

                444

            </div>

            <div class="mini">

                555

            </div>

            <div class="mini">

                666

            </div>

        </div>

        <span id="four">

        </span>

    </body>

</html>

style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

form div { margin:5px 0;}

.int label { float:left; width:100px; text-align:right;}

.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

.sub { padding-left:100px;}

.sub input { margin-right:10px; }

.formtips{width: 200px;margin:2px;padding:2px;}

.onError{

    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;

    padding-left:25px;

}

.onSuccess{

    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;

    padding-left:25px;

}

.high{

    color:red;

}

  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;

  }

table        { border:0;border-collapse:collapse;}

td    { font:normal 12px/17px Arial;padding:2px;width:100px;}

th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}

.even        { background:#FFF38F;}  /* 偶数行样式*/

.odd        { background:#FFFFEE;}  /* 奇数行样式*/

.selected        { background:#FF6500;color:#fff;}

Jquery操作层级选择器的更多相关文章

  1. Jquery操作属性选择器

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

  2. jQuery的层级选择器

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

  3. jquery div层级选择器

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

  4. JQuery操作基本选择器

    <body> <input type="button" id="btn1" value="选择为one的元素"/> ...

  5. jquery 操作css 选择器

    .addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...

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

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

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

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

  8. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  9. Jquery框架1.选择器|效果图|属性、文档操作

    1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Scrapy用pipelines把字典保存为csv格式

    import csv class MyProjectPipeline(object): # 保存为csv格式 def __init__(self): # 打开文件,指定方式为写,利用第3个参数把csv ...

  2. V4L2学习（四）VIVI分析

    vivi 相对于后面要分析的 usb 摄像头驱动程序,它没有真正的硬件相关层的操作,也就是说抛开了复杂的 usb 层的相关知识,便于理解 V4L2 驱动框架,侧重于驱动和应用的交互. 前面我们提到,V ...

  3. LA_3942 LA_4670 从字典树到AC自动机

    首先看第一题,一道DP+字典树的题目,具体中文题意和题解见训练指南209页. 初看这题模型还很难想,看过蓝书提示之后发现,这实际上是一个标准DP题目:通过数组来储存后缀节点的出现次数.也就是用一颗字典 ...

  4. xgboost原理总结和代码展示

    关于xgboost的学习推荐两篇博客,每篇看2遍,我都能看懂,你肯定没问题 两篇方法互通,知识点互补!记录下来,方便以后查看 第一篇:作者:milter链接:https://www.jianshu.c ...

  5. 03012_会话技术Cookie&Session

    1.会话技术简介 (1)存储客户端的技术 网站的购物系统,用户将购买的商品信息存储到哪里?因为Http协议是无状态的,也就是说每个客户访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术识 ...

  6. 矩阵儿快速幂 - POJ 3233 矩阵力量系列

    不要管上面的标题的bug 那是幂的意思,不是力量... POJ 3233 Matrix Power Series 描述 Given a n × n matrix A and a positive in ...

  7. MFC深入浅出读书笔记第三部分1

    第八章 Document-View 深入探讨(总结) 1.Document Document 在MFC 的CDocument 里头被具体化.CDocument 本身并无任何具体数据,它只是提供一个空壳 ...

  8. 嵌入式之download

    ISP ISP(In-System Programming)在系统可编程,指电路板上的空白器件可以编程写入最终用户代码, 而不需要从电路板上取下器件,已经编程的器件也可以用ISP方式擦除或再编程.IS ...

  9. Android版本对应的API号

    Android版本 API 级别 1.5 API 3 1.6 API 4 2.1 API 7 2.2 API 8 2.3.3 API 10 3.0 API 11 3.1 API 12 3.2 API ...

  10. 爬虫：Scrapy6 - Item Loaders

    Item Loaders 提供了一种便捷的方式填充抓取到的:Items.虽然 Items 可以使用自带的类字典形式的 API 填充,但是 Item Loaders 提供了更便捷的 API,可以分析原始 ...