- 浏览: 19835 次
- 性别:
- 来自: 北京
最新评论
父级元素:
1.parent() 方法返回被选元素的直接父元素。
2.parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
3.parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
4.closest()
closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
closest对于处理事件委派非常有用。
同级元素:
1.siblings() 方法返回被选元素的所有同胞元素。
返回 <h2> 的所有同胞元素
返回属于 <h2> 的同胞元素的所有 <p> 元素
2.next() 方法返回被选元素的下一个同胞元素。
3.nextAll() 方法返回被选元素的所有跟随的同胞元素。
4.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
5.prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已
子元素:
1.children() 方法返回被选元素的所有直接子元素。
也可以使用可选参数来过滤对子元素的搜索。
返回类名为 "select" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
2.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
过滤:
1.first() 方法返回被选元素的首个元素。
2.last() 方法返回被选元素的最后一个元素。
3.eq() 方法返回被选元素中带有指定索引号的元素。
4.filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
返回带有类名 "intro" 的所有 <p> 元素
5.not() 方法返回不匹配标准的所有元素。
<body>body (曾曾祖父) <div>div (曾祖父) <ul>ul (祖父) <li>li (直接父) <span>span</span> </li> </ul> </div> </body>
1.parent() 方法返回被选元素的直接父元素。
2.parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
3.parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){ $("span").parentsUntil("div"); });
4.closest()
closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
closest对于处理事件委派非常有用。
同级元素:
1.siblings() 方法返回被选元素的所有同胞元素。
$("h2").siblings();
返回 <h2> 的所有同胞元素
$("h2").siblings("p");
返回属于 <h2> 的同胞元素的所有 <p> 元素
2.next() 方法返回被选元素的下一个同胞元素。
3.nextAll() 方法返回被选元素的所有跟随的同胞元素。
4.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
5.prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已
子元素:
1.children() 方法返回被选元素的所有直接子元素。
也可以使用可选参数来过滤对子元素的搜索。
$("div").children("p.select");
返回类名为 "select" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
2.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
过滤:
1.first() 方法返回被选元素的首个元素。
2.last() 方法返回被选元素的最后一个元素。
3.eq() 方法返回被选元素中带有指定索引号的元素。
4.filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
$("p").filter(".intro");
返回带有类名 "intro" 的所有 <p> 元素
5.not() 方法返回不匹配标准的所有元素。
发表评论
-
css兼容问题
2018-02-26 13:14 4161. 就是 ie6 双倍边距的问题,在使用了 float 的情 ... -
css
2018-02-23 11:06 4611.#nav li {} 看起来很快,实际上很慢,尽管这让人 ... -
web标准
2018-02-22 14:25 424web标准简单来说可以分为结构、表现和行为。其中结构主要是有H ... -
总结一些每次写都要百度的样式 and so on
2016-06-03 14:00 503本次总结无关乎顺序, ... -
js检测css样式的兼容问题
2015-07-24 20:30 877<script> ... -
canvas画布基础
2015-07-10 20:47 476canvas是个神奇的标签,开始学习之后就停不下来,这两天一直 ... -
PHP正则表达式
2015-07-07 14:34 469正则表达式的基本语法 ... -
PHP字符串与数组常用函数
2015-07-07 10:42 2011字符串: 字符串的连接:PHP中用英文的点号.来连接两个字符串 ... -
DOM事件对象event、IE中的事件对象
2015-07-02 16:45 533DOM中的事件对象: type属性用于获取事件类型; targ ... -
跨浏览器事件处理程序
2015-07-02 16:03 506<div id = "box"& ... -
点击按钮实现轮播切换
2015-06-29 19:13 1023HTML: <div class="con3 ... -
jQuery验证邮箱手机
2015-06-29 19:03 551验证邮箱: function checkSignEmail ... -
ios多线程
2014-11-27 14:35 485最近写了一个东西需要加载网络上的图片,运行的时候一直卡到一个界 ... -
取出数组中的值
2014-11-01 21:08 352在写程序的时候,遇到一个问题,想把数组[a,b]中的a,b添加 ... -
解析json获取数据
2014-11-01 20:57 429NSError *error; NSURLReq ... -
cell重用问题
2014-11-01 20:44 611解决问题之前,在cell上添加了label,但是给label添 ... -
保存并获取数据
2014-09-27 19:38 331在IOS开发过程中,经常会遇到数据保存的问题,现在主要说一下用 ... -
UINavigationController实现页面跳转
2014-09-19 20:31 817总结一下利用navigationController push ... -
tableviewcell添加label、button
2014-09-13 22:02 16871.给tableviewcell添加label,首先 CG ... -
简单表视图并实现添加数据
2014-09-10 19:21 13571.基础:表用于显示数据列表。数据列表中的每项都由行表示。表视 ...
相关推荐
本文将深入探讨如何使用jQuery选择器获取父级元素、同级元素和子元素,这对于网页交互和DOM操作至关重要。 一、获取父级元素 jQuery提供了`parent([expr])`方法来获取元素的直接父元素。例如,如果你有一个`<a>`...
3. **jQuery.children(expr)**: 此方法用于获取当前元素的所有直接子元素。如果提供`expr`,则只返回匹配该表达式的子元素。例如,`$("div").children()`将返回所有`div`元素的子元素,而`$("div").children("p")`则...
在jQuery中,一旦我们通过选择器选中了一个或一组元素,常常需要对这些元素的相邻、父级或者子级元素进行进一步的操作。这涉及到jQuery提供的遍历方法,它们可以帮助我们高效地导航DOM结构。让我们详细了解一下基于...
- `children()`: 获取元素的直接子元素。 - `filter()`: 过滤匹配的元素集合。 - `find()`: 在当前元素集合中查找后代元素。 - `is()`: 检查元素是否匹配给定的选择器。 - `next()`, `prev()`: 获取元素的下一...
- `children`:返回所有直接子元素。 - `contents`:返回所有子节点,包括元素节点和文本节点。 这些筛选方法为开发者提供了灵活而强大的方式去定位和操作DOM元素,是实现复杂动态交互和页面控制不可或缺的工具。每...
选择器方法:用于选取页面元素,如id选择器$("#id")、类选择器$(".class")、元素选择器$("div")、通用选择器$("*")、后代选择器$("table tr td")、子选择器$("#id>span")、相邻兄弟选择器$("label+input")、同级选择...
- children()函数用于获取一个元素的所有直接子元素。例如,如果你有一个`div.container`,你可以使用`.children()`来获取所有直接嵌套在其中的`div.photo`、`div.title`和`div.rating`。 2. **filter()**: - 这...
如果元素有多个同级子元素,它会返回所有这些子元素的jQuery对象。 .closest()函数从元素本身开始向上逐级匹配,返回第一个匹配到的祖先元素。这在需要从子元素开始向上遍历到某个父级元素时非常有用。 .contents...
- **子元素选择器**: 使用 `$(".parent > .child")` 来选择指定类名下的直接子元素。 - 示例:`$(".my > li")` 选择 `class="my"` 内的直接子节点中的 `li` 元素。 - **相邻兄弟选择器**: 使用 `("#sibling + ...
- `.siblings(selector)`:获取当前元素的所有同级元素,同样可以使用`selector`进行过滤。 - `.parent()`或`.parents(selector)`:返回元素的父级或所有祖先元素。 - `.next()`或`.nextAll(selector)`:获取当前...
- **父子兄选择器**:如`parent()`选择父级元素,`children()`选择子元素,`sibling()`选择同级元素等。所有筛选选择器均以函数形式存在,用以获取更为精确的DOM元素集。 ### jQuery动画与事件 - **排队机制**:在...