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 相关文章推荐
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
ExpressJS入门实例
Jan 14 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
两款万能的php分页类
2015/11/12 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
js选项卡的实现方法
2015/02/09 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
python 计算文件的md5值实例
2017/01/13 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
爱护环境建议书
2015/09/14 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
python实现层次聚类的方法
2021/11/01 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers