<!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. 9，K-近邻算法（KNN）

    导引: 如何进行电影分类 众所周知,电影可以按照题材分类,然而题材本身是如何定义的?由谁来判定某部电影属于哪 个题材?也就是说同一题材的电影具有哪些公共特征?这些都是在进行电影分类时必须要考虑的问 题 ...

  2. Maven学习 (三) 使用m2eclipse创建web项目

    1.首先确认你的eclipse已经安装好m2eclipse的环境,可以参照上两篇Maven学习内容 2.新建一个maven的项目 3.下一步默认配置,使用默认的工作空间,或者你可以自己选择其他的空间 ...

  3. CentOS 单用户模式：修改Root密码和grub加密[转]

    原文出处: http://zhengdl126.iteye.com/blog/430268 Linux 系统处于正常状态时,服务器主机开机(或重新启动)后,能够由系统引导器程序自动引导 Linux 系 ...

  4. groupSum6后向遍历

    http://codingbat.com/prob/p199368 public boolean groupSum6(int start, int[] nums, int target) { if( ...

  5. 在iis上部署asp.net mvc2.0

    mvc2.0是vs2010自带的,在开发环境下可以直接部署在iis中.在生产环境下,如果不能找到正确的mvc2.0版本,可以直接把开发环境下的System.Web.Mvc.dll拷贝过去使用. 1,  ...

  6. BFC相关知识

    一.什么是BFC css布局主要采用盒子模型(BOX),元素的类型和 display 属性,决定了 Box 的类型,常见的盒子类型有两种: block-level box:display 属性为 bl ...

  7. [OpenCV] Ptr类模板

    1．C++泛型句柄类 我们知道在包含指针成员的类中,需要特别注意类的复制控制,因为复制指针时只复制指针中的地址,而不会复制指针指向的对象.这将导致当两个指针同时指向同一对象时,很可能一个指针删除了一对 ...

  8. Linux networkmanager

    我们开发的网络,出于保密,只能叫XXX网络,或者我更倾向于称之为WTF-network 由于经常处于封闭的环境,刚一接触新一点的世界,总是有那么一点猝不及防.最近发现配置的静态路由经常消失,经发现是n ...

  9. 【bzoj5056】OI游戏 最短路+矩阵树定理

    题目描述 给出一张无向图,求满足 0号点到所有点的路径长等于原图中它们之间最短路 的生成树的个数. 输入 第一行一个整数N,代表原图结点. 接下来N行,每行N个字符,描绘了一个邻接矩阵.邻接矩阵中, ...

  10. POJ 2318 TOYS | 二分+判断点在多边形内

    题意: 给一个矩形的区域(左上角为(x1,y1) 右下角为(x2,y2)),给出n对(u,v)表示(u,y1) 和 (v,y2)构成线段将矩形切割 这样构成了n+1个多边形,再给出m个点,问每个多边形 ...