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访问XML数据的实例
Dec 27 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
JS实现扫雷项目总结
May 19 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自动适应范围的分页代码
2008/08/05 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python mysqldb连接数据库
2009/03/16 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python中random模块用法实例分析
2015/05/19 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
python能否java成为主流语言吗
2020/06/22 Python
HTTP状态码详解
2021/03/18 杂记
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
EJB面试题
2015/07/28 面试题
领导班子自我剖析材料
2014/08/16 职场文书
质量整改报告范文
2014/11/08 职场文书
2015年护士节慰问信
2015/03/23 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
Python  lambda匿名函数和三元运算符
2022/04/19 Python