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

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

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

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript"

     src="${pageContext.request.contextPath}/resource/js/jquery-1.8.2.min.js"></script>

 </head>

 <body>

     <ul id="menu" style="width: 100px;">

         <li>

             <ul>

                 <li><a href="#">Home</a></li>

             </ul>

         </li>

         <li>End</li>

     </ul>

 </body>

 <script type="text/javascript">

     //点击Home时

     $("#menu a").click(function() {

         $(this).parent("ul").css("background", "yellow");

         alert($(this).parent("ul").length)        //0

         $(this).parent("li").parent("ul").css("background", "yellow");

         alert($(this).parent("li").length)        //1

         $(this).parents("ul").css("background", "yellow");

         alert($(this).parents("ul").length)        //2

         $(this).closest("ul").css("background", "yellow");

         alert($(this).closest("ul").length)        //1

     });

 </script>

 </html>

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()方法在项目中的使用频率是比较大的。

jQuery_parent() parents() closest()区别的更多相关文章

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

    分类: 前端开发 parent是找当前元素的第一个父节点,不管匹不匹配都不继续往下找 parents是找当前元素的所有父节点  closest() 是找当前元素的所有父节点 ,直到找到第一个匹配的父节 ...

  2. jQuery的parent和parents和closest区别

    1.parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.2.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选.3.clo ...

  3. closest和parents方法区别

    今天第一次看到closest方法,以前也从来没用过. 该方法从元素本身开始往上查找,返回最近的匹配的祖先元素. 1.closest查找开始于自身,parents开始于元素父级 2.closest向上查 ...

  4. jquery parent和parents的区别

    从字面上不难看出parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选可以 ...

  5. #array_parents #parents的区别

    https://www.drupal.org/node/279246 #array_parents  => 一定会反映表单的物理结构 就是该是哪个下面就是哪个下面 不来虚的#parents  = ...

  6. jQuery中.parent和.parents的区别

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) ...

  7. jquery遍历之parent()与parents()的区别 及 parentsUntil() 方法

    来自:http://blog.csdn.net/zm2714/article/details/8117746 .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选( ...

  8. .parent()和.parents()的区别

    parent的取值很明确,就是当前元素的父元素:parents则是当前元素的祖先元素.下面列出例子说明: 如下: <div id='div1'><div id='div2'>& ...

  9. jQuery 查找父元素的函数 parent 和 parents 的区别

    函数 描述 parent([expr]) 查找子节点childNode的父节点,不包括祖先节点 parents([expr]) 查找子节点childNode的父节点,包括祖先节点 Talk is ch ...

随机推荐

  1. JVM垃圾收集(Java Garbage Collection / Java GC)

    JVM垃圾收集(Java Garbage Collection / Java GC) Java7 Java8 JDK1.8之后将最初的永久代取消了,由元空间取代. 堆内存调优简介 public sta ...

  2. Leetcode 209.长度最小的子数组 By Python

    给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的连续子数组.如果不存在符合条件的连续子数组,返回 0. 示例: 输入: s = 7, nums = [2, ...

  3. Hdoj 2084.数塔 题解

    Problem Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大 ...

  4. 【LOJ#6072】苹果树（矩阵树定理，折半搜索，容斥）

    [LOJ#6072]苹果树(矩阵树定理,折半搜索,容斥) 题面 LOJ 题解 emmmm,这题似乎猫讲过一次... 显然先\(meet-in-the-middle\)搜索一下对于每个有用的苹果数量,满 ...

  5. urllib的实现---cookie处理

    Cookie的使用 用 Python 来登录网站, 用Cookies记录登录信息, 然后就可以抓取登录之后才能看到的信息. 什么是cookies? Cookie,指某些网站为了辨别用户身份.进行ses ...

  6. IISEXPRESS64位运行

    调试时使用IISEXPRESS 64位.经网上查找这样开启

  7. github上的面试库

    https://yuchengkai.cn/docs/zh/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B https://github.com/taiz ...

  8. multiset和set

    set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...

  9. python 获取当前文件夹下所有文件名

    os 模块下有两个函数: os.walk() os.listdir() 1 # -*- coding: utf-8 -*- 2 3 import os 4 5 def file_name(file_d ...

  10. bzoj4383(拓扑排序)

    给定一个长度为n的正整数序列a,每个数都在1到10^9范围内,告诉你其中s个数,并给出m条信息,每条信息包含三个数l,r,k以及接下来k个正整数,表示a[l],a[l+1],...,a[r-1],a[ ...