第一个：　

　　１：空格表示所有　　

　　２：＞　第一层　

　　３：＋／～　同级

　　　　＋：之后的第一个元素

　　　　～：之后所有同级

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. SDcard进行文件的读取

    平时我们需要在手机上面存储想音频,视频等等的大文件,以前学过使用File进行存储(使用File操作进行存储):由于考虑到手机本身的存储空间小,这时候我们需要把文件存储在SDcard中,今天自己也学习了 ...

  2. rpm 与压缩解压缩

    rpm包redhat package manager 逐渐地被linux发行版本使用的安装包 rpm -qa 查询所有linux中安装了那些rpm包 rpm -q mysql 查看mysql 包的信息 ...

  3. Zend Guard Run-time support missing问题的解决

    Zend Guard不仅可以实现对PHP应用的脚本进行加密保护和对PHP应用的产品进行商业许可证管理,还可以为许多软件生产商.IT服务提供商提供完善的加密和安全的产品发布系统. 虽然现在可以成功加密p ...

  4. 如何让div水平居中

    代码实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. Rstudio匹配中文

    之前在操作csv文件时一般是将中文字符在excel或用Perl将其中的中文转换成对应的英文,但是最近碰到不得不在R里面进行中文符操作,发现R里面的匹配是无法识别的中文符的.比如: df <- r ...

  6. ICE安装

    第一步,基于Windows下的安装,所以下载windows版的Ice: http://www.zeroc.com/download       第二步,安装Ice: 常规安装即可,可以选择安装目录,本 ...

  7. Liferay中actionURL能够执行后台方法 ，但是页面不跳转问题解决方案

    在学习liferay的过程中,遇到了这么一个问题,actionURL能够执行后台方法 ,但是页面不跳转,以下是两种解决方案: 方案1(不推荐此种办法): 强制将页面重定向. 在actionURL执行的 ...

  8. C++学习45 流成员函数put输出单个字符 cin输入流详解 get()函数读入一个字符

    在程序中一般用cout和插入运算符“<<”实现输出,cout流在内存中有相应的缓冲区.有时用户还有特殊的输出要求,例如只输出一个字符.ostream类除了提供上面介绍过的用于格式控制的成员 ...

  9. 【原】linux系统运维工具必备

    操作系统:CentOS※,Ubuntu 网站服务:apache,nginx※,tomcat,tengine 开发语言:php,python※,shell※ 数据库 :Mysql※ 代理相关:lvs,k ...

  10. IntelliJ IDEA设置字符编码为UTF-8

    File->Settings->Editor->File Encodings IDE Encoding: UTF-8 Project Encoding: UTF-8