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 相关文章推荐
广告显示判断
Aug 31 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 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
8个必备的PHP功能实例代码
2013/10/27 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python中的闭包总结
2014/09/18 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python中如何添加自定义模块
2020/06/09 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
深入了解Python enumerate和zip
2020/07/16 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
精彩的推荐信范文
2013/11/26 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
学生自我评价范文
2014/02/02 职场文书
工程项目经理任命书
2014/06/05 职场文书
集体生日活动方案
2014/08/18 职场文书
2015公务员年度考核评语
2015/03/25 职场文书