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 Easyui Tree的oncheck事件实现代码
May 28 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
基于vuex实现购物车功能
Jan 10 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
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
星球大战与Python之间的那些事
2016/01/07 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
详解python的四种内置数据结构
2019/03/19 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
校园新闻广播稿
2014/01/10 职场文书
高中学生期末评语
2014/04/25 职场文书
学校宣传标语
2014/06/18 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2015年底工作总结范文
2015/05/15 职场文书
详解Redis复制原理
2021/06/04 Redis
你需要掌握的20个Python常用技巧
2022/02/28 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers