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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
JS根据生日算年龄的方法
May 05 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue 通过base64实现图片下载功能
Dec 19 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
一个php作的文本留言本的例子(四)
2006/10/09 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
简单实现php上传文件功能
2017/09/21 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python中Selenium库使用教程详解
2020/07/23 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
综合测评自我鉴定
2013/10/08 职场文书
房地产促销活动方案
2014/03/01 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
青春雷锋观后感
2015/06/10 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Python time库的时间时钟处理
2021/05/02 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
React更新渲染原理深入分析
2022/12/24 Javascript