当前位置:首页 > jQuery技术文章 > jQuery Position方法使用和兼容性

jQuery Position用法及兼容性详解

  • 发布时间:
  • 作者:码农之家原创
  • 点击:184

这篇文章主要知识点是关于jQuery、Position、兼容性、jQuery.position()方法获取不到值的安全替换方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情

jQuery Position方法使用和兼容性

1、position方法

jquery api地址:http://jquery.cuishifeng.cn/position.html

position方法获取匹配元素相对父元素的偏移。

2、说明

2.1 与offset()区别

.offset()是获得该元素相对于documet的当前坐标

.position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素。

2.2 值计算

.元素本身所占用的边框,边距和填充的大小不计。

.父元素的边框和边距不计,父元素的填充计算在内。

3、示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery position()示例</title>
    <style>
      html {
        line-height: 1.15;
      }
      /*父元素--相对定位*/
      .parent {
        position: relative;
        width: 200px;
        height: 400px;
        /*父元素的margin不计算在内*/
        margin-top: 10px;
        /*父元素的border不计算在内*/
        border: 1px solid green;
        /*父元素的padding计算在内*/
        padding-top: 10px;
      }
      .child-1 {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #2E8DED;
      }
      .child-2 {
        width: 100px;
        height: 100px;
        /*子元素的margin不计算在内*/
        margin: 10px auto 0;
        /*子元素的border不计算在内*/
        border: 1px solid #2E8DED;
        /*子元素的padding不计算在内*/
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <p class="child-1">
        first child
      </p>
      <p class="child-2" id="no-2">
        second child
      </p>
    </div>
    <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //获取child-2子元素距离父元素的距离
        console.log($('#no-2').position().top);
      });
    </script>
  </body>
</html>

4、注意

对于文字的line-height等属性,浏览器(chrome、IE、Firefox)默认大小不一致,因此不同的浏览器position()在计算尺寸时会存在不一致,因此必须保证所有浏览器一致的line-height等属性。

示例代码为没有设置line-height的例子,position()在不同的浏览器上计算出的值不一样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery position()示例</title>
    <style>
      html {
        /*必须给予一致的设置,否则position()计算值不同*/
        /*line-height: 1.15;*/
      }
      /*父元素--相对定位*/
      .parent {
        position: relative;
        width: 200px;
        height: 400px;
        /*父元素的margin不计算在内*/
        margin-top: 10px;
        /*父元素的border不计算在内*/
        border: 1px solid green;
        /*父元素的padding计算在内*/
        padding-top: 10px;
      }
      .child-1 {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #2E8DED;
      }
      .child-2 {
        width: 100px;
        height: 100px;
        /*子元素的margin不计算在内*/
        margin: 10px auto 0;
        /*子元素的border不计算在内*/
        border: 1px solid #2E8DED;
        /*子元素的padding不计算在内*/
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      文字文字
      <p class="child-1">
        first child
      </p>
      <p class="child-2" id="no-2">
        second child
      </p>
    </div>
    <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //获取child-2子元素距离父元素的距离
        console.log($('#no-2').position().top);
      });
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的jQuery Position方法使用和兼容性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

jQuery.position()方法获取不到值的安全替换方法

调用jQuery.position()方法会返回相对于父元素的位置,jQuery官方文档中描述说,它跟.offset()方法不一样,.offset()返回的是相对于document的位置,而.position()返回的是相对于父元素的位置。

但事实上,在使用的过程中,我们发现.position()返回的值经常是0。但事实不是0。尤其是谷歌浏览器和IE浏览器里。火狐浏览器没有此问题。

究其原因,以基于Webkit的浏览器(谷歌浏览器和Safari浏览器)为例,只有当元素(图片、flash等)完全加载后,浏览器才能访问到这些元素的高度和宽度,而火狐浏览器是在DOM加载完成后就能访问这些属性,它不需要知道这个元素的完整尺寸。而谷歌浏览器就不行。因此在谷歌/IE这样的浏览器里,如果你想使用.position()获取元素的偏移量,往往得到值就是初始值:0。

有一种补救的方法是将你的.position()调用放到 $(window).load()事件触发之后,而不是$(document).ready事件之后。但这种方法也未必可靠。

另外一种变通的方法是用.offset()来换算:

复制代码 代码如下:

jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};


这虽然产生了多余的代码,但比较可靠的多,用的让人放心。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到怎样处理jQuery EasyUI 已打开、 jquery幻灯片效果实例代码、 JQuery循环滚动文字图片实、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery动画与特效代码

下一篇:jQuery左右滚动支持图片放大缩略图轮播实例代码

展开 +

收起 -

Position用法 相关内容
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
jQuery实战案例精粹

jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer

查看详情
jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情
Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

查看详情
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

查看详情
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

查看详情
Position用法 学习笔记
网友NO.608866

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 pHello/pp2nd Paragraph/p scriptvar p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );/script /body /html 二、Jquery中position() 获取匹配元素相对父元素的偏移。 更通俗一点,含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素,那么会计算相对于文档(即视区左上角)的位置. 返回的对象包含两个整形属性:……

网友NO.485035

MySQL中的LOCATE和POSITION函数使用方法

LOCATE(substr,str) POSITION(substr IN str) 返回子串 substr 在字符串 str 中第一次出现的位置。如果子串 substr 在 str 中不存在,返回值为 0: mysql SELECT LOCATE('bar', ‘foobarbar'); - 4 mysql SELECT LOCATE('xbar', ‘foobar'); - 0 这个函数是多字节安全的。在 MySQL 3.23 中,这个函数是字母大小写敏感的,当在 MySQL 4.0 中时,如有任一参数是一个二进制字符串,它才是字母大小写敏感的。 LOCATE(substr,str,pos) 返回子串 substr 在字符串 str 中的第 pos 位置后第一次出现的位置。如果 substr 不在 str 中返回 0 : mysql SELECT LOCATE('bar', ‘foobarbar',5); - 7 这个函数是多字节安全的。在 MySQL 3.23 中,这个函数是字母大小写敏感的,当在 MySQL 4.0 中时,如有任一参数是一个二进制字符串,它才是字母大小写敏感的。 一个典型的例子是: slect * from tablename where LOCATE(colum1,colum1,1)0……

网友NO.639741

MySQL高效模糊搜索之内置函数locate instr position find_in_set使用详解

常用的一共有4个方法,如下: 1.使用locate()方法 普通用法: SELECT`column`from`table`wherelocate('keyword',`condition`)0 类似于java的indexOf(); 不过locate()只要找到返回的结果都大于0(即使是查询的内容就是最开始部分),没有查找到才返回0; 指定起始位置: SELECT LOCATE('bar','foobarbar',5); (从foobarbar的第五个位置开始查找) 2.使用instr()函数(据说是locate()的别名函数) SELECT `column` from `table` where instr(`condition`,‘keyword')0 唯一不同的是查询内容的位置不同 3.使用position()方法,(据说也是locate()方法的别名函数,功能一样) SELECT `column` from `table` where position(‘keyword' IN `condition`) 不过它不再是通过返回值来判断,而是使用关键字in 4.使用find_in_set()函数 如:find_in_set(str,strlist),strlist必须要是以逗号分隔的字符串 如果字符串str是在的strlist组成的N子串的字符串列表,返回值的范围为1到……

网友NO.890385

JS解决position:sticky的兼容性问题的方法

在项目中有用到sticky的布局,可是由于兼容性问题,在安卓端没有很好的兼容,所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题,这里为什么是组件而不是指令是因为,是有原因的,下面会讲到。 position:sticky的兼容性以及作用 Caniuse上显示sticky的兼容性如下: Sticky的作用相当于relative和fixed的结合体,当修饰的目标节点再屏幕中时表现为relative,当要超出的时候是fixed的形式展现,因为这个特性,我们就可以来实现一个sticky的模拟效果。 sticky组件实现 template部分 template div class="sticky" : div class="sticky-warp" slot/slot /div /div/template 代码解读:这里我使用了组件来实现,而不用指令来实现的原因是:指令虽然是无侵入性的,更方便使用,可是有一个弊端就是当修饰的节点fixed的时候会脱离文档流,会改变滚动的条的高度,如果仅仅是配合原生……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757