原文: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. luogu2296 [NOIp2014]寻找道路 (bfs)

    反着建边,从T bfs找合法的点,然后再正着bfs一下求最短路就行了 #include<bits/stdc++.h> #define pa pair<int,int> #def ...

  2. 未处理的异常 stack overflow

    今天在编译程序时遇到“0x00e304f7 处有未经处理的异常: 0xC00000FD: Stack overflow”的错误,也就是栈溢出了,google了一下,原来是我申请的一个变量太大了,con ...

  3. 【疑点】js中的break,continue和return到底怎么用?

    转: [疑点]js中的break,continue和return到底怎么用? 为什么要说个?好像很简单,但是我也会迷糊,不懂有时候为什么要用return,然而break和continue也经常和他放在 ...

  4. RabbitMQ的生产者和消费者

    低级错误:启动程序的时候报错:socket close: 原因在配置文件中写的端口是:15672,应该是5672: client端通信口5672管理口15672server间内部通信口25672erl ...

  5. .net 里面打不出来ConfigurationManager

    ConfigurationManager 这个东东是读取配置文件时需要的. 首先要引用命名空间里面 using System.Configuration; 其次呢,在解决方案的引用里,单机右键进行添加

  6. C语言复习---零散补充

    一:double和float使用scanf获取数据 printf输出float和double都可以用%f,double还可以用%lf. 2 scanf输入float用%f,double输入用%lf,不 ...

  7. JAVA多线程之线程的挂起与恢复(suspend方法与resume方法)

    一,介绍 本文讨论JAVA多线程中,使用 thread.suspend()方法暂停线程,使用 thread.resume()恢复暂停的线程 的特点. 先介绍二个关于线程的基本知识: ①线程的执行体是r ...

  8. CSS规范 - 典型错误--(来自网易)

    不符合NEC规范的选择器用法 .class{} 不要以一个没有类别的样式作为主选择器,这样的选择器只能作为后代选择器使用,比如.m-xxx .class{}.        .m-xxx div{} ...

  9. Firefox滚动残影(转)

    Firefox滚动残影   Firefox滚动残影这文章放在草稿箱有一阵子了,之前的3系列都有这BUG,当正想发表这文章的时候,和我沟通刚刚升级的FF4已修复此BUG,所以搁置一阵在考虑到这文章还有没 ...

  10. 第5月第16天 php crud CodeIgniter CI_DB_active_record

    1.C.R.U.D. Generator for CodeIgniter https://github.com/antonioyee/crud-generator/tree/9e5e48e773a52 ...