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 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery的ready方法详解
Nov 27 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python实现停车管理系统
2018/11/30 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
餐饮加盟计划书
2014/01/10 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2014年司法所工作总结
2014/11/22 职场文书
小平您好观后感
2015/06/09 职场文书
2015小学师德工作总结
2015/07/21 职场文书
消防演习感想
2015/08/10 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
Python使用永中文档转换服务
2022/05/06 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技