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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 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
mysq GBKl乱码
2006/11/28 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
装潢设计专业推荐信模板
2013/11/26 职场文书
生产现场工艺工程师岗位职责
2013/11/28 职场文书
关于人生的感言
2014/01/17 职场文书
民族团结先进个人材料
2014/02/05 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
爱国演讲稿400字
2014/05/07 职场文书
安全标语口号
2014/06/09 职场文书
师范生求职自荐信
2014/06/14 职场文书
中国世界遗产导游词
2015/02/13 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
教师节联欢会主持词
2015/07/04 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
详细了解MVC+proxy
2021/07/09 Java/Android
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python