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 添加和移除函数的通用方法
Oct 20 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
使用vue-cli导入Element UI组件的方法
May 16 Javascript
node app 打包工具pkg的具体使用
Jan 17 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通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
写的htc的数据表格
2007/01/20 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
Python语法快速入门指南
2015/10/12 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
详解Python中namedtuple的使用
2020/04/27 Python
构建高效的python requests长连接池详解
2020/05/02 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
小学生期末评语
2014/04/21 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS