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操作URL函数修改版
Nov 07 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
jquery实现图片轮播器
May 23 jQuery
vue中v-for加载本地静态图片方法
Mar 03 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
js实现旋转的星空效果
Nov 01 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
原生js实现轮播图
2017/02/27 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
基于Pandas读取csv文件Error的总结
2018/06/15 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
信用社竞聘演讲稿
2014/05/16 职场文书
面试通知短信
2015/04/20 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis