第一个：　

　　１：空格表示所有　　

　　２：＞　第一层　

　　３：＋／～　同级

　　　　＋：之后的第一个元素

　　　　～：之后所有同级

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. jquery.form.js详细讲解

    现在大家在在表单提交的时候都不流行中间页面做跳转(比如发布成功的提示页面),或者说这样做会降低用户体验.所以一般都是采用ajax来提交,能看到这个页面的朋友,想必对ajax提交表单已经是很熟悉了. 如 ...

  2. CSS如何实现数字分页效果

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

  3. CentOS修改163源（转载）

    From:http://www.linuxidc.com/Linux/2012-08/69043.htm #CentOS-Base.repo其他版本文件在http://mirrors.163.com/ ...

  4. IronPython调用C# DLL函数方法

    C# DLL源码 using System; using System.Collections.Generic; using System.Text; using System.Security.Cr ...

  5. oracle10g如何配置客户端

    http://jingyan.baidu.com/article/4d58d541c108939dd4e9c0f5.html 不行的话: 对tnsnames.ora进行编辑:ORCL = (DESCR ...

  6. bat操作数据库mysql

    createDB.bat文件内容: @echo off cd C:/Program Files/cl_ZWL_App/<a href="http://lib.csdn.net/base ...

  7. linux 多网卡 跃点数

    centos6.4 配置两块网卡,eth0设置静态IP,8网段,eth1无线配置dhcp,都是开机启动. 但是eth1无线网卡一旦连接至开放网络(需要web登陆),就替换了之前eth0配置的默认网关, ...

  8. 深入研究java.lang.ThreadLocal类

        一.概述   ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个Thread,而是threadlocalvariable(线程局部变量).也许 ...

  9. java的String类(一)

    final类,无子类. 类内定义了char数组value[],私有,不可修改. String的长度,length(). 判空,isEmpty(). 索引index处的字符,charAt(index). ...

  10. C#中char[]与string之间的转换

    string 转换成 Char[] string ss = "abcdefg"; char[] cc = ss.ToCharArray(); Char[] 转换成string st ...