jQuery 教程手册（新）

jQuery 教程手册（新）: jQuery 简介; jQuery 安装; jQuery 语法; jQuery 选择器; jQuery 事件; jQuery隐藏和显示; jQuery 淡入淡出; jQuery滑动; jQuery动画; jQuery停止动画; jQuery Callback 方法; jQuery链; jQuery捕获; jQuery设置; jQuery添加元素; jQuery删除元素; jQuery CSS 类; jQuery css() 方法; jQuery 尺寸; jQuery 遍历; jQuery祖先; jQuery后代; jQuery同胞; jQuery过滤; jQuery AJAX 简介; jQuery load() 方法; jQuery get() 和 post() 方法; jQuery noConflict() 方法; jQuery JSONP; jQuery 选择器; jQuery 事件方法; jQuery 效果方法; jQuery HTML / CSS 方法; jQuery 遍历方法; jQuery AJAX 方法; jQuery数据; jQuery DOM 元素方法; jQuery 核心; jQuery 属性; jQuery prepend() 方法; jQuery prependTo() 方法; jQuery prop() 方法; jQuery remove() 方法; jQuery removeAttr() 方法; jQuery removeClass() 方法; jQuery removeProp() 方法; jQuery replaceAll() 方法; jQuery replaceWith() 方法; jQuery scrollLeft() 方法; jQuery scrollTop() 方法; jQuery text() 方法; jQuery toggleClass() 方法; jQuery unwrap() 方法; jQuery val() 方法; jQuery wrap() 方法; jQuery wrapAll() 方法; jQuery wrapInner() 方法; jQuery escapeSelector() 方法; jQuery cssHooks 方法; jQuery add() 方法; jQuery children() 方法; jQuery closest() 方法; jQuery contents() 方法; jQuery each() 方法; jQuery eq() 方法; jQuery filter() 方法; jQuery find() 方法; jQuery first() 方法; jQuery has() 方法; jQuery is() 方法; jQuery last() 方法; jQuery next() 方法; jQuery nextAll() 方法; jQuery nextUntil() 方法; jQuery not() 方法; jQuery offsetParent() 方法; jQuery parent() 方法; jQuery parents() 方法; jQuery parentsUntil() 方法; jQuery prev() 方法; jQuery prevAll() 方法; jQuery prevUntil() 方法; jQuery siblings() 方法; jQuery slice() 方法; jQuery * 选择器; jQuery #id 选择器; jQuery .class 选择器; jQuery 多个类选择器; jQuery element 选择器; jQuery 多个元素选择器; jQuery :first 选择器; jQuery :last 选择器; jQuery :even 选择器; jQuery :odd 选择器; jQuery :first-child 选择器; jQuery ajax() 方法; jQuery :first-of-type选择器; jQuery :last-child 选择器; jQuery :last-of-type 选择器; jQuery :nth-child() 选择器; jQuery :nth-last-child() 选择器; jQuery :nth-of-type() 选择器; jQuery :nth-last-of-type() 选择器; jQuery :only-child 选择器; jQuery :only-of-type 选择器; jQuery parent > child 选择器; jQuery 父后代选择器; jQuery element + next 选择器; jQuery element ~ siblings 选择器; jQuery :eq() 选择器; jQuery :gt() 选择器; jQuery :lt() 选择器; jQuery :not() 选择器; jQuery :header 选择器; jQuery :animated 选择器; jQuery :focus 选择器; jQuery :contains() 选择器; jQuery :has() 选择器; jQuery :empty 选择器; jQuery :parent 选择器; jQuery :hidden 选择器; jQuery :visible 选择器; jQuery :root 选择器; jQuery :lang() 选择器; jQuery ajaxComplete() 方法; jQuery ajaxError() 方法; jQuery ajaxSend() 方法; jQuery ajaxSetup() 方法; jQuery ajaxStart() 方法; jQuery ajaxStop() 方法; jQuery ajaxSuccess() 方法; jQuery [attribute] 选择器; jQuery [attribute=value] 选择器; jQuery [attribute!=value] 选择器; jQuery [attribute$=value] 选择器; jQuery [attribute|=value] 选择器; jQuery [attribute^=value] 选择器; jQuery [attribute~=value] 选择器; jQuery [attribute*=value] 选择器; jQuery [name="value"][name2="value2″] 选择器; jQuery :input 选择器; jQuery :text 选择器; jQuery :password 选择器; jQuery :radio 选择器; jQuery :checkbox 选择器; jQuery :submit 选择器; jQuery :reset 选择器; jQuery :button 选择器; jQuery :image 选择器; jQuery :file 选择器; jQuery :enabled 选择器; jQuery :disabled 选择器; jQuery :selected 选择器; jQuery :checked 选择器; jQuery :target 选择器; jQuery bind() 方法; jQuery blur() 方法; jQuery change() 方法; jQuery get() 方法; jQuery click() 方法; jQuery getJSON() 方法; jQuery dblclick() 事件; jQuery getScript() 方法; jQuery delegate() 方法; jQuery load() 方法; jQuery die() 方法; jQuery param() 方法; jQuery error() 方法; jQuery post() 方法; jQuery event.currentTarget 属性; jQuery serialize() 方法; jQuery event.data 属性; jQuery serializeArray() 方法; jQuery event.delegateTarget 属性; jQuery 核心 jQuery() 方法; jQuery event.isDefaultPrevented() 方法; jQuery 核心 noConflict() 方法; jQuery event.isImmediatePropagationStopped() 方法; jQuery DOM 元素方法 get() 方法; jQuery event.isPropagationStopped() 方法; jQuery DOM 元素方法 - index() 方法; jQuery event.namespace 属性; jQuery DOM 元素方法 - size() 方法; jQuery event.pageX 属性; jQuery DOM 元素方法 - toArray() 方法; jQuery event.pageY 属性; jQuery 遍历 clearQueue() 方法; jQuery event.preventDefault() 方法; jQuery 数据 data() 方法; jQuery event.relatedTarget 属性; jQuery 数据 jQuery.data() 方法; jQuery event.result 属性; jQuery 遍历 dequeue() 方法; jQuery event.stopImmediatePropagation() 方法; jQuery 遍历 jQuery.dequeue() 方法; jQuery event.stopPropagation() 方法; jQuery 遍历 hasData() 方法; jQuery event.target 属性; jQuery 遍历 queue() 方法; jQuery event.timeStamp 属性; jQuery 遍历 jQuery.queue() 方法; jQuery event.type 属性; jQuery 数据 removeData() 方法; jQuery event.which 属性; jQuery 数据 jQuery.removeData() 方法; jQuery event.metakey 属性; jQuery context 属性; jQuery focus() 方法; jQuery jQuery.fx.interval 属性; jQuery focusin() 方法; jQuery jQuery.fx.off 属性; jQuery focusout() 方法; jQuery jQuery.support 属性; jQuery keydown() 方法; jQuery keypress() 方法; jQuery select() 方法; jQuery hover() 方法; jQuery keyup() 方法; jQuery live() 方法; jQuery load() 方法; jQuery mousedown() 方法; jQuery mouseenter() 方法; jQuery mouseleave() 方法; jQuery mousemove() 方法; jQuery mouseout() 方法; jQuery mouseover() 方法; jQuery mouseup() 方法; jQuery off() 方法; jQuery on() 方法; jQuery one() 方法; jQuery $.proxy() 方法; jQuery ready() 方法; jQuery resize() 方法; jQuery scroll() 方法; jQuery submit() 方法; jQuery toggle() 方法; jQuery trigger() 方法; jQuery triggerHandler() 方法; jQuery unbind() 方法; jQuery undelegate() 方法; jQuery unload() 方法; jQuery contextmenu() 方法; jQuery.holdReady()方法; jQuery animate() 方法; jQuery clearQueue() 方法; jQuery delay() 方法; jQuery dequeue() 方法; jQuery fadeIn() 方法; jQuery fadeOut() 方法; jQuery fadeTo() 方法; jQuery fadeToggle() 方法; jQuery finish() 方法; jQuery hide() 方法; jQuery show() 方法; jQuery queue() 方法; jQuery slideDown() 方法; jQuery slideUp() 方法; jQuery slideToggle() 方法; jQuery stop() 方法; jQuery toggle() 方法; jQuery addClass() 方法; jQuery after() 方法; jQuery append() 方法; jQuery appendTo() 方法; jQuery attr() 方法; jQuery before() 方法; jQuery clone() 方法; jQuery css() 方法; jQuery detach() 方法; jQuery empty() 方法; jQuery hasClass() 方法; jQuery height() 方法; jQuery html() 方法; jQuery innerHeight() 方法; jQuery innerWidth() 方法; jQuery insertAfter() 方法; jQuery insertBefore() 方法; jQuery offset() 方法; jQuery offsetParent() 方法; jQuery outerHeight() 方法; jQuery outerWidth() 方法; jQuery width() 方法; jQuery position() 方法

jQuery offset() 方法

offset() 方法设置或返回被选元素相对于文档的偏移坐标。

蹊下更新时间：2019-02-25 17:44:01

具体内容
相关视频
相关知识
最新评论

jQuery offset() 方法

定义和用法

offset() 方法设置或返回被选元素相对于文档的偏移坐标。

当用于返回偏移时：
该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

当用于设置偏移时：
该方法设置所有匹配元素的偏移坐标。

语法

返回偏移坐标：

$(selector).offset()

设置偏移坐标：

$(selector).offset({top:value,left:value})

使用函数设置偏移坐标：

$(selector).offset(function(index,currentoffset))

参数

描述

{top:value,left:value}

当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。可能的值：名/值对，比如 {top:100,left:100}一个带有 top 和 left 的对象（实例）

function(index,currentoffset)

可选。规定返回包含 top 和 left 坐标的对象的函数。

index : 返回集合中元素的 index 位置。

currentoffset : 返回被选元素的当前坐标。

实例

<script>
$(document).ready(function(){
	$("button").click(function(){
		var x=$("p").offset();
		document.write("上: " + x.top + " 左: " + x.left);
	});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>返回p元素的偏移坐标</button>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

推荐手册

jQuery offset() 方法

实例