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 相关文章推荐
实现变速回到顶部的JavaScript代码
May 09 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
移动端界面的适配
Jan 11 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
php生成随机颜色的方法
2014/11/13 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
phpStorm2020 注册码
2020/09/17 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
JsRender实用入门教程
2014/10/31 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
详解Python中的条件判断语句
2015/05/14 Python
基于python的字节编译详解
2017/09/20 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
机械个人求职信范文
2014/01/24 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
中等生评语大全
2014/05/04 职场文书
合理化建议书
2015/02/04 职场文书
小学新课改心得体会
2016/01/22 职场文书