<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

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

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

        <script>

            $(function(){

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

                    $("div[id]").css("background-color","red");

                });

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

                    $("div[id='two']").css("background-color","red");

                });

            });

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="选择有id属性的div"/>

        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

        <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:;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 操作属性

    jQuery 操作属性 我们来看看jQuery 操作属性都有哪些???? 属性 css代码!! html代码!! jQuery代码!! 下面做一个小例子 小例子html的代码 小例子jQuery的代码 ...

  2. jQuery学习-属性选择器

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

  3. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  4. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

  5. jQuery操作属性和样式详解

    我们可以使用 javascript 中的getAttribute和setAttribute来操作元素的"元素属性".在 jQuery 中给你提供了attr()包装集函数, 能够同时 ...

  6. jquery操作属性 attr()和 prop()兼容性问题

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  7. Jquery操作属性

    1.attr(name,value):修改单个属性! name :属性名称 value:属性的值 <script> $(function(){ //给div添加一个alt=hello的属性 ...

  8. jquery 操作css 选择器

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

  9. Jquery操作层级选择器

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

随机推荐

  1. [EXCEL]使用技巧随记

    1.比对两列中是否有重复项(B列中是否和A列重复) =IF(COUNTIF(A:A,B1)=0,"不重复","重复") Excel中用vlookup函数来对比两 ...

  2. windows上php环境下memcache和mongodb的安装

    mangodb安装 1. 下载mongodb的安装文件,我安装的windows 64位的,下载地址如下: https://fastdl.mongodb.org/win32/mongodb-win32- ...

  3. 关于windows10设置环境变量的问题

    在设置环境变量的时候往往在网上能找到这样的文章: 1:新建环境变量 2:将新增的环境变量 加到path 变量中: 3.由于有的小伙伴的 系统是 windows10 在点击 编辑path 环境变量的时候 ...

  4. 【转载】Unity3D研究院之IOS自定义游戏摇杆与飞机平滑的移动

    移动开发游戏中使用到的触摸游戏摇杆在iPhone上是非常普遍的,毕竟是全触摸屏手机,今天MOMO 通过一个小例子和大家讨论Unity3D 中如何自定义一个漂亮的全触摸游戏摇杆.        值得高兴 ...

  5. NOIP2018 集训(一)

    A题 Simple 时间限制:1000ms | 空间限制:256MB 问题描述 对于给定正整数\(n,m\),我们称正整数\(c\)为好的,当且仅当存在非负整数\(x,y\)使得\(n×x+m×y=c ...

  6. 容器基础(二): 使用Namespace进行边界隔离

    Linux Namespace 容器技术可以认为是一种沙盒(sandbox), 为了实现沙盒/容器/应用间的隔离,就需要一种技术来对容器界定边界,从而让容器不至于互相干扰.当前使用的技术就是Names ...

  7. 【多线程学习（2）】继承Thread类和实现Runnable接口、Callable接口的区别

    1)Runnable和Callable同是接口 * Callable的任务执行后可返回值,而Runnable的任务是不能返回值(是void);call方法可以抛出异常,run方法不可以 * 运行Cal ...

  8. CSS3的笔记总结

    css3  就是css2 的一个升级版本.css2 是用来做效果渲染的,而css3 可以使做出来的效果更佳丰富. C3有兼容性问题,移动端支持稍微要好些.       坚持以下原则:         ...

  9. 手机App测试如何获取包名的入口【两种方式】

    在进行手机APP测试的时候经常要获取包名.那么何为包名呢?简单来说其实就是手机APP的安装apk文件的名称,每个手机APP(软件)的包名都是唯一的. 那么我们怎样来获取包名以及包名的入口呢? 方法一: ...

  10. python 读取consul配置

    自动化通过rcp client调用远端服务接口时,都需要将远端测试服务ip.端口记录在配置文件. 但由于,服务发布或重启会导致ip.端口变动. 以下将通过python-consul 自动去读取cons ...