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源码分析-03构造jQuery对象
jQuery源码分析-02正则表达式
jQuery源码分析-事件(2).
139.jQuery源码分析-魔术方法.rar
jQuery-, jQuery源码解读 -- jQuery v1.10.2
NULL 博文链接:https://nuysoft.iteye.com/blog/1189156
NULL 博文链接:https://nuysoft.iteye.com/blog/1198058
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
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插件jquery-ui-1.8.2.custom.min.js
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
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-1.8.0.js/jquery-min.1.8.0.js 赶快来体验最新的吧
NULL 博文链接:https://nuysoft.iteye.com/blog/1195313