jQuery - 选择器（五）

层次选择器（hierarchy），根据元素的层次关系来选择相应元素，主要包括：

ancestor descendant 选择所有给定祖先元素下的相匹配的后代元素，jQuery语法 jQuery('ancestor descendant')。

parent>child 选择所有给定父元素下的相匹配的直系子元素。

prev+next 选择所有紧接着prev元素后的nex元素。

prev~siblings 选择所有紧接着prev元素后的兄弟元素，这些元素要和"siblings"匹配。

具体使用的例子：

1 <!doctype>
2 <html>
3 <head>
4 <style>
5 fieldset{
6 margin:5px;
7 }
8 div,span{
9 width:100px;
10 height:100px;
11 margin:10px;
12 float:left;
13 border:1px solid red;
14 }
15 </style>
16 <script src="jquery/jquery.js"></script>
17 <script>
18 $(document).ready(
19 function(){
20 $("form input").css("border","1px solid blue");
21 $("form>input").css("color","red");
22 $("fieldset+label").css("color","red");
23 $("br~div").css("color","blue");
24 }
25 )
26 </script>
27 </head>
28 <body>
29 <form>
30 <label>Name:</label>
31 <input type="text" value="name"/>
32 <fieldset>
33 <label>Grandchild:</label>
34 <input type="text" value="grandchild"/>
35 </fieldset>
36 <label>fieldset next label</label>
37 <br/>
38 <div>div1</div>
39 <div>div2</div>
40 <span>span</span>
41 <div>div3</div>
42 </form>
43 </body>
44 </html>

显示结果：

转载于:https://www.cnblogs.com/suntop/archive/2010/09/29/1838305.html

jQuery - 选择器（五）相关推荐

jQuery基础（五）—— jQuery选择器
jQuery选择器的写法和CSS选择器的写法类似,我觉得不同的就是CSS是在选择到元素以后为其添加样式, jQuery选择器是在找到元素以后为其添加行为.主要包含以下几种: (1)基本选择器选择器 ...
20150303+JQuery选择器-02
20150303+JQuery选择器-02 三.文档处理插入删除复制替换包裹查找 1.插入操作--内部插入 jQuery <div> jQuery hello jQuery&l ...
[转] jQuery 选择器
jQuery选择器(Selectors,或译为选择符?)可以说是甚为强大,jQuery能够得以如此之名气,选择器的功劳是功不可没的.利用 CSS和XPath选择符的能力,加上自己的"自定义选 ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
二、jQuery 选择器（超细）
文章目录前言一.jQuery 选择器是什么二.基本选择器 2.1 `ID Selector ("#id")` 选择一个具有给定 id 属性的单个元素 2.2 `Class S ...
6JS库-前端框架（库）-jQuery选择器
#jQuery选择器请列举出在CSS中学习过的选择器的类型 jQuery选择器的优势有哪些? jQuery选择器包括哪几大类? 通过位置选取元素的jQuery选择器有哪些? 课件 1jQuery选择 ...
jQuery选择器代码详解（一）——Sizzle方法
对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明 ...
一、JQuery选择器
前言:本篇文章是作者在B站学习JQuery视频的笔记视频传送门:https://www.bilibili.com/video/BV1vD4y1S7SG?p=18&spm_id_from=pa ...
JQuery——选择器作业
一.省市级连 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
jQuery（二）：jQuery选择器
jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red" ...

jQuery - 选择器（五）

jQuery - 选择器（五）相关推荐

最新文章

热门文章