jQuery中parents()方法用法实例


Posted in Javascript onJanuary 07, 2015

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

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

语法结构:

$(selector).parents(expr)

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

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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="https://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Django框架模型简单介绍与使用分析
2019/07/18 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
《落花生》教学反思
2014/02/25 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
中考标语大全
2014/06/05 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL