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 相关文章推荐
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JavaScript的==运算详解
Jul 20 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
创建Django项目图文实例详解
2019/06/06 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
捐书寄语赠言
2014/01/18 职场文书
人事主管岗位职责
2014/01/30 职场文书
教师节商场活动方案
2014/02/13 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
党员目标管理责任书
2014/07/25 职场文书
销售团队获奖感言
2014/08/14 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Python合并pdf文件的工具
2021/07/01 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python