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 flash复制库类 Zero Clipboard
Jan 17 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
JS中表单的使用小结
Jan 11 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
JS实现动态星空背景效果
Nov 01 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Python中装饰器高级用法详解
2017/12/25 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
单位人事专员介绍信
2014/01/11 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
学子宴答谢词
2014/01/25 职场文书
太太口服液广告词
2014/03/20 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
出售房屋委托书范本
2014/09/24 职场文书
工伤调解协议书
2016/03/21 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle