- 浏览: 673612 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zhouyicang:
为嘛人气不够,这么好的文章,我找了几十篇博客,才找到这篇解惑了 ...
HTML 块级元素/内联元素 -
young7:
不错,解惑了
HTML 块级元素/内联元素 -
lvjin948:
获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型 -
tarena_hhh:
我用了css优化工具,发现他的顺序有很大不一样?????
CSS属性书写顺序及命名规则 -
deng131:
谢谢你的提醒,是有个地方写错了
javascript事件绑定addEventListener,attachEvent
通过源码来学习offset和position方法才能更深入理解其实现
jQuery的offset()方法
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
jQuery的position()方法
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
jQuery1.4源码:
应用场景:
1: 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置
2: 使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
3: 使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
参考:
http://www.cnblogs.com/believe3301/archive/2008/07/19/1246806.html
http://www.js8.in/602.html
http://article.qmecms.com/frontend/javascript/2010/07/18/jQuery,source,code,analysis,10,jquery,position-297.html
jQuery的offset()方法
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
jQuery的position()方法
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
jQuery1.4源码:
var rtable = /^t(?:able|d|h)$/i, rroot = /^(?:body|html)$/i; if ( "getBoundingClientRect" in document.documentElement ) { jQuery.fn.offset = function( options ) { var elem = this[0], box; if ( options ) { return this.each(function( i ) { jQuery.offset.setOffset( this, options, i ); }); } if ( !elem || !elem.ownerDocument ) { return null; } if ( elem === elem.ownerDocument.body ) { return jQuery.offset.bodyOffset( elem ); } try { box = elem.getBoundingClientRect(); } catch(e) {} var doc = elem.ownerDocument, docElem = doc.documentElement; // Make sure we're not dealing with a disconnected DOM node if ( !box || !jQuery.contains( docElem, elem ) ) { return box || { top: 0, left: 0 }; } var body = doc.body, win = getWindow(doc), clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = (win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop ), scrollLeft = (win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft), top = box.top + scrollTop - clientTop, left = box.left + scrollLeft - clientLeft; return { top: top, left: left }; }; } else { jQuery.fn.offset = function( options ) { var elem = this[0]; if ( options ) { return this.each(function( i ) { jQuery.offset.setOffset( this, options, i ); }); } if ( !elem || !elem.ownerDocument ) { return null; } if ( elem === elem.ownerDocument.body ) { return jQuery.offset.bodyOffset( elem ); } jQuery.offset.initialize(); var computedStyle, offsetParent = elem.offsetParent, prevOffsetParent = elem, doc = elem.ownerDocument, docElem = doc.documentElement, body = doc.body, defaultView = doc.defaultView, prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle, top = elem.offsetTop, left = elem.offsetLeft; while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) { if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) { break; } computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle; top -= elem.scrollTop; left -= elem.scrollLeft; if ( elem === offsetParent ) { top += elem.offsetTop; left += elem.offsetLeft; if ( jQuery.offset.doesNotAddBorder && !(jQuery.offset.doesAddBorderForTableAndCells && rtable.test(elem.nodeName)) ) { top += parseFloat( computedStyle.borderTopWidth ) || 0; left += parseFloat( computedStyle.borderLeftWidth ) || 0; } prevOffsetParent = offsetParent; offsetParent = elem.offsetParent; } if ( jQuery.offset.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) { top += parseFloat( computedStyle.borderTopWidth ) || 0; left += parseFloat( computedStyle.borderLeftWidth ) || 0; } prevComputedStyle = computedStyle; } if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) { top += body.offsetTop; left += body.offsetLeft; } if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) { top += Math.max( docElem.scrollTop, body.scrollTop ); left += Math.max( docElem.scrollLeft, body.scrollLeft ); } return { top: top, left: left }; }; } jQuery.offset = { initialize: function() { var body = document.body, container = document.createElement("div"), innerDiv, checkDiv, table, td, bodyMarginTop = parseFloat( jQuery.css(body, "marginTop") ) || 0, html = "<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>"; jQuery.extend( container.style, { position: "absolute", top: 0, left: 0, margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } ); container.innerHTML = html; body.insertBefore( container, body.firstChild ); innerDiv = container.firstChild; checkDiv = innerDiv.firstChild; td = innerDiv.nextSibling.firstChild.firstChild; this.doesNotAddBorder = (checkDiv.offsetTop !== 5); this.doesAddBorderForTableAndCells = (td.offsetTop === 5); checkDiv.style.position = "fixed"; checkDiv.style.top = "20px"; // safari subtracts parent border width here which is 5px this.supportsFixedPosition = (checkDiv.offsetTop === 20 || checkDiv.offsetTop === 15); checkDiv.style.position = checkDiv.style.top = ""; innerDiv.style.overflow = "hidden"; innerDiv.style.position = "relative"; this.subtractsBorderForOverflowNotVisible = (checkDiv.offsetTop === -5); this.doesNotIncludeMarginInBodyOffset = (body.offsetTop !== bodyMarginTop); body.removeChild( container ); body = container = innerDiv = checkDiv = table = td = null; jQuery.offset.initialize = jQuery.noop; }, bodyOffset: function( body ) { var top = body.offsetTop, left = body.offsetLeft; jQuery.offset.initialize(); if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) { top += parseFloat( jQuery.css(body, "marginTop") ) || 0; left += parseFloat( jQuery.css(body, "marginLeft") ) || 0; } return { top: top, left: left }; }, setOffset: function( elem, options, i ) { var position = jQuery.css( elem, "position" ); // set position first, in-case top/left are set even on static elem if ( position === "static" ) { elem.style.position = "relative"; } var curElem = jQuery( elem ), curOffset = curElem.offset(), curCSSTop = jQuery.css( elem, "top" ), curCSSLeft = jQuery.css( elem, "left" ), calculatePosition = (position === "absolute" && jQuery.inArray('auto', [curCSSTop, curCSSLeft]) > -1), props = {}, curPosition = {}, curTop, curLeft; // need to be able to calculate position if either top or left is auto and position is absolute if ( calculatePosition ) { curPosition = curElem.position(); } curTop = calculatePosition ? curPosition.top : parseInt( curCSSTop, 10 ) || 0; curLeft = calculatePosition ? curPosition.left : parseInt( curCSSLeft, 10 ) || 0; if ( jQuery.isFunction( options ) ) { options = options.call( elem, i, curOffset ); } if (options.top != null) { props.top = (options.top - curOffset.top) + curTop; } if (options.left != null) { props.left = (options.left - curOffset.left) + curLeft; } if ( "using" in options ) { options.using.call( elem, props ); } else { curElem.css( props ); } } }; jQuery.fn.extend({ position: function() { if ( !this[0] ) { return null; } var elem = this[0], // Get *real* offsetParent offsetParent = this.offsetParent(), // Get correct offsets offset = this.offset(), parentOffset = rroot.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset(); // Subtract element margins // note: when an element has margin: auto the offsetLeft and marginLeft // are the same in Safari causing offset.left to incorrectly be 0 offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0; offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0; // Add offsetParent borders parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth") ) || 0; parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth") ) || 0; // Subtract the two offsets return { top: offset.top - parentOffset.top, left: offset.left - parentOffset.left }; }, offsetParent: function() { return this.map(function() { var offsetParent = this.offsetParent || document.body; while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) { offsetParent = offsetParent.offsetParent; } return offsetParent; }); } });
应用场景:
1: 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置
2: 使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
3: 使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
参考:
http://www.cnblogs.com/believe3301/archive/2008/07/19/1246806.html
http://www.js8.in/602.html
http://article.qmecms.com/frontend/javascript/2010/07/18/jQuery,source,code,analysis,10,jquery,position-297.html
发表评论
-
IE浏览器stylesheets加载资源限制问题
2015-03-08 20:30 1072@import url()做一下总结: 1:@import ... -
理解Javascript原型及继承
2012-08-15 22:13 1346js初次使用起来觉得很简单但是在使用一段时间后很不深入的理解原 ... -
JS判断IE浏览器支持版本
2012-02-01 19:00 2968/* * @description 判断是否是IE,返回具体 ... -
jsonp动态创建script方式IE9问题
2012-02-01 16:28 2384在IE9浏览器创建一个script元素,然后指定其src属性u ... -
IE9下使用jsonp方式调用问题
2012-01-31 19:03 22921. 如果JSONP返回的Content-Type不符合规范, ... -
JavaScript获取浏览器语言类型
2011-12-31 18:24 7807获取浏览器语言: IE: navigator.browser ... -
IE Security Comprehensive Protection
2011-12-19 20:14 1766IE浏览器安全方面的处理,本人英文不好建议大家直接看英文: ... -
javaScript 中比较数字字符串问题
2011-10-10 21:49 4674在实现前端页面排序功能过程中遇到的问题,由于自己的粗心导致了生 ... -
javascript设置label标签 for属性
2011-09-11 10:36 3607js创建label标签的for属性用来增加操作响应区域。 v ... -
javascript事件绑定addEventListener,attachEvent
2011-07-31 18:55 3523为了考虑浏览器的兼容性问题,都需要对浏览器进行类型检测。 f ... -
readyState五种状态详解
2011-07-24 14:15 1614(0) UNINITIALIZED 未初始化 The obje ... -
getElementByTagName 与 querySelectorAll
2011-07-14 11:29 1478虽然网上有中文翻译但是还是直接看英文有感觉。getElemen ... -
拖放 Drag and drop 方法
2011-07-10 18:55 1526虽然网上又很多实现方法,但是还是需要理解拖放原理。通过绑定on ... -
闭包传入参数 window & undefined
2011-07-03 08:53 2303大家在前端开发中对闭包应该和熟悉了,也就是几种常见的闭包方式: ... -
textarea光标位置插入文字
2011-06-18 18:14 2128各浏览器TextArea获得焦点后的光标位置情况: text ... -
IE6上Array不支持indexOf方法
2011-06-06 10:17 2252在IE6不支持Array上indexOf方法,又是可恶的ie, ... -
处理不支持JavaScript脚本情况
2011-05-26 10:24 1339现在主流的浏览器都支持javascrip, 但还是有小部分不支 ... -
动态创建iframe设置属性name问题
2011-04-20 13:54 2732通常iframe的name可以是link或者form的targ ... -
WebSocket and Socket.IO
2011-04-06 15:39 3464WebSocket API是下一代客户端-服务器的异步通信方法 ... -
Preload CSS/JavaScript预加载
2011-04-06 10:20 1473希望达到效果是页面第一次载入以后,如果在次刷新页或者进入下一个 ...
相关推荐
在jQuery中,`offset()`和`position()`方法是用来获取元素位置的重要工具,它们的主要区别在于参考对象的不同。理解这两个方法的用法对于进行精确的页面布局和动态效果处理至关重要。 `offset()`方法返回的是匹配...
在进行网页开发时,定位元素是经常需要进行的操作,而在JQuery中,offset()和position()是用于获取元素位置的两个主要方法。它们虽然在某些情况下可以提供相似的结果,但这两个方法在使用上存在本质的区别。了解它们...
先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对... 先来看看在jquery框架源码里面,是怎么获得position()的: 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /
首先,我们来详细探讨Position方法与jQuery中的另一个常用方法offset()之间的区别。offset()方法用于获取元素相对于文档的当前位置,其返回值包含元素的top和left属性。然而,Position方法返回的是相对于最近的定位...
在web前端开发中,jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等...通过本文的介绍和实例演示,相信读者已经能够对jQuery中offset()方法的用法有了较为深入的理解。
在jQuery中,获取元素位置的方法主要有两个:.position()和.offset()。.position()方法用于获取元素相对于其最近的已定位的父元素的位置,而.offset()方法则是获取相对于文档的绝对位置。然而,开发者在使用....
原生JavaScript没有直接提供类似于offset()的便捷方法来直接获取元素的绝对偏移位置,但我们可以通过一些其他属性和方法来间接获得。在文档对象模型(DOM)中,每个DOM节点都有offsetParent属性,该属性指向最近的...
在实际应用中,offset()和position()方法可以根据需要获得不同类型的坐标信息。它们是前端开发中常用的工具,对于处理动画、交互效果等都非常有帮助。理解这两个方法之间的区别以及如何正确使用它们,对于进行网页...
offset() 方法是 jQuery 中的一个实用工具,用于获取或设置匹配元素相对于文档(document)的位置。它提供了一种便捷的方式来确定元素的当前坐标位置,或者动态调整元素的布局。 具体来说,offset() 方法可以分为...
`jQuery.position()`函数是jQuery库中的一个重要方法,用于获取页面中元素相对于其最近的定位祖先元素(即CSS position属性设置为absolute、relative或fixed的祖先)的偏移坐标。这个函数对于实现精确的元素布局和...
本篇文章将深入探讨jQuery中的常用方法,基于jQuery 1.4版本进行总结,帮助开发者更好地理解和应用这些功能。 1. **选择器(Selectors)**:jQuery的选择器与CSS选择器相似,如`$("#id")`选取ID为id的元素,`$("....
在本篇文章中,我们将深入探讨一个与jQuery相关的代码片段,该片段主要关注于如何使用`offset()`方法来获取DOM元素的位置,并进一步利用这些位置信息来...希望本文能帮助你更好地理解和应用jQuery中的`offset()`方法。
在这篇文章的示例中,页面的主内容部分和背景部分都被设置为相对定位(position: relative),而且背景图片被设置为绝对定位(position: absolute),并且背景图片被放置在z轴的最底层(z-index: -5),以确保在滚动...
首先,jQuery核心函数和方法是整个库的基石。`jQuery()`函数是jQuery库中最基本的函数,它允许开发者传入一个CSS选择器字符串来匹配一组DOM元素,并返回一个jQuery对象。这个对象使得链式操作成为可能。例如,使用`...
- `offset()`、`position()`、`scrollTop()`、`scrollLeft()`等:元素的位置和滚动信息。 - `height()`、`width()`、`innerHeight()`、`innerWidth()`、`outerHeight()`、`outerWidth()`:元素的尺寸计算。 **事件...
**jQuery API 中文手册** jQuery 是一款广泛应用于前端开发的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及...在实际开发中,结合实践与手册,可以更好地理解和掌握jQuery的精髓。