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插件 cluetip 关键词注释
Jan 12 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
js实现拾色器插件(ColorPicker)
May 21 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
详解Python自建logging模块
2018/01/29 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
学校感恩教育活动总结
2014/07/07 职场文书
会员活动策划方案
2014/08/19 职场文书
美丽人生观后感
2015/06/03 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript