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动态添加、删除元素的方法
Jan 09 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
vue-router传参用法详解
Jan 19 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
JavaScript实现单点登录的示例
Sep 23 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校验ISBN码的函数代码
2011/01/17 PHP
跟我学Laravel之路由
2014/10/15 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
urllib2自定义opener详解
2014/02/07 Python
详解Python中for循环是如何工作的
2017/06/30 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python发展简史 Python来历
2019/05/14 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
一套带答案的C++笔试题
2014/01/10 面试题
毕业晚会主持词
2014/03/24 职场文书
我的画教学反思
2014/04/28 职场文书
村安全生产责任书
2014/08/25 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
电信营业员岗位职责
2015/04/14 职场文书
党员转正党支部意见
2015/06/02 职场文书
六一活动主持词
2015/06/30 职场文书
暑假生活随笔
2015/08/15 职场文书