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

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！

在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm

jQuery-Selectors-2-bynet

.div
{
width:95%;
margin-left:15px;
margin-top:15px;
margin-right:15px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
background-color:#ccc;
border:#999 1px solid;
line-height:30px;
font-size:13px;
font-family:微软雅黑;
}
.blue{color:Blue;}
.green{color:Green;}
.button{border:green 1px solid;width:100px;}
.xiaobiao{ font-weight:bold;}
.red_test{background-color:red; color:White; width:300px; height:30px;}
.li_test{border:#000 1px solid;}
.nei_div{border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px;}

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"

$("#btn_1").click(function(){
$("#div_1 input").css("background-color","red");
});

注意：本实例请与第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"

$("#btn_2").click(function(){
$("#div_a1 > input").css("background-color","red");
});

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

$("#btn_3").click(function(){
$("#div_b1 span + input").css("background-color","red");
});

注意：第一个选择器我用了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

$("#btn_4").click(function(){
$("#div_c1 span ~ input").css("background-color","red");
});

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

运行后，需要刷新下。

赞 (0)

相关推荐

  • jquery 层次选择器siblings与nextAll的区别介绍

    HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </div> <div>3</div> <div>4</div> </div> $(

  • JQuery中层次选择器用法实例详解

    本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: <!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

  • Jquery中的层次选择器与find()的区别示例介绍

    复制代码 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为根基 复制代码 代码如下: $("#anaylseBody tr td") 以

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • jQuery层次选择器选择元素使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.

  • 详解强大的jQuery选择器之基本选择器、层次选择器

    jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单--jQuery插件的机制及实战).正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器. jQuery选择器类型 jQuery选择器主要分为四类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表

  • jQuery选择器之基本选择器与层次选择器

    基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用.        选择器       描述 返回                示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 e

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

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm jQuery-Selectors-2-bynet .div { width:95%; margin-lef

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

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术

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

    我的学习方法:先入门,后进阶!本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 详细介绍页面 http://demo.jb51.net/html/jquery/jQuery-Selector.html jQuery-Selectors .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top

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

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::enabled,:disabled,:checked,:selected的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 运行后,需要刷新下,加载下jquery jQuery-Selectors-9 .div { width:95%; margin-left:15px

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

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 您可以到jQuery官网来学习更多的有关jQuery知识. 运行后,请刷新下

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

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::contains(text),:empty,:has(selector),:parent,:hidden,:visible的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 您可以到jQuery官网来学习更多的有关jQuery知识. jQuery-Selectors-4

  • jQuery基本选择器和层次选择器学习使用

    jQuery基本选择器和层次选择器学习使用

    本文实例为大家分享了jQuery选择器的具体实现代码,供大家参考,具体内容如下 1. 基本选择器 <html> <head> <meta charset="utf-8"> <title>jQuery基本选择器</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </

  • jQuery基本选择器(实例及表单域value的获取方法)

    jQuery基本选择器(实例及表单域value的获取方法)

    jQuery基本选择器包括 CSS选择器.层级选择器和.表单域选择器. 1.CSS选择器 (1)标签选择器 $("div")  $("p")  $("table") 等一系列 HTML 标签 (2)ID选择器 <input id="user" type="text"> 获取该标记的值:$("#user").val(); (3)类选择器 <input type="

  • 跟着Jquery API学Jquery之一 选择器

    有了Jquery的选择器,吃饭饭饭香,身体倍棒-- 1.基本 我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器-基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法 css样式也有几种情况:1.类样式 2.id样式 3.标签样式, 如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{} 如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{} 如果有标签<div></div>

  • 老生常谈jquery id选择器和class选择器的区别

    实例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" rel="external nofollow" rel="external nofollow" rel=&

随机推荐