jquery中offset()方法使用示例

jQuery 1.2 新增该函数。

jQueryObject.offset( [ coordinates ] )

注意:

1、如果省略了coordinates参数,则表示获取偏移位置;如果指定了该参数,则表示设置偏移位置。2、offset()函数的"设置"操作针对的是当前jQuery对象所匹配的每一个元素;"读取"操作只针对第一个匹配的元素。

1、获得元素相对于document的位置

获得位置是元素相对于document的位置信息,通常可以说是这个元素的坐标值。

// 元素相对于document的左位移
$("#some-id").offset().left
// 元素相对于document的上位移
$("#some-id").offset().top

2、设置元素相对于document的位置

在设置元素offset的时候,需要该元素为已定位样式,即:relative、absolute、fixed等除了static的position属性值。其实这里,我一直不明白,为什么会有static这个position属性值,而不直接是relative呢?此问暂且按下,继续说jquery的offset()使用方法。

// 设置元素相对于document的位移,该元素的position必须为非static值
$("#some-id").offset({left:123,top:99});

注意:

需要注意的是,offset的设置值,必须成对出现,否则会报错的哦!

offset不仅可以设置单个元素,也可以设置多个元素不同的坐标值,而不需要jQuery.each操作了,如:

$(".some-class").offset(function(index,coords)
{
 // index为元素索引
 // coords为元素的坐标:top、left
 // 函数必须返回坐标值
 return {top:ccoordsoord.top+index,left:coords.left+index};
});

 

实验:

  offset()的top是指元素与document的上边的距离,而不是浏览器当前窗体的上边缘,如图1。

   图1:document高度超过window,window出现滚动条,拖动滚动条,提交按钮的offset().top不变,因为按钮与document上边缘距离未变。

  

  图2:document中的div有滚动条,提交按钮的offset().top随div滚动条变化而变化,因为按钮与document上边缘距离已变。

  

  offset().left 同理。

  通过上面的实验我们可以得出以下结论:offset() 获取元素(html 元素)距离document上边缘、左边缘的像素,我们只要清楚浏览器中document是那部分就可以正确使用offset()。关于document可以阅读 JQuery   window、document、 body

应用:

  1.那么我们怎么保证元素完整的显示在浏览器视窗里呢?我们可以结合offset 和 scrollTop来实现。

  scrollTop获取的是什么值?根据我的实验,只有元素具有滚动条,并且滚动了一定距离,才有scrollTop值,没有滚动条的元素scrollTop=0。

  上面提交button无滚动条,它的scrollTop恒等于0。

  以前我有种错误的认知:document里面的元素与document具有相同的滚动值,这是错误的,子元素与容器的滚动值无关。

  按图1(document有滚动条),需计算控件的offsetTop、height,document的scrollTop;

  按图2(document无滚动条),计算控件的offsetTop、height

  2.浮动div在滚动条滚动时保持在原位

按图1,

var firstTop = $("浮动DIV").offset().top;
var top = firstTop + $(document).scrollTop();
$(浮动DIV).offset({ top: top });
  按图2,

var top = $(浮动DIV).offset().top;
$("浮动DIV").offset({ top: top });

时间: 2024-10-23 17:55:51

jquery中offset()方法使用示例的相关文章

jQuery中offset()方法用法实例_jquery

本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

浅谈jQuery的offset()方法及示例分享_jquery

offset()方法的定义和用法: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="te

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

 JQuery中$.ajax()方法想必大家并不陌生吧,在本文将为大家介绍下其参数及应用示例,感兴趣的朋友不要错过 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址.    type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和    delete也可以使用,但仅部分浏览器支持.    timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的

jQuery中.live()方法的用法

 本篇文章主要是对jQuery中.live()方法的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法.   live(type, [data],fn)   概述   jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效.   这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择

JavaScript中removeChild 方法开发示例代码_javascript技巧

1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

jQuery中scrollLeft()方法用法实例_jquery

本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

Jquery中offset()和position()的区别分析_jquery

本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

jQuery中$.fn的用法示例介绍

jQuery中$.fn的用法示例介绍 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc();  jQuery为开发插件提拱了两个方法,分别是:  jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn

JQuery中clone方法复制节点

  本文实例讲述了JQuery中clone方法复制节点.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT