jQuery中parents()和parent()的区别分析


Posted in Javascript onOctober 28, 2014

本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考。具体分析如下:

其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些。

一.parents()函数:

此函数能够获取匹配元素的所有父元素,代码示例:

$(".mayi").parents().css("color","red");

以上代码可以将所有class属性值为"mayi"的元素的所有父级元素的字体颜色设置为红色。
看一段完整的代码实例:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>计算被选中复选框的数量-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".mayi").parents().css("color","red"); 

}) 

</script> 

</head> 

<body> 

<div> 

三水点靠木一 

  <div> 

    三水点靠木一一 

    <span class="mayi">三水点靠木欢迎您</span> 

  </div> 

</div> 

</body> 

</html>

以上代码可以将span元素的所有父元素中的字体颜色设置为红色。

二.parent()函数:

此函数能够能够获取所有匹配元素的一级父元素,而不是所有父元素。

$(".mayi").parents().css("color","red");

 以上代码可以将class属性值为mayi的元素的一级父元素中的字体颜色设置为红色。
看一段完整的代码:
<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>计算被选中复选框的数量-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".mayi").parent().css("color","red"); 

}) 

</script> 

</head> 

<body> 

<div> 

三水点靠木一 

  <div> 

    三水点靠木一一 

    <span class="mayi">三水点靠木欢迎您</span> 

  </div> 

</div> 

</body> 

</html>

以上代码只能够span元素的一级父元素中的"三水点靠木一一"的字体颜色设置为红色。

这两个函数的最大区别就是父元素的返回,从函数的名称也能够感知到,带有s能够获取所有的父元素,没有s的只能够获取一级父元素,很简单这里就不多介绍了,感兴趣的朋友可以参阅相关文章。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JS定义类的六种方式详解
May 12 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 #Javascript
JS对象与json字符串格式转换实例
Oct 28 #Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 #Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 #Javascript
JavaScript极简入门教程(三):数组
Oct 25 #Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 #Javascript
JavaScript极简入门教程(一):基础篇
Oct 25 #Javascript
You might like
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
django-allauth入门学习和使用详解
2019/07/03 Python
10款最好的Python开发编辑器
2019/07/03 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python判断是空的实例分享
2020/07/06 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
2014年财政工作总结
2014/12/10 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
javascript对象3个属性特征
2021/11/17 Javascript
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby