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 相关文章推荐
Js动态创建div
Sep 25 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
理解javascript对象继承
Apr 17 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
原生js实现俄罗斯方块
Oct 20 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
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python实现定时提取实时日志程序
2018/06/22 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
css sprite简单实例
2016/05/23 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
物流仓管员岗位职责
2013/12/04 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
金融事务专业求职信
2014/04/25 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
教师年度考核个人总结
2015/02/12 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫