当前位置:首页 > jQuery技术文章 > jQuery中parents()方法用法实例

jQuery中parents()用法浅析

  • 发布时间:
  • 作者:码农之家原创
  • 点击:197

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

疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
  • 类型:前端开发大小:131.7 MB格式:PDF作者:李刚
立即下载

jQuery中parents()方法用法实例

本文实例讲述了jQuery中parents()方法用法。分享给大家供大家参考。具体分析如下:

此方法取得一个包含着所有匹配元素的父辈元素的元素集合。
所取得的父辈元素集合也可以使用表达式进行筛选。

语法结构:

复制代码 代码如下:
$(selector).parents(expr)

参数列表:
参数 描述
expr 可选。用于筛选父辈元素的表达式。

 

实例代码:

实例一:

 

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>parents()函数-码农之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").parents().css("color","red")
})
</script>
</head>
<body>
<div>
<ul>
  <li>HTML专区</li>
  <li class="js">Javascript专区</li>
  <li>Div+Css专区</li>
  <li>Jquery专区</li>
</ul>
</div>
</body>
</html>

 

以上代码可以将所有li元素的祖先元素的字体颜色都设置为红色,因为color属性具有继承性,所以li元素中的字体为红色。

实例二:

 

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>parents()函数-码农之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").parents(".ul").css("color","red")
})
</script>
</head>
<body>
<div>
<ul class="ul">
  <li>码农之家欢迎您</li>
</ul>
<ul>
  <li>HTML专区</li>
  <li class="js">Javascript专区</li>
  <li>Div+Css专区</li>
  <li>Jquery专区</li>
</ul>
</div>
</body>
</html>

 

以上代码可以将li元素的所有组选元素中class属性值为"ul"的元素的字体颜色设置为红色。

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

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

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

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

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

closest() 方法获得匹配选择器的 第一个祖先元素 , 从当前元素开始 沿 DOM 树向上。 语法: .closest(selector) 参数selector为字符串值,包含匹配元素的选择器表达式。 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要: .closest() .parents() 从当前元素开始 从父元素开始 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 返回包含零个或一个元素的 jQuery 对象 返回包含零个、一个或多个元素的 jQuery 对象 先看下面的示……

网友NO.791949

实例解析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 码农之家一……

网友NO.495531

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

一、返回值 前者可以返回多个元素 或者只能返回0个或者1个 二、停止的时间不同 前者是所有的上级元素即一直到根一般是body 后者是知道发现为止,发现一个就停止了 三、开始的元素不同 前者是从父元素开始 后者是从自身开始的 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title查找父元素/title script src="Scripts/jquery-1.4.1.js" type="text/javascript"/script /head body div class="divclass" id="div1" div p 给祖先添加边框 /p /div /div /body /html script $("p").closest("div[id='div1']").css("border", "1px solid blue"); /script 可以试着把closest改成parents ……

网友NO.871648

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 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757