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 学习之旅 (3)
Feb 05 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python opencv实现运动检测
2018/07/10 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
jupyter 导入csv文件方式
2020/04/21 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
如何进行Linux分区优化
2016/09/13 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
企业文化标语口号
2014/06/09 职场文书
海洋科学专业求职信
2014/08/10 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
党校个人总结
2015/03/04 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
同事欢送会致辞
2015/07/31 职场文书