jQuery中offsetParent()方法用法实例
更新时间：2015年01月19日 09:26:49 投稿：shichen2014
这篇文章主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中offsetParent()方法用法。分享给大家供大家参考。具体分析如下：
此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素。
所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法仅对可见元素有效。
语法结构:
复制代码 代码如下:
$(selector).offsetParent()
代码实例:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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/
相关文章
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
基于jQuery实现的Ajax 验证用户名是否存在的实现代码，需要的朋友可以参考下。2011-04-04
这篇文章主要介绍了jQuery+PHP打造滑动开关效果,实现类似360安全卫士防火墙开启关闭的开关,非常的实用，这里推荐给大家2014-12-12
下面小编就为大家带来一篇Jquery和JS获取ul中li标签的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本篇文章只要是对jQuery自定义事件的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了jquery submit()不能提交表单的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
JQuery团队打造的javascript单元测试工具QUnit介绍
元测试又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑，也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。2010-02-02
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
这篇文章主要为大家详细介绍了Java框架SSH结合Easyui控件实现省市县三级联动示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
使用jQuery的ajax方法向服务器发出get和post请求的方法
这篇文章主要介绍了使用jQuery的ajax方法向服务器发出get和post请求的方法,需要的朋友可以参考下2017-01-01
以下是用jquery控制ASP.NET中的两个asp:listbox控件中选择项的移动。2009-11-11
jquery UI Datepicker时间控件冲突问题解决
这篇文章主要介绍了jquery UI Datepicker时间控件冲突问题的解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论