层次选择器:
层次选择器是通过元素之间的层次关系来获取特定的元素,如后代元素、子元素、相邻元素、和兄弟元素等
后代元素
ancestor descendant
获取ancestor<祖先>下的descendant<后代>元素<不分级,只要在ancestor里面就行>
集合元素
$("div span")选取div里面的所有span元素
子元素
parent > child
获取parent<父>下的child<子>子代元素<分级,只能在parent的下面是他的子元素>
集合元素
$("div > span")选取div下元素名称为span的子元素
相邻元素
prev + next
选取紧接在prev元素后的next元素
集合元素
$(.one + div)选取class为one的下一个div元素
兄弟元素
prev~siblings
选取prev元素后面的所有siblings元素
集合元素
$("#two~div")选取id为two的元素后面的所有div兄弟元素
$("prev + next")可以用next()代替
$("prev ~ siblings")可以用nextAll()代替
$("prev ~ siblings")和siblings()的区别是siblings()获取所有的兄弟元素,不分先后;
$("prev ~siblings")要求是指定元素“prev”后面的兄弟元素
1.$(“ancestor descendant”):选取parent元素后所有的child元素
ancestor的中文意思是“祖先”,descendant的中文意思是“后代”
$(“body div”) 选取body元素下所有的div元素。
$(“ul li”) 选取ul元素下所有的li元素。
$(“#test div”) 选取id为“test”的元素所包含的所有的div子元素
$(“div#test div”) 选取id为“test”的div所包含的所有的div子元素
$(“.test div”) 选取class为“test”的元素所包含的所有的div子元素
$(“div.test span”) 选取class为“test”的div所包含的所有的span子元素
$(“span.test .demo”) 选取class为“test”的span所包含的所有的class为demo的元素
$(“.test .demo”) 选取class为“test”的元素所包含的所有的class为demo的元素
2.$(“parent > child”):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了
$(“body > div”) 选取body元素下所有的第一级div元素。
$(“ul > li”) 选取ul元素下所有的第一级li元素。
$(“#test > div”) 选取id为“test”的元素所包含的所有的第一级div子元素
$(“div#test > div”) 选取id为“test”的div所包含的所有的第一级div子元素
$(“.test > div”) 选取class为“test”的元素所包含的所有的第一级div子元素
$(“div.test > span”) 选取class为“test”的div所包含的所有的第一级span子元素
$(“span.test > .demo”) 选取class为“test”的span所包含的所有的第一级class为demo的元素
$(“.test > .demo”) 选取class为“test”的元素所包含的所有的第一级class为demo的元素
3.$(“prev + next”):prev和next是两个同级别的元素. 选中在prev元素后面的next元素.
$(“#demo+img”)选在id为demo元素后面的img对象.如果id为demo元素后面没有同级的img对象,那么这个$(“#demo+img”).length=0
4.$(“prev ~ siblings”):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器
$(“#demo~[title]“)选择id为demo的元素后面所有带有title属性的元素,同样如果id为demo的元素后面没有一个带有title属性的元素,那么$(“#demo~[title]“).length = 0
$('th').parent() —— 获取父级节点
$('td:contains("Henry")').prev()——内容包含有"Henry"的<td>的上一个节点
$('td:contains("Henry")').next()——内容包含有"Henry"的<td>的下一个节点
$('td:contains("Henry")').siblings()——内容包含有"Henry"的<td>的所有兄弟节点
还有一个,就是end(),这个方法肯定是用在某个DOM节点执行了某一动作之后,还想在与其相关的节点上执行类似动作,这里就要用到end()。用过end()方法之后,所返回的是执行动作的那个节点的父节点上。举个例子
$(...).parent().find(...).addClass().end()
这里执行动作的节点是find(...),是一个数组对象,它所做的动作是“addClass()”,之后,用了个end(),这时所返回的东东就是指向了parent()所指向的节点,也就是执行“addClass()”动作的那个数组对象的父节点。
分享到:
相关推荐
jQuery层级选择器是前端开发中用于操作HTML文档结构的强大工具,其通过CSS选择器的语法,允许开发者快速选取页面中的元素。在文档对象模型(DOM)中,元素之间存在着层级关系,层级选择器正是用于这些关系的定位。...
jQuery层级选择器是其选择器中的重要组成部分,用于选取特定的DOM元素,它包括了子选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器等。 首先,子选择器“>”用于选取指定元素的直接子元素。例如,代码“$('div...
在本篇内容中,我们主要关注的是如何使用jQuery层级选择器来匹配父元素下的子元素,并通过实现代码展示了具体的操作方法。 首先,jQuery提供了多种层级选择器,用来选取特定层级关系的元素。在文章中提到的有: 1. ...
JQuery选择器,xpath类型等的选择器
jQuery层级选择器是jQuery库中用于选取具有特定层级关系元素的重要工具。它们允许开发者根据HTML文档对象模型(DOM)的结构来精准定位所需元素。在本文中,我们将深入探讨jQuery的层级选择器,包括Descendant ...
在jQuery中,层级选择器是用于选取文档结构中具有特定关系的元素的关键工具。这些选择器使得能够根据元素之间的相对位置来定位DOM中的特定元素,从而实现更精确的DOM操作。本文将详细介绍jQuery中的层级选择器,特别...
#### 二、Jquery层级选择器 层级选择器用于根据元素之间的关系来选取元素,这对于处理复杂的DOM结构非常有用。 - **`$("parent > child")`**:选择所有作为指定父元素直接子元素的元素。 - **`$("ancestor ...
接下来,我们讨论jQuery的层级选择器,这些选择器允许我们根据元素的位置关系进行选取: 1. **后代选择器**: 使用空格分隔两个选择器,如`$("div p")`选取`<div>`内的所有`<p>`元素。 2. **子元素选择器**: 使用`>`...
层次选择器用于处理DOM树中元素间的层级关系,包括祖先、后代、父级、子级等,增强了选择器的表达能力。 1. **ancestor descendant**:选取特定祖先元素下的所有后代元素,如`$(".bgRed div")`选取CSS类为`bgRed`的...
【基于jQuery实现的地址选择器】是一种常用的前端交互组件,常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式,展示省、市、区、乡镇、社区等多级行政区域,使得用户能够方便快捷...
jQuery 3.1 标准课程第二章 选择器层级选择器
1. **直系子元素选择器**:`parent > child`,仅选取指定父元素的直接子元素,例如`$('div > span')`将选取所有直接位于`<div>`标签内的`<span>`元素,排除嵌套层级更深的匹配项。 2. **相邻兄弟选择器**:`prev + ...
- **一般兄弟选择器**:`$("#prev ~ div")`选取与ID为`prev`的元素处于同一层级的所有`<div>`元素。 - **后代选择器**:`$("tr:first")`选取所有`<tr>`元素中的第一个元素。 - **子代选择器**:`$("div span:first-...
优先使用ID选择器,其次类选择器,再是属性选择器,尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验室”的环境中,你可以实际操作这些选择器,观察它们在不同场景下的应用效果,加深理解并提升实战技能...
首先,jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器以及伪类选择器。基本选择器包括ID选择器(`#id`),类选择器(`.class`),元素选择器(`element`)和通配符选择器(`*`)。这些选择器...
五、层级选择器 1. `$("ancestor descendant")`:选取所有祖先元素下的后代元素。 2. `$("parent > child")`:直系子元素选择器,选取父元素的所有直接子元素。 3. `$("prev + next")`:相邻兄弟选择器,选取紧接在...