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测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
python生成日历实例解析
2014/08/21 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
python import 上级目录的导入
2020/11/03 Python
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
大学新生欢迎词
2014/01/10 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
简爱电影观后感
2015/06/10 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
正则表达式基础与常用验证表达式
2022/06/16 Javascript