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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 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引用地址改变变量值的问题
2012/03/23 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
js监听键盘事件示例代码
2013/07/26 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
javascript常用函数(1)
2015/11/04 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python 中random模块的常用方法总结
2017/07/08 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
爱情保证书范文
2014/02/01 职场文书
年终晚会主持词
2014/03/25 职场文书
仓库管理计划书
2014/05/04 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
创先争优个人总结
2015/03/04 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android