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实现仿银行密码输入框效果的代码
Dec 13 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序实现留言功能
Oct 31 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php 调用远程url的六种方法小结
2009/11/02 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python发送伪造的arp请求
2014/01/09 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python异常的检测和处理方法
2018/10/26 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Python super()函数使用及多重继承
2020/05/06 Python
教师实习的自我鉴定
2013/10/26 职场文书
思想汇报范文
2013/11/04 职场文书
八一建军节活动方案
2014/02/10 职场文书
员工生日会策划方案
2014/06/14 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
生活小常识广播稿
2015/08/19 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
MySQL系列之二 多实例配置
2021/07/02 MySQL
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL