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判断浏览器的比较全的代码
Feb 13 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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
图解上海144收音机
2021/03/02 无线电
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php实现算术验证码功能
2018/12/05 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python win32 简单操作方法
2017/05/25 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python format 格式化输出方法
2018/07/16 Python
Django实现学员管理系统
2019/02/26 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
文秘人员工作职责
2014/01/31 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
校运会宣传稿大全
2015/07/23 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
如何做好员工培训计划?
2019/07/09 职场文书