jQuery中closest和parents的区别分析

jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了，但如果说仔细可能各位不懂，下面我们一起来看看closest和parents区别。

1.父级

parent()——唯一父级元素，可能是0个或1个元素。

2.祖先

parents(selected)——所有selected祖先（不包含根元素），可能是0个、1个或多个元素。
closest(selected)——唯一selected祖先，可能是0个或1个元素。
closest和parents的主要区别是：

前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；

前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；

前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

closest对于处理事件委托非常有用。

总结

1、closest查找开始于自身，parents开始于元素父级
2、closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3、closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JQuery.closest(),parent(),parents()寻找父结点

    JQuery.closest(),parent(),parents()寻找父结点

    HTML代码,测试地址:jQuery 遍历 - closest() 方法 ------我粘代码上来,在页面上会自动隐藏(会显示一下)!谁能教我这是肿么回事! 1.通过item-1查找 level-3(查找直接上级) 复制代码 代码如下: $('li.item-1').closest('ul') $('li.item-1').parent() $('li.item-1').parents().eq(0) 2.通过item-1查找 level-2(通过选择器查找父元素) 复制代码 代码如下: $('

  • jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 语法: .closest(selector) 参数selector为字符串值,包含匹配元素的选择器表达式. 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象..parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历.两者之间的差异尽管微妙,却很重要:

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • jquery中的查找parents与closest方法之间的区别

    一.返回值 前者可以返回多个元素 或者只能返回0个或者1个 二.停止的时间不同 前者是所有的上级元素即一直到根一般是body  后者是知道发现为止,发现一个就停止了 三.开始的元素不同 前者是从父元素开始  后者是从自身开始的 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • jQuery中closest和parents的区别分析

    jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别. 1.父级 parent()--唯一父级元素,可能是0个或1个元素. 2.祖先 parents(selected)--所有selected祖先(不包含根元素),可能是0个.1个或多个元素. closest(selected)--唯一selected祖先,可能是0个或1个元素. closest和parents的主要区别是: 前者从当

  • jQuery中.attr()和.data()的区别分析

    $.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别. Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app&q

  • Jquery中offset()和position()的区别分析

    本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

  • jquery中attr和prop的区别分析

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. 复制代码 代码如下: <a href="http://www.baidu.com" ta

  • jquery中:input和input的区别分析

    复制代码 代码如下: <script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); })//这个效果第三个textarea也会添加样式 </script>

  • jQuery中serializeArray()与serialize()的区别实例分析

    jQuery中serializeArray()与serialize()的区别实例分析

    本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

  • jQuery中closest()函数用法实例

    本文实例讲述了jQuery中closest()函数用法.分享给大家供大家参考.具体分析如下: 此函数从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素. closest()函数会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素.如果什么都没找到则返回一个空的jQuery对象. 语法结构一: 复制代码 代码如下: $(selector).closest(expr, context) 参数列表: 参数 描述 expr 用以

  • jquery中done和then的区别(详解)

    jquery的deferred对象的done方法和then方法都能实现链式调用,但是他们的作用是有区别的,then方法中如果你传递的方法有返回值,那么他会传递给下一个链式调用的方法.而done方法与此相反,你传递的方法就算有返回值,done方法也不会把你的返回值传给下一个链式调用的方法的, 话不多说,直接上实例: var defer = jQuery.Deferred(); defer.done(function(a,b){ console.log("a = " + a+"b

  • 老生常谈jquery中detach()和remove()的区别

    JQuery是一个很大强的工具库,在工作中开发中,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略. remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了 通过一张对比表来解释2个方法之间的不同 方法名 参数 事件及数据是否也被移除 元素自身是否被移除 remove 支持选择器表达 是 是(无参数时),有参数时要根据参数所涉及的范围 detach 参数同remove 否 情况同remove remove:移除节点 -

  • 浅谈jquery中next与siblings的区别

    siblings([expr]): 概述   取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合. [expr] :可以用可选的表达式进行筛选.用于筛选同辈元素的表达式 示例 找到每个div的所有同辈元素. HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div

随机推荐