jQuery中parent()方法用法实例


Posted in Javascript onJanuary 07, 2015

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

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

语法结构:

$(selector).parent(expr)

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

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/> 

<meta name="author" content="https://3water.com/" />

<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="https://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
js猜数字小游戏的简单实现代码
Jul 02 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
javascript实现日历效果
Jun 17 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
详解PHP PDO简单教程
2019/05/28 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
js如何打印object对象
2015/10/16 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
js判断节假日实例代码
2017/12/27 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
python中模块查找的原理与方法详解
2017/08/11 Python
聊聊Python中的pypy
2018/01/12 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
编辑个人求职信范文
2013/09/21 职场文书
七匹狼男装广告词
2014/03/21 职场文书
2014年体育工作总结
2014/11/24 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
python开发制作好看的时钟效果
2022/05/02 Python