Jquery中offset()和position()的区别分析

首页

web前端

js教程

Jquery中offset()和position()的区别分析_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:15 PM

jquery offset position 区别

本文实例分析了Jquery中offset()和position()的区别。分享给大家供大家参考。具体分析如下：

一、Jquery中offset()

获取匹配元素在当前视口的相对偏移。总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

例如：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

登录后复制

二、Jquery中position()

获取匹配元素相对父元素的偏移。更通俗一点，含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素，那么会计算相对于文档（即视区左上角）的位置. 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。

例如：

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

登录后复制

三、offset()和position()的区别

1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口，不包括浏览器的菜单栏等，当然我们也不太需要使用jquery来控制整个浏览器，我们所要控制的是页面窗口。

2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式，则其处理方式和offset()一样，是当前窗口的偏移量。

3、使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移

4、使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。

5、一般情况下，如果要显示的元素B存放在元素A的同一父元素下（即B为A的兄弟节点），这个时候使用position() 是最合适的；如果显示的元素B存放在DOM的最顶端或者最底端（即其父元素就是body）。这个时候用offset()是最好的。

希望本文所述对大家的jQuery程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

显示更多

Related knowledge

PS导出PDF如何设置密码保护 Apr 06, 2025 pm 04:45 PM

在 Photoshop 中导出带密码保护的 PDF：打开图像文件。点击“文件”>“导出”>“导出为 PDF”。设置“安全性”选项，两次输入相同的密码。点击“导出”生成 PDF 文件。

H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于：技术架构：H5基于网页技术，小程序和APP为独立应用程序。体验和功能：H5轻便易用，功能受限；小程序轻量级，交互性好；APP功能强大，体验流畅。兼容性：H5跨平台兼容，小程序和APP受平台限制。开发成本：H5开发成本低，小程序中等，APP最高。适用场景：H5适合信息展示，小程序适合轻量化应用，APP适合复杂功能应用。

centos和ubuntu的区别 Apr 14, 2025 pm 09:09 PM

CentOS 和 Ubuntu 的关键差异在于：起源（CentOS 源自 Red Hat，面向企业；Ubuntu 源自 Debian，面向个人）、包管理（CentOS 使用 yum，注重稳定；Ubuntu 使用 apt，更新频率高）、支持周期（CentOS 提供 10 年支持，Ubuntu 提供 5 年 LTS 支持）、社区支持（CentOS 侧重稳定，Ubuntu 提供广泛教程和文档）、用途（CentOS 偏向服务器，Ubuntu 适用于服务器和桌面），其他差异包括安装精简度（CentOS 精

在router文件夹下的index.js文件中为什么需要调用Vue.use(VueRouter)？ Apr 05, 2025 pm 01:03 PM

在router文件夹下的index.js文件中注册VueRouter的必要性在开发Vue应用程序时，常常会遇到关于路由配置的问题。特�...

JavaScript中如何从指定DOM节点下使用XPath进行查找？ Apr 04, 2025 pm 11:15 PM

DOM节点下XPath查找方法详解在JavaScript中，我们经常需要根据XPath表达式从DOM树中查找特定的节点。如果需要从某�...

不同数据库系统添加列的语法有什么区别 Apr 09, 2025 pm 02:15 PM

不同数据库系统添加列的语法为：mysql：alter table table_name add column_name data_type; postgresql：alter table table_name添加column_name data_type; oracle; oracle：alter table table_name add（column_name data_type）

laravel和thinkphp的区别 Apr 18, 2025 pm 01:09 PM

Laravel 和 ThinkPHP 都是流行的 PHP 框架，在开发中各有优缺点。本文将深入比较这两者，重点介绍它们的架构、特性和性能差异，以帮助开发者根据其特定项目需求做出明智的选择。

centos如何查看防火墙状态 Apr 14, 2025 pm 08:18 PM

CentOS防火墙的状态可以通过sudo firewall-cmd --state命令查看，返回running或not running。更详细的信息可以使用sudo firewall-cmd --list-all查看，包括已配置的区域、服务、端口等。如果 firewall-cmd 无法解决问题，可以使用sudo iptables -L -n查看iptables规则。修改防火墙配置前请务必做好备份，以确保服务器安全性。

See all articles

Jquery中offset()和position()的区别分析_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题