jquery parent() parents() closest()区别

parent是找当前元素的第一个父节点,不管匹不匹配都不继续往下找

parents是找当前元素的所有父节点 

closest() 是找当前元素的所有父节点 ,直到找到第一个匹配的父节点

parent()、parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法。通过本篇内容,大家将会在以后使用.parent()、parents()和closest()时不会显得无从下手。

我们直接看例子来来说明一下这三个方法的使用区别:

1 <ul id="menu" style="width:100px;">
2      <li>
3          <ul>
4              <li> <a href="#">Home</a> </li>
5          </ul>
6      </li>
7      <li>End</li>
8  </ul> 

接下来,分别看看这三个方法:

1 <script type="text/javascript">
2     //点击Home时
3      $("#menu a").click(function() {
4          $(this).parent("ul").css("background", "yellow"); //0
5          $(this).parent("li").parent("ul").css("background", "yellow"); //1
6          $(this).parents("ul").css("background", "yellow"); //2
7          $(this).closest("ul").css("background", "yellow"); //3 return false;
8      });
9   </script>

1.parent()方法从指定类型的直接父节点开始查找,在"0"中,<a>的直接父节点是<li>所以在这里找不到<ul>父节点。在"2"中先找到了<li>,接着找到<ul>,并将它的背景色设置为yellow。parent()返回一个节点。

2.parents()方法查找方式同parent()方法类似,不同的一点在于,当它找到第一的父节点时并没有停止查找,而是继续查找,最后返回多个父节点,如在"2"中,使得id为menu的ul整个背景色变成了yellow。

3.closest()方法查找时从包含自身的节点找起,它同parents()很类似,不同点就在于它只返回一个节点如在"3"中,实现的功能同1相同。但它使得代码量减小,同"2"相比又只返回单一的一个节点。可见,closest()方法在项目中的使用频率是比较大的。

时间: 2024-11-01 16:20:13

jquery parent() parents() closest()区别的相关文章

jQuery_parent() parents() closest()区别

parent 是找当前元素的第一个父节点,不管匹不匹配都不继续往下找 parents 是找当前元素的所有父节点  closest 是找当前元素的所有父节点 ,直到找到第一个匹配的父节点 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-/

jQuery中的closest()和parents()的区别

jQuery中的closest()和parents()的区别 jQuery中closest()和parents()的作用非常相似,都是向上寻找符合选择器条件的元素,但是他们之间有一些细微的差别,官网也给出了说明: .closest() .parents() Begins with the current element Begins with the parent element Travels up the DOM tree until it finds a match for the sup

jQuery查找——parent/parents/parentsUntil/closest

jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素,具体用法不同 parent():取得一个包含着所有匹配元素的唯一父元素的元素集合. parents():沿 DOM 树向上遍历,直到文档的根元素(<html>)为止,将每个祖先元素添加到一个临时的集合:如果应用了选择器,则会基于该选择器对这个集合进行筛选.返回零个.一个或多个元素. closest():沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止.返回零个或一

jquery parent()和parents()区别

parent(exp) 取得一个包含着所有匹配元素的唯一父元素的元素集合. 你可以使用可选的表达式来筛选. 查找段落的父元素中每个类名为selected的父元素. HTML 代码: <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div> jQuery 代码: $("p").parent(&

jQuery的parents()函数和parent()函数的区别

jQuery的parents()函数和parent()函数的区别:其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些.一.parents()函数:此函数能够获取匹配元素的所有父元素,代码示例: $(".mayi").parents().css("color","red"); 以上代码可以将所有class属性值

jQuery中的closest()和parents()的差别

jQuery中的closest()和parents()的差别 jQuery中closest()和parents()的作用非常类似,都是向上寻找符合选择器条件的元素,可是他们之间有一些细微的差别,官网也给出了说明: .closest() .parents() Begins with the current element Begins with the parent element Travels up the DOM tree until it finds a match for the sup

jQuery遍历之closest()方法

// 从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素. // 常用格式: var tbl = $(obj).closest("table"); // 这句js的意思是找到obj对象的第一个table祖先元素,这里的obj可以是tr,tbody,td,td或tr里面的input,等等元素标签. // 例如: $("div").closet("li'); .closest() .parents() 起始位置不同 从当前元素开始 从父

jquery.fn.extend与jquery.extend用法与区别

关于jquery.fn.extend与jquery.extend用法与区别. jQuery为开发插件提拱了两个方法,分别是:  代码如下 复制代码 jQuery.fn.extend(object);  和   jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现.  代码如下 复制

jQuery与js的区别,并有基本语法详解,

通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src="jquery-1.11.2.min.js"></script>: 引用文件的语句一定要放在最前面,即使写了新的js方法和引用的js文件,也要把Jquery文件的引用语句放在最前面.下面就说一下Jquery和js的区别: 1.找元素(两种方法一一对应): js方法: v