当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery中parents()和parent()的区别分析

实例解析jQuery中parents()和parent()的区别

  • 发布时间:
  • 作者:码农之家
  • 点击:187

这篇文章主要知识点是关于jQuery、parents()、parent()、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery UI开发指南
  • 类型:前端开发大小:6.02 MB格式:PDF作者:Eric Sarrion
立即下载

jQuery中parents()和parent()的区别分析

本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考。具体分析如下:

其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些。

一.parents()函数:

此函数能够获取匹配元素的所有父元素,代码示例:

 

 
$(".mayi").parents().css("color","red");

 

以上代码可以将所有class属性值为"mayi"的元素的所有父级元素的字体颜色设置为红色。
看一段完整的代码实例:

 

 
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>计算被选中复选框的数量-码农之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".mayi").parents().css("color","red");
})
</script>
</head>
<body>
<div>
码农之家一
  <div>
    码农之家一一
    <span class="mayi">码农之家欢迎您</span>
  </div>
</div>
</body>
</html>

以上代码可以将span元素的所有父元素中的字体颜色设置为红色。

 

二.parent()函数:

此函数能够能够获取所有匹配元素的一级父元素,而不是所有父元素。

 

 
$(".mayi").parents().css("color","red");

 以上代码可以将class属性值为mayi的元素的一级父元素中的字体颜色设置为红色。
看一段完整的代码:

 

 

 
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>计算被选中复选框的数量-码农之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".mayi").parent().css("color","red");
})
</script>
</head>
<body>
<div>
码农之家一
  <div>
    码农之家一一
    <span class="mayi">码农之家欢迎您</span>
  </div>
</div>
</body>
</html>

以上代码只能够span元素的一级父元素中的"码农之家一一"的字体颜色设置为红色。

 

这两个函数的最大区别就是父元素的返回,从函数的名称也能够感知到,带有s能够获取所有的父元素,没有s的只能够获取一级父元素,很简单这里就不多介绍了,感兴趣的朋友可以参阅相关文章。

希望本文所述对大家的jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.383391

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

在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents()、 parent()、closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考。 1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的。 同时,本方法还接受一个字符串选择器,用于从返回的节点集中筛选符合选择器的子元素集。 2.parent([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的父节点。它和parents()不同的是,它只向上搜索一层,而parents()会搜索整个DOM树。 本方法也可以接受一个字符串选择器,用于筛选返回的元素。 有人可能会问:一个DOM元素的父元素不是只有一个……

网友NO.216534

jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

.parent(selector) 获得当前匹配元素集合中每个元素的 父元素 ,由选择器筛选(可选)。 .parents(selector) 获得当前匹配元素集合中每个元素的 祖先元素 ,由选择器筛选(可选)。 如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。 元素是按照从最近的父元素向外的顺序被返回的。 .parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。 这两个方法都可以接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。 下面引用个例子 ul class="level-1" li class="item-i"I/li li class="item-ii"II ul class="level-2" li class="item-a"A/li li class="item-b"B ul……

网友NO.677327

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(通过选择器查找父元素) $('li.item-1').closest('.level-2') //$('li.item-1').parent('.level-2') //找不到,parent()方法只遍历到上一层! $('li.item-1').parent().parent() //这个太二了有木有! $('li.item-1').parents('.level-2') parent(selector)中selector的用法 $('li').parent() //返回level-3,level-2和level-1的集合,它们都是li的父元素 $('li').parent('.level-3') //在上述集合中筛选出 level-3 3.closest方法从当前元素开始遍历,而parent()从父元素开始! $('li.item-1').closest('li') //返回 item-1,使用时要注意,如果是一个div嵌套在中一个div中,要考虑选择器的正确使用……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com