jQuery中offsetParent()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中offsetParent()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素。
所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法仅对可见元素有效。

语法结构:

$(selector).offsetParent()

代码实例:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>offsetParent()函数-三水点靠木</title> 

<style type="text/css"> 

.grandfather

{

  width:200px;

  height:200px;

  background-color:red;

  position:relative;

}

.father

{

  width:150px;

  height:150px;

  background-color:blue;

}

.children

{

  width:50px;

  height:50px;

  background-color:green;

}

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){

    $(".children").offsetParent().css("backgroundColor","yellow"); 

  }) 

}) 

</script> 

</head> 

<body>

<div class="grandfather"> 

<div class="father"> 

  <div class="children"></div> 

</div> 

</div>

<button>查看效果</button> 

</body> 

</html>

以上代码可以将children元素中所有祖先元素中,第一个采用定位的祖先元素的背景颜色设置为红色。

希望本文所述对大家的jQuery程序设计有所帮助。

本文转自:蚂蚁部落http://www.softwhy.com/

Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
node跨域请求方法小结
Aug 25 Javascript
Vue组件中slot的用法
Jan 30 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 #Javascript
javascript数据类型示例分享
Jan 19 #Javascript
jQuery中outerHeight()方法用法实例
Jan 19 #Javascript
jQuery中innerWidth()方法用法实例
Jan 19 #Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 #Javascript
jQuery中innerHeight()方法用法实例
Jan 19 #Javascript
Javascript基础教程之函数对象和属性
Jan 18 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
Farah官方网站:男士服装及配件
2019/11/01 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
施工资料员岗位职责
2014/01/06 职场文书
党员一句话承诺大全
2014/03/28 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
2015年化验室工作总结
2015/04/23 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android