<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. 19-字符切割函数c++模板

    https://www.cnblogs.com/stonebloom-yu/p/6542756.html #include <cstring> #include <cstdio> ...

  2. Greeplum 系列（四） 实战

    Greeplum 系列(四) 实战 表结构 (1) 拉链表结构 create table public.member_fatdt0 ( member_id varchar(64), phoneno v ...

  3. hibernate方言

    hibernate中,方言是解决hql翻译成sql保证语法的正确,首先数据库都是支持sql的,不同的数据库会存在一些语法上面的差异.HQL则是基于对象的查询语言,当系统需要数据库的变换时,那么用hib ...

  4. block functions区块函数插件的定义与使用

    在插件目录plugins里新建文件 block.插件名.php文件(如 block.插件名.php) 例:block.test2.php <?php function smarty_block_ ...

  5. CSS 伪类和伪元素--pseudo

    总结在前: 0. 参考资料 1. 伪类和伪元素是不同的两种东西. 2. 伪类和伪元素都属于CSS选择器. 3. CSS引入伪类和伪元素是为了实现基于文档树之外的信息,i.e. 段落的第一行,的格式化. ...

  6. servlet中如何发送ajax请求并动态拼接数据到html中

    废话不多说,直接上代码 1.servlet 2.js 3.jsp 有不懂得欢迎来扣我哦^_^ 详细介绍请查看全文:https://cnblogs.com/qianzf/ 原文博客的链接地址:https ...

  7. python nose的html报告优化

    用的是nose的nose-html-reporting (0.2.3)插件生成报告.用了bootstrap前端框架,加入了开始时间和计算持续时间,及其本地化. 优化后的显示效果: 代码地址

  8. jenkins持续集成之Global Tool Configuration的配置

    Global Tool Configuration的配置过程: 1.点击系统管理2.点击 Global Tool Configuration3.必须配置: jdk git ant maven 1.点击 ...

  9. ceph常用命令（转）

    原文:http://michaelkang.blog.51cto.com/1553154/1698287 一:ceph集群启动.重启.停止 1:ceph 命令的选项如下: 选项简写描述 --verbo ...

  10. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...