第一个：　

　　１：空格表示所有　　

　　２：＞　第一层　

　　３：＋／～　同级

　　　　＋：之后的第一个元素

　　　　～：之后所有同级

d

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

 <script type="text/javascript">

 $(document).ready(function(){

     $("form input").css("color", "red");  //给form元素的后代input元素设置字体颜色

     $("div>div").css("background", "#FCF");  //给maindiv下的子元素div1和div2设置背景颜色

     $("div~input").css("border", "2px solid blue");  //给div元素后面的所有input元素设置边框

     $("div+input").css("border", "2px solid red");  //给紧跟在div元素后的input元素设置边框

  });

 </script>

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

 </head>

 <body>

    <form id="form1">

        <label>form元素的后代input元素为:input1, input2, input3</label>

        <input type="text" id="input1" value="文本框1" />

        <div id="maindiv">

           <div id="div1">maindiv的子元素:id为div1</div>

           <div id="div2">maindiv的子元素:id为div2</div>

        </div>

        <input type="text" id="input2" value="文本框2" />

        <input type="text" id="input3" value="文本框3" /><br />

        <label>maindiv的所有子元素为:div1, div2</label>

    </form>

 </body>

 </html>

　　

jQuery层级元素选择器的更多相关文章

  1. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一个样例看清楚JQuery子元素选择器children()和find()的差别

    近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...

  3. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

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

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

  5. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  6. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  7. jquery 元素选择器

    id选择器 JQuery 能使用CSS选择器来操作网页中的标签元素.如果想要通过一个id号去查找另一个元素就可以使用下面格式的选择 $('#my_id') 其中my_id表示根据id选择器获取页面中的 ...

  8. jquery中判断选择器，找没找到元素用$().size()==0

    jquery中判断选择器,找没找到元素用$().size()==0

  9. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

随机推荐

  1. 转--C++学习笔记（原创）

    http://www.cnblogs.com/maowang1991/p/3290321.html 以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读 ...

  2. Java中的String与常量池

    string是java中的字符串.String类是不可变的,对String类的任何改变,都是返回一个新的String类对象.下面介绍java中的String与常量池. 1. 首先String不属于8种 ...

  3. systick优先级的理解

    sysTick系统嘀嗒定时器并非STM32独有的,它是Cortex内核的部分,CM3为它专门开出一个异常类型,并且在中断向量表中占有一席之地(异常号15).这样它可以很方便的移植到不同厂商出CM3内核 ...

  4. db2删除数据库

    1.断开所有连接  db2 stop application all   force 2.停止数据库    db2stop 3.删除数据库(系统管理员权限下)db2 drop  数据库name

  5. ibatis插入数据后返回自增长的主键

    insert into testTable ( activity_id,activity_title values ( #{activityId,jdbcType=INTEGER}, #{activi ...

  6. Java注解教程及自定义注解

    Java注解提供了关于代码的一些信息,但并不直接作用于它所注解的代码内容.在这个教程当中,我们将学习Java的注解,如何定制注解,注解的使用以及如何通过反射解析注解. Java1.5引入了注解,当前许 ...

  7. testng.xml创建及解析

    项目右键---TestNG -----> Convert to TestNG 会自动产生一个testng.xml的文件 http://www.cnblogs.com/choosewang/art ...

  8. http.StripPrefix 的参数含义

    看下面两行代码: http.Handle("/file/", http.StripPrefix("/file", http.FileServer(http.Di ...

  9. django 获取系统当前时间 和linux 系统当前时间不一致 问题处理。

    问题场景: 在django admin models 实体对象添加一个属性最后修改时间,用户在添加.修改是系统自动修改操作时间. UpdateTime自动获取系统时间.并且自动修改. 代码设置如下. ...

  10. Find the Clones（字典树）

    链接:http://poj.org/problem?id=2945 Description Doubleville, a small town in Texas, was attacked by th ...