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 object and DOM element
Apr 15 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
js初始化验证实例详解
Nov 26 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
原生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 正则匹配函数体
2009/08/25 PHP
浅析is_writable的php实现
2013/06/18 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
javascript arguments使用示例
2014/12/16 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
Python获取当前时间的方法
2014/01/14 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
作风整顿剖析材料
2014/09/30 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
保安辞职信范文
2015/02/28 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android