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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
详解Vue中的scoped及穿透方法
Apr 18 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
YII分模块加载路由的实现方法
2018/10/01 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python中Threading用法详解
2017/12/27 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python pytest进阶之fixture详解
2019/06/27 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
理货员的岗位职责
2013/11/23 职场文书
高中生期末评语
2014/01/28 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
党支部书记岗位职责
2015/02/15 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书