jQuery中parent()方法用法实例

本文实例讲述了jQuery中parent()方法用法。分享给大家供大家参考。具体分析如下：

此方法取得匹配元素集合中每个元素的紧邻父元素，也就是第一级父元素，而不是所有的祖先元素。
所取得的父元素集合也可以使用表达式进行筛选。

语法结构:


代码如下:

$(selector).parent(expr)

参数列表:

参数 描述
expr 可选。用来筛选的表达式

实例代码:

实例一：

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>parent()函数-我们</title>
<style type="text/css">
ul{
  height:200px;
  width:200px;
  border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").parent().css("border","1px solid red")
})
</script>
</head>
<body>
<div>
  <p>我是p元素</p>
</div>
<ul>
  <li>
    <p>我是p元素</p>
  </li>
</ul>
</body>
</html>

取得p元素的各自紧邻的父元素，并将其边框颜色设置为红色。

实例二:

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.jb51.net/" />
<title>parent()函数-我们</title>
<style type="text/css">
ul{
  height:200px;
  width:200px;
  border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").parent("div").css("border","1px solid red")
})
</script>
</head>
<body>
<div>
  <p>我是p元素</p>
</div>
<ul>
  <li>
    <p>我是p元素</p>
  </li>
</ul>
</body>
</html>

取得p元素紧邻的div父元素，并将其边框颜色设置为红色。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

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

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

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

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

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

  • javascript中parentNode,childNodes,children的应用详解

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy

  • 有关jQuery中parent()和siblings()的小问题

    今天发现一个小问题,现在也不知道到底是哪个梗在作祟,但是感觉是parent()和siblings()其中的一个. 我是想这样的根据输入的条件删选内容: demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://co

  • getcwd cannot access parent directories错误解决方法

    复制代码 代码如下: [root@web-server php]# /etc/init.d/httpd restart shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory 该错误表示 getcwd 命令无法定位到当前工作目录.一般来说是因为你 cd 到了某个目录之后 rm 了这个目录,这时去执行某些 service 脚

  • JS OffsetParent属性深入解析

    offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素:在怪异呈现模式下为body元素)的引用. 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null. 句法:parentObj

  • jquery next nextAll nextUntil siblings的区别介绍

    next:紧挨着$('')的一个元素 nextAll:在$('')以后的所有的同辈元素 nextUntil:until有直到...之前的意思,所以他表示$('')以后的所有的同辈元素,不过要在nextUntil参数之前,不包括匹配的元素本身 sibings:$('')前后的所有同辈元素 简单理解就是,next就是找他的弟弟/妹妹,nextAll就是找他所有的弟弟/妹妹,nextUntil就是找比他小一定年龄的弟弟/妹妹,siblings就是找他所有的哥哥/姐姐,还有他的所有的弟弟/妹妹.所以同理

  • jQuery prev ~ siblings选择器使用介绍

    jQuery prev ~ siblings选择器使用介绍

    1.prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素 2.(1)prev:任何有效选择器 (2)siblings:一个选择器,并且它作为第一个选择器的同辈 3.示例 (1)源码 siblings.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • 仿jQuery的siblings效果的js代码

    复制代码 代码如下: function siblings(o){//参数o就是想取谁的兄弟节点,就把那个元素传进去 var a=[];//定义一个数组,用来存o的兄弟元素 var p=o.previousSibling; while(p){//先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 p表示previousSibling if(p.nodeType===1){ a.push(p); } p=p.previousSibling//最后把上一个节点赋给p } a.reverse()

  • jQuery中siblings()方法用法实例

    本文实例讲述了jQuery中siblings()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集合中每一个元素的同辈元素. 同辈元素集合可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).siblings(expr) 参数列表: 参数 描述 expr 可选.用于筛选同辈元素的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta chars

  • jquery 层次选择器siblings与nextAll的区别介绍

    HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </div> <div>3</div> <div>4</div> </div> $(

随机推荐