<script src="jquery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("li").click(function () {

                $(this).toggleClass('red');

            })

            console.log($("ul").offset().top)

            console.log($("ul").position().top)

        })

    </script>

</head>

<body>

<div style="position: absolute;top: 100px;left: 100px;">

    <ul style="position: absolute;top: 10px;left: 10px;">

        <li class="red">ads</li>

        <li>ads</li>

        <li>ads</li>

        <li>ads</li>

        <li>ads</li>

    </ul>

</div>

结果：

可以看出offset()是相对于body来说的，而position是相对于父元素来说的

jquery offset()和position()的区别的更多相关文章

  1. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  2. offset()与position()的区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...

  3. jquery offset() 与position()方法的区别

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  4. jquery的offset与position的区别

    这里offset取得是屏幕影藏的y轴的距离➕元素距离屏幕的y轴的距离. 而postion取得的则是,上一个父元素(包含postion定位的)的距离

  5. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  6. js和jq中常见的各种位置距离之offset()和position()的区别（二）

    offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...

  7. .offset()与.position()区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:   offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...

  8. 区分jquery中的offset和position

    一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...

  9. Jquery中的offset()和position()深入剖析

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

随机推荐

  1. 657. Judge Route Circle机器人能否返回

    ［抄题］: Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this r ...

  2. 项目介绍4 y有用

    在青岛做了两年开发,大大小小参与过三个项目的开发,一个是某公司内部的人员管理系统,一个是物流项目,最近做的是一个电商项目. 前两个项目采用的是ssh框架搭建的,最近的项目采用的是ssm框架搭建的.在实 ...

  3. cmake3.2.2 在Ubuntu14.04下的安装

    参考:http://askubuntu.com/questions/610291/how-to-install-cmake-3-2-on-ubuntu-14-04 1.判断相关软件是否安装 sudo  ...

  4. 【图解HTTP】第二章 简单的http协议

    简单的HTTP协议 针对HTTP协议结构进行讲解,主要使用HTTP/1.1版本. HTTP协议用于客户端和服务器端之间的通信 通过请求和响应的交换达成通信(从客户端开始建立通信,服务器端在没有接收到请 ...

  5. Digester学习笔记(二)转载

    为便于理解,将笔记的内容结构作了一些调整. 对象栈 对digester技术最普通的应用,是用来动态创建一个由Java对象构成的树结构,各对象的属性以及对象间的关系,基于XML文档的内容来设置(XML文 ...

  6. getField

    model.getField(field, num) field {String} 字段名,多个字段用逗号隔开 num {Boolean | Number} 需要的条数 return {Promise ...

  7. 文字编码ASCII，GB2312，GBK，GB18030，UNICODE，UCS，UTF的解析

    众所周知,一个文字从输入到显示到存储是有一个固定过程的,其过程为:输入码(根据输入法不同而不同)→机内码(根据语言环境不同而不同,不同的系统语言编码也不一样)→字型码(根据不同的字体而不同)→存储码( ...

  8. CLion编译的exe文件无法在windows下正常运行

    The program cannot start because libgcc_s_dw2-1.dll is missing from your computer. Try reinstalling ...

  9. [Erlang12] Mnesia分布式应用

    [Erl_Question12] Mnesia分布式应用 情景: 设计一个图书管理系统,需求: 1. 基本的增删查改功能; 2. 支持多节点备份(其中一个节点挂了进,对外接口不影响). 方案一: Er ...

  10. INDEX--索引相关信息查看

    --============================================== --查看可能缺失的索引 SELECT mig.* ,migs.* ,mid.* FROM sys.dm ...