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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
Node.js的包详细介绍
Jan 14 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
浅析Vue 生命周期
Jun 21 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
vue实现图片懒加载的方法分析
Feb 05 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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
Yii使用技巧大汇总
2015/12/29 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
JavaScript基本对象
2007/01/11 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python学习 流程控制语句详解
2016/06/01 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
学生学习总结的自我评价
2013/10/22 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL