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点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
JS实现密码框效果
2020/09/10 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
基于python中theano库的线性回归
2018/08/31 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python如何获取文件指定行的内容
2020/05/27 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
python线程优先级队列知识点总结
2021/02/28 Python
大学系主任推荐信范文
2013/12/24 职场文书
优秀求职信范文分享
2014/01/26 职场文书
小学生思想品德评语
2014/12/31 职场文书
PHP命令行与定时任务
2021/04/01 PHP
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python