第一个：　

　　１：空格表示所有　　

　　２：＞　第一层　

　　３：＋／～　同级

　　　　＋：之后的第一个元素

　　　　～：之后所有同级

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. 纯HTML页面为了避免频繁前后台Ajax交互方案

    需求: 看这么一个简单的界面. 它有很多下拉框,下拉框中的可选项并不是固定不变的. 由于页面是静态HTML页面,不能使用后台JSP动态生成. 之前的解决方案是,页面打开后使用多个Ajax请求,获取下拉 ...

  2. 为何你的php代码没有写结束标签

    PHP闭合标签"?>"在PHP中对PHP的分析器是可选的.但是,如果使用闭合标签,任何由开发者,用户, 或者FTP应用程序插入闭合标签后面的空格都有可能会引起多余的输出.ph ...

  3. Java SE 第十一讲----面向对象特征之封装2

    1.如果一个类包含了属性跟方法,那么该类的每一个对象都具有自己的属性,但无乱一个类有多少个对象,这些对象共享同一个方法. 2.关于方法参数传递的总结: 对于Java中的方法参数传递,无论传递的是原生数 ...

  4. protoc的protoc-gen-grpc-java插件

    编译 protoc-gen-grpc-java插件 的文档在: https://github.com/grpc/grpc-java/tree/master/compiler  编译的步骤: Chang ...

  5. jQuery.loadTemplate客户端模板

    jQuery.Template虽然用起来没有Mustache简洁和方便,还是学习了解一下,做个笔记. 模板可以定义在页面script标签,如下 <script type="text/h ...

  6. pymongo带认证连接mongo

    import pymongo connection = pymongo.MongoClient("127.0.0.1") connection.database.authentic ...

  7. [ZOJ 1005] Jugs (dfs倒水问题)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5 题目大意:给你6种操作,3个数a,b,n,代表我有两个杯子,第一个杯 ...

  8. JDBC建立/关闭数据库连接

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  9. Grunt 之 watch 和 livereload

    现在 watch 中已经集成了 livereload ,所以把它们放在一起说明. watch 可以监控特定的文件,在添加文件.修改文件.或者删除文件的时候自动执行自定义的任务,比如 livereloa ...

  10. DFS

    HDU1181  http://acm.hdu.edu.cn/showproblem.php?pid=1181 #include<stdio.h> #include<algorith ...