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筛选器全系列介绍
Aug 27 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 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
再说下636单管机
2021/03/02 无线电
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php阳历转农历优化版
2016/08/08 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python的文件操作方法汇总
2017/11/10 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
2014年基建工作总结
2014/12/12 职场文书
2015年班干部工作总结
2015/04/29 职场文书
同事去世追悼词
2015/06/23 职场文书
基层党建工作简报
2015/07/21 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书