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 相关文章推荐
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue-cli4.5.x快速搭建项目
May 30 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
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
js实现批量删除功能
2020/08/27 Javascript
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python剪切视频与合并视频的实现
2020/03/03 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
论文指导教师评语
2014/04/28 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
民政局未婚证明
2015/06/15 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
django上传文件的三种方式
2021/04/29 Python