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使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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
ThinkPHP的URL重写问题
2014/06/22 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
JS backgroundImage控制
2009/05/19 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python中的引用知识点总结
2019/05/20 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
2015届本科毕业生自我鉴定
2014/09/27 职场文书
跳高加油稿
2015/07/21 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang