首页 > 其他分享 >Jquery中offset和position的区别

Jquery中offset和position的区别

时间:2024-02-22 14:15:59浏览次数:27  
标签:Jquery 元素 偏移量 相对 offset position

一、Jquery中offset()

 

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

例如:

二、Jquery中position()

 

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

 

例如:

 

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,元素,偏移量,相对,offset,position
From: https://www.cnblogs.com/itjeff/p/18027180

相关文章

  • jQuery入门
    原文链接:https://zhuanlan.zhihu.com/p/635366269为什么要学jQuery?使用JavaScript开发过程中,有许多的缺点:查找元素的方法单一、遍历数组很麻烦,通常要嵌套一大堆的for循环有兼容性问题、想要实现简单的动画效果也很麻烦、代码冗余。为了解决这些问题,我们在JavaScript开发中使用jQ......
  • jQuery $.ajax() 方法概述
    原文链接:https://www.bejson.com/apidoc/jquery/jQuery.Ajax.html通过HTTP请求加载远程数据。jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获......
  • 使用JQuery双击修改Table中Td
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>table{border-collapse:collapse;border-spacing:0;margin-right:auto;......
  • 利用Jquery Lazyload JS插件实现网页图片延迟加载
    JqueryLazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法。最新的jquerylazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及配置方法。Github项目地址:https://github.com/tuupola/lazyload本文使用的是1.9.7版本(实际与1.9.6版本一致)首先需要引用......
  • Kafka-如何重设消费者位移(OFFSET)
    1.为什么要重设消费者组位移?我们知道,Kafka和传统的消息引擎在设计上是有很大区别的,其中一个比较显著的区别就是,Kafka的消费者读取消息是可以重演的(replayable)。像RabbitMQ或ActiveMQ这样的传统消息中间件,它们处理和响应消息的方式是破坏性的(destructive),即一旦消息被成功......
  • jquery+向上滚动
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-......
  • 无涯教程-String.prototype.includes(searchString, position = 0)函数
    该方法确定字符串是否是给定字符串的子字符串。String.prototype.includes-语法str.includes(searchString[,position])searchString-要搜索的子字符串。position    -该字符串中开始搜索searchString的位置;默认为0。String.prototype.includes-返回值t......
  • 无涯教程-String.prototype.startsWith(searchString, position = 0)函数
    该方法确定字符串是否以指定的字符开头。String.prototype.startsWith-语法str.startsWith(searchString[,position])searchString  - 在此字符串开头要搜索的字符。position     - 该字符串中开始搜索searchString的位置;默认为0。String.prototype.s......
  • ‘utf-8’ codec can’t decode byte 0xe5 in position 1023: unexpected end of data
    使用pycharm在本地调试项目的时候,发现偶尔会出现下面的错误,导致项目无法继续执行下去。但是不适用debug模式,而使用运行模式的时候不会有这样的问题。E:\pycharm_pro\PyCharm2019.2.3\helpers\pydev\_pydevd_bundle\pydevd_comm.pyr=r.decode('utf-8')UnicodeDecodeError:......
  • Flex布局,和position布局,实现上下固定中间部分滚动
    Flex布局实现上下固定中间部分滚动:<divclass="parent"><divclass="header">header--固定</div><divclass="content"><p>content--滚动</p><p>内容部分</p><p>内容部分<......