原文:http://www.cnblogs.com/bynet/archive/2009/12/01/1614405.html

本系列文章导航

jQuery-Selectors(选择器)的使用(一、基本篇)

jQuery-Selectors(选择器)的使用(二、层次篇)

jQuery-Selectors(选择器)的使用(三、简单篇)

jQuery-Selectors(选择器)的使用(四--五、内容篇&可见性篇)

jQuery-Selectors(选择器)的使用(六、属性篇)

jQuery-Selectors(选择器)的使用(七、子元素篇)

jQuery-Selectors(选择器)的使用(八、表单篇)

jQuery-Selectors(选择器)的使用(九、表单对象属性篇)

jQuery-Selectors(选择器)的使用(二、层次篇)

本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com
由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过!
您可以到jQuery官网来学习更多的有关jQuery知识。
版权所有:code-cat 博客 转载请保留出处和版权信息!

由于这篇文章中讲到的四种选择器作用范围很容易混淆,且不容易理解。我给出的四个例子还是能说明其作用范围的,并且很清晰,请读者一定仔细研究这四个实例,并作比较!把源码下载下来,试着改其中的条件,并看效果!
jQuery选择器的使用灵活度非常高,至此,您可以利用本文中的四种选择器和上一篇中所讲的选择器组合并看效果,相信你会看到足以令你震撼的结果!
1. ancestor descendant用法
定义:在给定的祖先元素下匹配所有的符合条件后代元素
返回值:Array<Element>
参数:ancestor (Selector):任何有效选择器 descendant (Selector):用以匹配元素的选择器,并且它是第一个选择器的后代元素
实例:将ID为"div_1"的DIV中所有的Input元素的背景色改为红色
代码: $("div_1 input").css("background-color","red"); //点击按钮一将执行这句代码

form ID="div_1"

DIV ID="div_2"

DIV ID="div_3"

DIV ID="div_4"

DIV ID="div_5"

DIV ID="div_5_1"

注意:本实例请与第2个用法的实例作对比,看其控制范围!

2. parent > child用法
定义:在给定的父元素下匹配所有的子元素
返回值:Array<Element>
参数:parent (Selector):任何有效选择器 child (Selector): 用以匹配元素的选择器,并且它是第一个选择器的子元素
实例:将ID为"div_a1"的DIV中所有的Input元素的背景色改为红色
代码: $("#div_a1 > input").css("background-color","red"); //点击按钮二将执行这句代码

DIV ID="div_a1"

DIV ID="div_a2"

DIV ID="div_a3"

DIV ID="div_a4"

DIV ID="div_a5"

DIV ID="div_a5_1"

3. prev + next用法
定义:匹配所有紧接在 prev 元素后的 next 元素
返回值:Array<Element>
参数:prev (Selector):任何有效选择器 next (Selector):一个有效选择器并且紧接着第一个选择器
实例:将ID为"div_b1"的DIV中所有span元素后紧跟的input元素的背景色改为红色
代码:$("#div_b1 span + input").css("background-color","red"); //点击按钮三将执行这句代码

DIV ID="div_b1"
 
span

DIV ID="div_b2"
span

DIV ID="div_b3"
span

DIV ID="div_b4"

span

DIV ID="div_b5"

DIV ID="div_b5_1"
span

注意:第一个选择器我用了ancestor descendant用法,您也可以尝试其它用法。本例请与下面第4点的实例作对比并看效果!

4. prev ~ siblings用法
定义:匹配 prev 元素之后的所有 siblings 元素
返回值:Array<Element>
参数:prev (Selector):任何有效选择器 siblings (Selector):一个选择器,并且它作为第一个选择器的同辈
实例:将ID为"div_c1"的DIV中所有与span元素之后平级的input元素的背景色改为红色
代码:$("#div_c1 span ~ input").css("background-color","red"); //点击按钮四将执行这句代码

DIV ID="div_c1"
 span

DIV ID="div_c2"
span

DIV ID="div_c3"
span

DIV ID="div_c4"

span

DIV ID="div_c5"

DIV ID="div_c5_1"
span

注意:DIV ID="div_c1" 和 ID="div_c4"中的span元素前的input并未改变背景色,因为第二个选择器查找第一个选择器之后的元素

   
   您可以下载这篇文章的HTML源码:download

jQuery-Selectors(选择器)的使用(二、层次篇)(转载)的更多相关文章

  1. jQuery基本选择器模块(二)

    选择器模块 1.push方法的兼容性(了解) 问题:IE8不支持aplly方法中的第二个参数是 伪数组 目标:实现 push 方法的浏览器兼容性问题 var push = [].push; try { ...

  2. JQuery之选择器篇(一)

      今天回顾了之前学习的JQuery选择器,现在简单的总结一下. JQuery选择器类型   主要分为四类 基本选择器 层级选择器 过滤选择器 表单选择器 基本选择器   基本选择器是jQuery中最 ...

  3. jquery 常用选择器和方法以及遍历(超详细)

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  4. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  5. 【JQuery的选择器】

    一.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素的id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用). 选择器  描述 ...

  6. jQuery学习笔记——jQuery常规选择器

    一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

  7. jQuery基础-选择器,样式操作

    入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...

  8. JQuery 1.*速成版之二

    过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持.和常规选择器一样, ...

  9. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

随机推荐

  1. jenkins构建docker镜像上传到harbor并发布到kubernetes

    很早之前写过一篇jenkins集成docker的文章,使用的是CloudBees Docker Build and Publish plugin插件.这篇文章是直接使用shell脚本做的,主要是这次有 ...

  2. 解题:NOI 2012 骑行川藏

    题面 入手点是每段路程中能量$e$与时间$t$的关系,$t-e$这个函数的导数对于各个路段一样,否则我们可以从导数大的一段路抽出一部分能量分给导数小的,这样会更优 毕姥爷在考场上的做法:猜一猜,然后拿 ...

  3. Python基础学习(三)

    了解了Python的基础使用,接下来继续练手廖雪峰老师的教学案例. 一.变量可以指向函数 说明,一个函数可以赋值给一个变量,该变量就会具有该函数的功能,举例: gg = abs print( gg(- ...

  4. SQL Server 查询性能优化——覆盖索引

    覆盖索引又可以称为索引覆盖. 解释一: 就是select的数据列只用从索引中就能够取得,不必从数据表中读取,换句话说查询列要被所使用的索引覆盖. 解释二: 索引是高效找到行的一个方法,当能通过检索索引 ...

  5. 【Jenkins】安装插件

    1.Jenkins主页面,点击[系统管理]-[管理插件] 2. 安装后的插件可以在[已安装]中进行查看

  6. mysql日常笔记(持续更新)

    常用场景 sql_mode问题:http://blog.csdn.net/ccccalculator/article/details/70432123 连续日期补全/数据补零操作 在不使用存储过程和函 ...

  7. Spring整合Quartz定时任务 在集群、分布式系统中的应用(Mysql数据库环境)

    Spring整合Quartz定时任务 在集群.分布式系统中的应用(Mysql数据库环境)   转载:http://www.cnblogs.com/jiafuwei/p/6145280.html 单个Q ...

  8. SQL记录-PLSQL日期与时间

    PL/SQL日期及时间 PL/SQL提供两个日期和时间相关的数据类型: 日期时间(Datetime)数据类型 间隔数据类型 datetime数据类型有: DATE TIMESTAMP TIMESTAM ...

  9. Linux下/etc/passwd、/etc/shadow、/etc/group文件

    1./etc/passwd [root@prac ~]# cat /etc/passwd root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbi ...

  10. js 正则之 检测素数

    相信很多人应该看过这篇文章,我第一次看到的时候是11年的样子,那时候学vbs的时候看过这个问题.原文<检查素数的正则表达式>,在文章里已经解释了他是怎么判断的,我就不啰嗦了.我们来说说 j ...