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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
js中arguments对象的深入理解
May 14 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
vue实现日历表格(element-ui)
Sep 24 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
教大家制作简单的php日历
2015/11/17 PHP
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
执行总经理岗位职责
2014/02/03 职场文书
道德演讲稿
2014/05/21 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python