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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
JavaScript触发器详解
Mar 10 Javascript
可以将word转成html的js代码
Apr 11 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 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 curl 并发最佳实践代码分享
2012/09/05 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
js版本A*寻路算法
2006/12/22 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
layui实现下拉框三级联动
2019/07/26 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python贪心算法实例小结
2018/04/22 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
求职教师自荐书
2014/06/19 职场文书
个人创业事迹材料
2014/12/30 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
redis lua限流算法实现示例
2022/07/15 Redis