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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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
一个好用的分页函数
2006/11/16 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python匿名函数及应用示例
2019/04/09 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
基于Python实现粒子滤波效果
2020/12/01 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
安全生产先进个人总结
2015/02/15 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL