17. 坐标和尺寸
Offset & Dimensions
初学者经常会迷惑于jQuery的提供的获取/设置坐标和尺寸接口的差异,不知道在什么情况下该使用什么接口,现将接口和差异整理如下:
l 坐标 Offset
接口
|
公式
|
说明
|
.offset()
|
相对于文档document的坐标
|
返回或设置匹配元素相对于文档的偏移(位置),返回的对象包含两个整形属性:top和left,以像素计。此方法只对可见元素有效。
设置时可以接受带有left和top属性的对象,或函数,使用函数来设置所有匹配元素的偏移坐标。
隐藏元素、window、document无效
|
.offsetParent()
|
取到最近的父节点
|
不是坐标接口
|
.position()
|
相对于父元素parent的坐标
|
返回匹配元素相对于父元素的位置(偏移)。该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
.position()把元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对absolute或者相对定位relative的父元素的偏移位置。使用.position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
只能获取,没有设置接口
对隐藏元素、window、document无效
|
.scrollLeft()
.scrollTop()
|
滚动条的水平和垂直位置
|
获取或设置滚动条的水平和垂直位置。
对可见或隐藏元素都有效,对window、document有效
对非容器型元素无效
|
l 尺寸 Demensions(结合后边的图一起理解)
- 大小: 9.5 KB
分享到:
相关推荐
jQuery源码分析-插件
jQuery源码分析-事件(1).
jQuery源码分析-初步
jQuery源码分析-魔术方法
jQuery源码分析-事件(2).
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为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。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...
- **Dimensions & Offset**:解析jQuery如何计算和操作元素的尺寸、位置和偏移量,确保布局和定位的准确性。 #### 八、深入研究与最佳实践 - **如何做jQuery源码分析**:提供进行源码分析的方法论,指导读者如何...
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 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-日期框扩展成时间框 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.js // 这个是源码哦 截至2017.11.21, jQuery3.x 最新最稳定版本
同时,插件还提供了延迟执行和节流功能,以优化性能,避免频繁的尺寸检查导致的性能问题。 4. 使用技巧与注意事项 - 节流与防抖:在处理大量元素或者频繁触发的场景下,可以考虑使用节流(throttle)或防抖...