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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JS验证字符串功能
Feb 22 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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
PHP高自定义性安全验证码代码
2011/11/27 PHP
浅析php header 跳转
2013/06/17 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
python文件写入write()的操作
2019/05/14 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
django如何自己创建一个中间件
2019/07/24 Python
python3字符串操作总结
2019/07/24 Python
python web框架 django wsgi原理解析
2019/08/20 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python中如何使用虚拟环境
2020/10/14 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
自行车广告词大全
2014/03/21 职场文书
股票投资建议书
2014/05/19 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers