第一个：　

　　１：空格表示所有　　

　　２：＞　第一层　

　　３：＋／～　同级

　　　　＋：之后的第一个元素

　　　　～：之后所有同级

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. YUV422/YUV420播放

    YUV播放器,directX,VS2008 MFC完成  CSDN下载 http://download.csdn.net/detail/xjt1988xjt/2386621#comment 默认是播放 ...

  2. 创建MySQL用户 赋予某指定库表的权限 flush privileges才能生效！！！！;@'localhost'授权本地，@'%'授权远程

    update ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value 建议使用GRANT语句进行授权,语句如下: gra ...

  3. Linux有问必答：怎样解决“XXX is not in the sudoers file”错误

    问题:我想在我的Linux系统上使用sudo来运行一些特权命令,然而当我试图这么做时,我却得到了"[我的用户名] is not in the sudoers file. This incid ...

  4. DevExpress打印功能 z

    一.打印功能说明: 打印功能,我们有多种实现方式,可以根据需要自行选择,我简单的总结下两种方法. (1).使用微软.net框架自带的PrintDocument,这种方式是直接借助Graphics,自行 ...

  5. Dubbo 通过Spring 配置具体启动服务

    dubbo 服务的启动加载过程,请先看 : http://www.cnblogs.com/ghj1976/p/5316126.html  以 dubbo-demo-provider-2.5.4-SNA ...

  6. Dubbo 应用容器

    Dubbo的容器模块,是一个独立的容器,因为服务通常不需要Tomcat/JBoss等Web容器的特性,没必要用Web容器去加载服务. 服务容器只是一个简单的Main方法,并加载一个简单的Spring容 ...

  7. [kuangbin带你飞]专题十二 基础DP1

            ID Origin Title   167 / 465 Problem A HDU 1024 Max Sum Plus Plus   234 / 372 Problem B HDU 1 ...

  8. Inno Setup设置NT服务

    原文地址:http://stackoverflow.com/questions/16922272/unknown-identifier-and-wpselectdir // Variables Glo ...

  9. (DP)MaxSubArr

    public static int MSA(int[] ar) { int[] arr = new int[ar.length]; int msa = 0; arr[0] = ar[0]; for ( ...

  10. MFC学习 修改窗口样式

    1. 在PreCreateWindow中可用CREATESTRUCT cs, cs.lpszName修改窗口标题, cs.lpszClass = AfxRegisterWndClass 修改图标与样式 ...