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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
js实现适配移动端的拖动效果
Jan 13 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
中英文字符串翻转函数
2008/12/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
兼职学生的自我评价
2013/11/24 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
就业协议书怎么填
2014/09/15 职场文书
道歉的话怎么说
2015/05/12 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android