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 相关文章推荐
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
js DOM的学习笔记
Dec 22 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php实现记事本案例
2020/10/20 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
深入理解Python中字典的键的使用
2015/08/19 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
采购意向书范本
2014/03/31 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
运动员获奖感言
2014/08/15 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Python中time标准库的使用教程
2022/04/13 Python
python中redis包操作数据库的教程
2022/04/19 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers