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

本文实例分析了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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery中的查找parents与closest方法之间的区别

    一.返回值 前者可以返回多个元素 或者只能返回0个或者1个 二.停止的时间不同 前者是所有的上级元素即一直到根一般是body  后者是知道发现为止,发现一个就停止了 三.开始的元素不同 前者是从父元素开始  后者是从自身开始的 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • jquery中map函数与each函数的区别实例介绍

    ​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ​其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ​例如: var items = [1,2,3,4]; $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(i)

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • jQuery中attr()和prop()在修改checked属性时的区别

    jQuery中attr()和prop()在修改checked属性时的区别

    在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题. 百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性. checked属性即分为attribute->checked,和property->true,false. 对于一个checkbox,若未定义checked="checked",aler

  • jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选). 如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象.元素是按照从最近的父元素向外的顺序被返回的..parents() 和 .parent()

  • 浅析JQuery中的html(),text(),val()区别

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档. 2.TEXT text():取得所有匹配元素的内容.一般用id区别 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. text(val):设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<&qu

  • jQuery对val和atrr("value")赋值的区别介绍

    做项目的时候,我从后台传递过来的数据给一个文本框赋值,通过google浏览器, 当修改的时候发现没有修改,最后查了下原因,原来是jQuery中val和atrr("value",对浏览器的区别, 故总结如下: jquery中的val()和atrr('value'这两个的使用,假设有默认值的情况下,如果用val()赋值了,那么当修改这个值得时候,google不能获取最新的值,但是ie可以, 针对atrr('value'如果有默认值,那么当改变这个值得时候,ie和google都能获取最新的更

  • jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 语法: .closest(selector) 参数selector为字符串值,包含匹配元素的选择器表达式. 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象..parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历.两者之间的差异尽管微妙,却很重要:

  • JQuery中的html()、text()、val()区别示例介绍

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档. 2.TEXT text():取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. text(val):设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 &

  • jquery中$(#form :input)与$(#form input)的区别

    $("form :input") 返回form中的所有表单对象,包括textarea.select.button等 $("form input")返回form中的所有input标签对象 form input 是属于层级选择器(将每一个选择器匹配到的元素合并后一起返回) form :input是属于表单选择器(匹配所有<input>.<textarea>.<select>.<button>元素)

  • jquery parent和parents的区别分析

    可以看出parent的取值很明确,就是当前元素的父元素:parents则是当前元素的祖先元素.下面列出例子说明: 复制代码 代码如下: <div id='div1'><div id='div2'><p></p></div><div id='div3' class='a'><p></p></div><div id='div4'><p></p></div>

随机推荐