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获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
laravel学习教程之存取器
2016/07/30 PHP
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jquery easyui使用心得
2014/07/07 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
js比较日期大小的方法
2015/05/12 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python自动发微信监控报警
2019/09/06 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
超市员工管理制度
2015/08/06 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
CSS 伪元素::marker详解
2021/06/26 HTML / CSS