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 相关文章推荐
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
javascript函数特点实例分析
May 14 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
js代码实现轮播图
May 04 Javascript
js制作提示框插件
Dec 24 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入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python3对接mysql数据库实例详解
2019/04/30 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
运动会入场词50字
2014/02/20 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
认真学习保证书
2015/02/26 职场文书
辅导员学期工作总结
2015/08/14 职场文书
单位提档介绍信
2015/10/22 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书