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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
js实现直播点击飘心效果
Aug 19 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 缓冲的免费实现方法
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
PHP导入导出Excel代码
2015/07/07 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
python切割图片的示例
2020/11/12 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
Django drf请求模块源码解析
2021/06/08 Python