xiaotongeye
- 浏览: 19671 次
- 性别:
- 来自: 北京
-
最新评论
父级元素：
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 4121. 就是 ie6 双倍边距的问题，在使用了 float 的情 ... -
css
2018-02-23 11:06 4581.#nav li {} 看起来很快，实际上很慢，尽管这让人 ... -
web标准
2018-02-22 14:25 421web标准简单来说可以分为结构、表现和行为。其中结构主要是有H ... -
总结一些每次写都要百度的样式 and so on
2016-06-03 14:00 500本次总结无关乎顺序， ... -
js检测css样式的兼容问题
2015-07-24 20:30 873<script> ... -
canvas画布基础
2015-07-10 20:47 474canvas是个神奇的标签，开始学习之后就停不下来，这两天一直 ... -
PHP正则表达式
2015-07-07 14:34 466正则表达式的基本语法 ... -
PHP字符串与数组常用函数
2015-07-07 10:42 2006字符串： 字符串的连接：PHP中用英文的点号.来连接两个字符串 ... -
DOM事件对象event、IE中的事件对象
2015-07-02 16:45 530DOM中的事件对象： type属性用于获取事件类型； targ ... -
跨浏览器事件处理程序
2015-07-02 16:03 503<div id = "box"& ... -
点击按钮实现轮播切换
2015-06-29 19:13 1018HTML： <div class="con3 ... -
jQuery验证邮箱手机
2015-06-29 19:03 546验证邮箱： function checkSignEmail ... -
ios多线程
2014-11-27 14:35 482最近写了一个东西需要加载网络上的图片，运行的时候一直卡到一个界 ... -
取出数组中的值
2014-11-01 21:08 335在写程序的时候，遇到一个问题，想把数组[a，b]中的a，b添加 ... -
解析json获取数据
2014-11-01 20:57 426NSError *error; NSURLReq ... -
cell重用问题
2014-11-01 20:44 607解决问题之前，在cell上添加了label，但是给label添 ... -
保存并获取数据
2014-09-27 19:38 327在IOS开发过程中，经常会遇到数据保存的问题，现在主要说一下用 ... -
UINavigationController实现页面跳转
2014-09-19 20:31 812总结一下利用navigationController push ... -
tableviewcell添加label、button
2014-09-13 22:02 16661.给tableviewcell添加label，首先 CG ... -
简单表视图并实现添加数据
2014-09-10 19:21 13521.基础：表用于显示数据列表。数据列表中的每项都由行表示。表视 ...
相关推荐
本文将深入探讨如何使用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动画与事件 - **排队机制**：在...