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 03 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python中如何添加自定义模块
2020/06/09 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
解除施工合同协议书
2014/10/17 职场文书
护理见习报告范文
2014/11/03 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python