深度理解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">This is a paragraph.</p>
<button>Set the offset coordinates of the p element</button>

</body>
</html>

四、注意事项

offset() 方法 返回的top , left. 跟 margin-top,margin-left 也有关系。

如果元素有margin-top,margin-left. 它获取当前的margin. 没有则是默认取值。

如果父元素也有margin,broder 的话。它也会受到影响。取值要更大。 因为offset() 取的当前与文档的偏移坐标。

时间: 2024-10-11 15:50:27

深度理解Jquery 中 offset() 方法的相关文章

深度理解Jquery 中 scrollTop() 方法

这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的[垂直滚动条位置]. Note: 当滚动条位置位于最顶部时,位置是0:当用于返回位置时:    该方法返回 第一个匹配元素的滚动条的垂直位置.当用于设置位置时:    该方法设置 所有匹配元素的滚动条的垂直位置. scrollTop() 语法 返回滚动条位置 $(selector).scrol

理解jquery的.on()方法

jquery在的.on()方法用来给元素绑定事件处理函数的,我经常用在两个地方: 给未来的元素绑定事件:我总是这样用:$(document).on('click','#div1',function(){}); 给拥有同一个父元素的多个子元素绑定事件. 可以查看以前写的博客:jQuery中对未来的元素绑定事件 先来看一个实例: 在页面A的一个div里动态加载页面B,页面B里的一个div绑定了一个单击事件. 页面A如下: <body> <input type="button&quo

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

“jquery中each方法和选择器”的学习笔记

<head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

jQuery中attr()方法用法实例

本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元素指定属性的属性值. 代码如下: $(selector).attr(name) 参数列表: 参数 描述 name 定义要获取其值的属性名称. 实例代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="

jQuery中eq()方法用法

这篇文章主要介绍了jQuery中eq()方法用法,实例分析了eq()方法的功能.定义及获取匹配元素集上的相应位置索引元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代码如下: $(selector).eq(index) 参数列表: 参数 描述 index 定义元素在元素集中的索引,从零开始的.      如果是

JQuery中$.ajax()方法参数

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

jQuery中animate()方法以及$(&#39;body&#39;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

$("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html").animate({"scrollTop":top}): 只被Firefox支持,而不被chrome支持. 如果想让这段js被chrome和Firefox都支持的话,应该这样: $("html,body").animate({"scrollTop"

锋利的jQuery读书笔记---jQuery中Ajax--load方法

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu