<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. cacti-不出图形，cacti.log中出“ERROR: SQL Assoc Failed!

    [root@CactiEZ log]# tail cacti.log 2016年04月06日 14:53:16 PM - CMDPHP: Poller[0] ERROR: SQL Cell Faile ...

  2. Python正则表达式的七个使用范例-乾颐堂

    作为一个概念而言,正则表达式对于Python来说并不是独有的.但是,Python中的正则表达式在实际使用过程中还是有一些细小的差别. 本文是一系列关于Python正则表达式文章的其中一部分.在这个系列 ...

  3. mysql存储过程和触发器

    mysql编程(存储过程和触发器) 存储过程 什么是存储过程 存储过程,带有逻辑的sql语句 存储过程特点 执行效率非常快!存储过程是在数据库的服务器端执行的!!! 移植性很差!不同数据库的存储过程是 ...

  4. funk_SVD 个人理解

    目标函数: $ J = \frac{1}{2} \left\| R - PQ \right\|^{2} + \lambda \left( \left\|P \right\|^{2} +\left\| ...

  5. 视觉SLAM实战（一）：RGB-D SLAM V2

    写在前面 首先打个广告.SLAM研究者交流QQ群:254787961.欢迎各路大神和小白前来交流. 看了前面三篇博文之后,是不是有同学要问:博主你扯了那么多有用没用的东西,能不能再给力一点,拿出一个我 ...

  6. [GO]channel实现同步

    goroutine运行在相同的地址空间,因此访问共享内存必须 做好同步.goroutine奉行通过通信来共享内存,而不是共享内存通信 它跟map一样,使用make来创建,它是一个引用 ,而不是值传递 ...

  7. How to add a date range picker to filter for dates on a GridView for Yii2 - See more at: http://www.2amigos.us/blog/how-to-add-a-date-range-picker-to-filter-for-dates-on-a-gridview-for-yii2#sthash.pf7

    Filtering the data we have on our GridView by dates are sometimes very important. On this article I ...

  8. windows10最实用的快捷键、高效的windows模式

    win+方向键 将软件窗口放置到方向 ctrl+win+左右方向键 切换虚拟桌面 win+tab 选择窗口或虚拟桌面,然后按着win随后放开,界面停留 alt+tab 切换窗口 ctrl+win+D ...

  9. Joomla3x-CKEditor4x-WordPaster整合示例

    1.1. 集成到Joomla_3.4.7-ckeditor4x 资源下载:Joomla 3x,   1.1.1. 添加wordpaster文件夹 路径:/media/wordpaster/   1.1 ...

  10. [LeetCode 题解]: Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...