元素选择器家庭关系(父、子、兄弟姐妹)
0.00
★16次@未来之窗
A:赛忞初雪
元素选择器家庭关系(父、子、兄弟姐妹)
元素选择器家庭关系功能通过"家庭关系"命名(如祖先、孩子、兄弟),提供直观的DOM元素层级选择能力,可快速定位目标元素的祖先、父级、子级、兄弟元素,无需手动遍历DOM树,大幅简化层级元素选择代码。
函数名 | 参数 | 返回值 | 功能说明 |
---|---|---|---|
祖先(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的祖先元素 | 向上查找当前元素的祖先元素(包括父级),若指定selector则返回第一个匹配的祖先,否则返回最近的祖先 |
函数名 | 参数 | 返回值 | 功能说明 |
---|---|---|---|
孩子(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的子元素集合 | 查找当前元素的直接子元素,若指定selector则返回匹配的子元素,否则返回所有直接子元素 |
第一个() |
无 | $cq对象:第一个元素 | 从当前元素集合中取第一个元素(常用于筛选子元素中的第一个) |
最后一个() |
无 | $cq对象:最后一个元素 | 从当前元素集合中取最后一个元素(常用于筛选子元素中的最后一个) |
函数名 | 参数 | 返回值 | 功能说明 |
---|---|---|---|
兄弟(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的兄弟元素集合 | 查找当前元素的所有兄弟元素(不包括自身),若指定selector则返回匹配的兄弟元素 |
下一个兄弟(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的下一个兄弟元素 | 查找当前元素的下一个直接兄弟元素,若指定selector则返回第一个匹配的下一个兄弟 |
兄弟们(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的后续兄弟元素集合 | 查找当前元素之后的所有兄弟元素,若指定selector则返回匹配的后续兄弟元素 |
兄弟亲密(selector, filter) |
selector (字符串,必选):结束条件选择器filter (字符串,可选):筛选选择器
|
$cq对象:匹配的兄弟元素集合 | 查找当前元素到指定selector元素之间的后续兄弟元素,若指定filter则筛选匹配的元素(不包含结束元素) |
函数名 | 参数 | 返回值 | 功能说明 |
---|---|---|---|
大哥(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的上一个兄弟元素 | 查找当前元素的上一个直接兄弟元素,若指定selector则返回第一个匹配的上一个兄弟 |
大哥们(selector) |
selector (字符串,可选):CSS选择器 |
$cq对象:匹配的前置兄弟元素集合 | 查找当前元素之前的所有兄弟元素,若指定selector则返回匹配的前置兄弟元素 |
大哥亲密(selector, filter) |
selector (字符串,必选):结束条件选择器filter (字符串,可选):筛选选择器
|
$cq对象:匹配的兄弟元素集合 | 查找当前元素到指定selector元素之间的前置兄弟元素,若指定filter则筛选匹配的元素(不包含结束元素) |
通过"孩子""第一个""最后一个""祖先"函数选择相关元素:
核心代码:
通过"下一个兄弟""兄弟们""大哥"函数选择当前元素的兄弟元素:
核心代码:
通过"兄弟亲密""大哥亲密"函数选择范围内的兄弟元素:
核心代码:
$cq('#item').下一个兄弟().孩子()
).class
)、ID选择器(#id
)、属性选择器([name="value"]
)等硬件app