jquery.offset()使用方法总结
jquery.offset()应用背景
很多时候需要对某个div进行定位,或者获取某个元素相对于document的位置,那么我们会用到jquery.offset()。
获得元素相对于document的位置
获得位置是元素相对于document的位置信息,通常可以说是这个元素的坐标值。
// 元素相对于document的左位移
$("#haorooms-id").offset().left
// 元素相对于document的上位移
$("#haorooms-id").offset().top
设置元素相对于document的位置
$(".haorooms").click(function(){x=$("p").offset();$("#span1").text(x.left);$("#span2").text(x.top);
});
这个案例是我们在点击haorooms标签的时候,在id=span1和id=span2上面显示p标签的left值和top值。
也可以用数组方式设置haorooms-id的位置,如下
// 设置元素相对于document的位移,该元素的position必须为非static值
$("#haorooms-id").offset({left:123,top:99});
注意:
需要注意的是,offset的设置值,必须成对出现,否则会报错的哦!
offset不仅可以设置单个元素,也可以设置多个元素不同的坐标值,而不需要jQuery.each操作了,如:
$(".haorooms-class").offset(function(index,haorooms)
{// index为元素索引// haorooms为元素的坐标:top、left// 函数必须返回坐标值return {top:haorooms.top+index,left:haorooms.left+index};
});
demo案例解释,案例应用
写代码没有案例,说不清楚,下面我举一个offset的案例,首先举一个学习的简单例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>haorooms博客-jquery.offset()使用方法总结</title>
</head>
<body><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){var a= $("p").offset().left;
alert(a);$("button").click(function(){$("p").offset({top:100,left:0});});
});
</script>
</head>
<body>
<p>haorooms博客便宜案例.</p>
<button>设置新的偏移</button></body>
</html>
上面案例中,p标签我没有写任何样式,如下图:
点击按钮之后,设置便宜之后,会出现一个相对的定位,如下图:
var a=$("p").offset().left;
alert(a);
是获取p标签左侧的位置!
通过这个案例,你对jquery.offset()了解了多少呢?
jquery.offset()应用
offset()应用的应用很多,你做tips定位的时候,或者弹出图层定位的时候,通常会用的到,本来想举几个案例呢,还是下次再贴上吧!大家先看看上面的解释~~~
深度理解Jquery 中 offset() 方法
一、语法
1、 返回偏移坐标$(selector).offset();top: $(selector).offset().top;left: $(selector).offset().left;2、设置偏移坐标:$(selector).offset({top:value,left:value});参数的含义:{top:value,left:value} 当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。可能的值:(1)、名/值对,比如 {top:100,left:100} , (2)、一个带有 top 和 left 的对象(实例)3、使用函数设置偏移坐标:$(selector).offset(function(index,currentoffset));可选。规定返回包含 top 和 left 坐标的对象的函数。index - 返回集合中元素的 index 位置。currentoffset - 返回被选元素的当前坐标。
二、offset 的定义和用法
offset() 方法设置或返回被选元素 相对于文档的偏移坐标1、当用于返回偏移时:该方法返回第一个匹配元素的偏移坐标,它返回一个带有2个属性( 以像素为单位的 top 和 left 位置)的对象2、当用于设置偏移时:该方法设置所有匹配元素的偏移坐标,
三、实例
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){//名/值 对
$("button").click(function(){$("p").offset({top:200,left:200});
});//对象
$("button").click(function(){newPos=new Object();
newPos.left="0";
newPos.top="100";
$("p").offset(newPos);
});//函数
$("p").offset(function(n,c){newPos=new Object();
newPos.left=c.left+100;
newPos.top=c.top+100;
return newPos;
});});
</script>
</head>
<body><p style="border:1px solid red">这是一段.</p>
<button>设置p元素的偏移坐标/button></body>
</html>
四、注意事项
offset() 方法 返回的top , left. 跟 margin-top,margin-left 也有关系。如果元素有margin-top,margin-left. 它获取当前的margin. 没有则是默认取值。如果父元素也有margin,broder 的话。它也会受到影响。取值要更大。 因为offset() 取的当前与文档的偏移坐标。
做什么事贵在坚持, 什么事都怕认真. 只要你认真起来你就能成功!
jquery.offset()使用方法总结相关推荐
- jQuery初识 - jQuery中的方法
jQuery的attr方法 attr(name|pro|key,val|fn) 作用:获取或者设置属性节点的值 可以传递一个参数,也可以传递两个参数 如果传递一个参数,代表获取属性节点的值 ...
- jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) {return new jQuery.fn.init( selector ...
- jquery中not方法失效的解决方案
jquery中not方法失效的解决方案 参考文章: (1)jquery中not方法失效的解决方案 (2)https://www.cnblogs.com/xxqxxq/p/9269669.html 备忘 ...
- jQuery使用blur()方法触发两次的解决方法
jQuery使用blur()方法触发两次的解决方法 参考文章: (1)jQuery使用blur()方法触发两次的解决方法 (2)https://www.cnblogs.com/wgl1995/p/92 ...
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 参考文章: (1)使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 ( ...
- jquery 异步调用方法中不能给全局变量赋值的原因及解决办法
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...
- jquery的$.extent()方法的总结
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. 2.jQuery.fn.extend(object);给jQuery对象添加方法. jQuery.fn ...
- 理解一下jQuery.extend()和jQuery.fn.extend()方法
为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法. 1. jQuery.extend() 方法有一个重载. jQuery.extend( ...
最新文章
- ceph 代码分析 读_分布式存储 Ceph 的演进经验 SOSP 2019
- 解决Matlab Help文档需要登录才能查看的问题
- 用四种方法Python求出两个有序数组中的中位数
- pythonsys用法_Python中 sys.argv[]的用法简明解释
- IBM 的大型机 z Systems 引入 Go 语言
- Java PropertyPermission newPermissionCollection()方法与示例
- dev shm php,/dev/shm 介绍 --转载
- erlang的cpu调优
- 02-eclipse中构建ant项目和编译运行ant
- python 描述符的应用
- 从996的大讨论看劳资博弈的历史
- it试用评估_it员工转正自我评价
- 克隆硬盘后进不去系统_Win10怎么快速复制磁盘或克隆磁盘到另一个磁盘上 - 分区助手教程...
- 网络口碑营销的优势和实施步骤
- python是一门跨平台语言_python属于跨平台语言码
- 中央电视台最常用的 100 首经典背景乐曲(视频制作音乐推荐) 2009-05-12 17:31:47
- xgboost 中的二阶导数为什么收敛更快?
- python内置数值运算函数有哪几个_Python这68个内置函数,建议你吃透!
- Error in sitecustomize; set PYTHONVERBOSE for traceback: NameError: name 'modules_list' is not defin
- Matlab读取CSV文件,并进行矩阵处理