原文: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. 解题:NOI 2010 航空管制

    题面 常见的套路与不常见的套路 第一问是常见的套路,建反边用优先队列跑拓扑排序 第二问是不常见的套路,如何判断一个点最早什么时候起飞?先不加它来拓扑排序,直到拓扑排序不能进行下去了,这个时刻就是它必须 ...

  2. POJ 1797 Heavy Transportation / SCU 1819 Heavy Transportation (图论,最短路径)

    POJ 1797 Heavy Transportation / SCU 1819 Heavy Transportation (图论,最短路径) Description Background Hugo ...

  3. 【洛谷P1522】牛的旅行

    题目大意:给定一个 N 个顶点的无向图,图中有若干联通块,现定义联通块的直径为该联通块中距离最远的两个点的距离,定义无向图的直径为这个图中所有联通块直径的最大值.现在在图上加一条边,使得两个本不连通的 ...

  4. isspace 对含有中文 的字符串进行检查的时候表现不正常!?

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...

  5. 构造代码块----java基础总结

    前言:之前一直不知道构造代码块的意思是什么,只是知道他的具体的表现形式,因为经常在面试题中看到,所以准备好好写写. 作用: 给对象进行初始化,对象一建立就运行,而且优于构造方法运行. 和构造方法的区别 ...

  6. Hadoop生态圈-Flume的组件之自定义拦截器(interceptor)

    Hadoop生态圈-Flume的组件之自定义拦截器(interceptor) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客只是举例了一个自定义拦截器的方法,测试字节传输速 ...

  7. CSS Counter Style试玩儿

    2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...

  8. meeting,symposium,seminar 等区别

    meeting,symposium,seminar 等区别 会议分类的方式可说是不胜枚举,这点初步由英文对会议名称的写法,就可看出端倪,像是Assembly,Caucus,Colloquium, Co ...

  9. mybatis批量增加与删除——(十五)

    1.首先应该明白,mybatis增删改返回值是int型的影响行数的值 mapper接口 package cn.xm.mapper; import java.util.List; import cn.x ...

  10. Servlet笔记10--Session

    Web编程中的Session: 代码示例: package com.bjpowernode.javaweb.servlet; import java.io.IOException; import ja ...