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 使用简明教程
Mar 05 Javascript
javascript 动态创建表格
Jan 08 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
VSCode launch.json配置详细教程
Jun 18 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/10/09 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
python中zip和unzip数据的方法
2015/05/27 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
django ORM之values和annotate使用详解
2020/05/19 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
化学实验员岗位职责
2013/12/28 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
担保书怎么写
2014/04/01 职场文书
出生证明公证书
2014/04/09 职场文书
承诺书范文
2014/06/03 职场文书
公务员政审材料
2014/12/23 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android