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 01 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
js实现div色块拖动录制
Jan 16 Javascript
JS实现烟花爆炸效果
Mar 10 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
php给数组赋值的实例方法
2019/09/26 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python实现简单的代理服务器
2015/07/25 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2014年团工作总结
2014/11/27 职场文书
公司会议开幕词
2015/01/29 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python