`
nuysoft
  • 浏览: 520467 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
91bd5d30-bd1e-3b00-9210-87db1cca0016
jQuery技术内幕
浏览量:200461
社区版块
存档分类
最新评论

[原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset

阅读更多

边读边写,不正确的地方,还请各位告诉我,多多交流共同学习,PDF下载地址在最后。

17. 坐标和尺寸 Offset & Dimensions

初学者经常会迷惑于jQuery的提供的获取/设置坐标和尺寸接口的差异,不知道在什么情况下该使用什么接口,现将接口和差异整理如下:

 

l  坐标 Offset

 

接口

公式

说明

.offset()

相对于文档document的坐标

返回或设置匹配元素相对于文档的偏移(位置),返回的对象包含两个整形属性:topleft,以像素计。此方法只对可见元素有效。

设置时可以接受带有lefttop属性的对象,或函数,使用函数来设置所有匹配元素的偏移坐标。

隐藏元素windowdocument无效

.offsetParent()

取到最近的父节点

不是坐标接口

.position()

相对于父元素parent的坐标

返回匹配元素相对于父元素的位置(偏移)。该方法返回的对象包含两个整型属性:top left,以像素计。此方法只对可见元素有效。

.position()把元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对absolute或者相对定位relative的父元素的偏移位置。使用.position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

只能获取,没有设置接口

隐藏元素、windowdocument无效

.scrollLeft()

.scrollTop()

滚动条的水平和垂直位置

获取或设置滚动条的水平和垂直位置。

对可见或隐藏元素都有效,对windowdocument有效

对非容器型元素无效

 

l  尺寸 Demensions(结合后边的图一起理解)

 

接口

公式

说明

.width(), .height()

content

获取或设置匹配元素的高度、宽度,如果不为该方法设置参数,则返回第一个匹配元素的高度、宽度(单位是像素,整型值,不带单位)

对可见和隐藏元素都有效

.innerWidth()

.innerHeight()

content+padding

只能获取,没有设置接口(单位是像素,整型值,不带单位)

windowdocument无效,用.width()/.height()代替

.outerWidth()

.outerHeight()

content+padding+border

+可选的margin

只能获取,没有设置接口(单位是像素,整型值,不带单位)

windowdocument无效,用.width()/.heigth()代替

 

 

 

0
1
分享到:
评论
2 楼 nuysoft 2011-11-24  
晨曦的朝阳 写道
终于看到比较轻松的一节了。

懒了,只翻译了官网API
1 楼 晨曦的朝阳 2011-11-23  
终于看到比较轻松的一节了。

相关推荐

    jQuery源码分析-插件

    jQuery源码分析-插件

    jQuery源码分析-事件(1).

    jQuery源码分析-事件(1).

    jQuery源码分析-初步

    jQuery源码分析-初步

    jQuery源码分析-魔术方法

    jQuery源码分析-魔术方法

    jQuery源码分析-事件(2).

    jQuery源码分析-事件(2).

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jQuery源码分析-03构造jQuery对象

    ### jQuery源码分析—构造jQuery对象 #### 一、源码结构概览 根据所提供的文件内容,本节将深入分析如何构建jQuery对象及其核心构造逻辑。首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 ...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jQuery源码分析系列.pdf

    - **Dimensions & Offset**:解析jQuery如何计算和操作元素的尺寸、位置和偏移量,确保布局和定位的准确性。 #### 八、深入研究与最佳实践 - **如何做jQuery源码分析**:提供进行源码分析的方法论,指导读者如何...

    jquery.editable-select

    6. **压缩和非压缩版本**:提供的 `jquery.editable-select.js` 和 `jquery.editable-select.min.js` 分别是未压缩和压缩后的版本。在开发阶段,可以使用未压缩版方便调试,而在生产环境中,压缩版可以减少文件大小...

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jquery.datepicker-zh-CN.js

    jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...

    jquery-ui-datepicker中文版

    jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...

    jquery-migrate-3.0.0.min.js 含源码

    jquery-migrate-3.0.0.min.js 含源码 包含以下文件: jquery-migrate-3.0.0.min.js jquery-migrate-3.0.0.js // 这个是源码哦 截至2017.11.21, jQuery3.x 最新最稳定版本

    jquery.ba-resize.min

    同时,插件还提供了延迟执行和节流功能,以优化性能,避免频繁的尺寸检查导致的性能问题。 4. 使用技巧与注意事项 - 节流与防抖:在处理大量元素或者频繁触发的场景下,可以考虑使用节流(throttle)或防抖...

Global site tag (gtag.js) - Google Analytics