jQuery 1.9.1源码分析系列(十三)之位置大小操作


Posted in Javascript onDecember 02, 2015

先给大家展示谢

jQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。如果需要删除指定的css属性,请使用该函数将其值设为空字符串("")

注意:1、如果省略了value参数,则表示获取属性值;如果指定了该参数,则表示设置属性值。2、css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素;所有"读取"操作只针对第一个匹配的元素。)

jQuery.fn.offset([coordinatesObj])(设置或返回当前匹配元素(将content+padding+border看成一个整体)相对于当前文档的偏移,也就是相对于当前文档的坐标。该函数只对可见元素有效。该函数返回一个坐标对象(Object),该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。与position()不同的是:offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标。)

jQuery.fn.position()(返回当前匹配元素(将content+padding+border+margin看成一个整体)相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。该函数返回一个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。与offset()不同的区别详见offset。此外,position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同)

jQuery.fn.scrollLeft([ value ])(设置或返回当前匹配元素相对于水平滚动条左侧的偏移。当一个元素的实际宽度超过其显示区域的宽度时,在一定的设置下,浏览器会为该元素显示相应的水平滚动条。此时,scrollLeft()返回的就是该元素在可见的滚动区域左侧被隐藏部分的宽度(单位:像素)。

如果水平滚动条在最左侧(也就是可见区域左侧没有被隐藏的内容),或者当前元素是不可水平滚动的,那么scrollLeft()将返回0。对可见的和隐藏的元素均有效。)

jQuery.fn.scrollTop([ value ])(设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。当一个元素的实际高度超过其显示区域的高度时,在一定的设置下,浏览器会为该元素显示相应的垂直滚动条。此时,scrollTop()返回的就是该元素在可见区域之上被隐藏部分的高度(单位:像素)。如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容),或者当前元素是不可垂直滚动的,那么scrollTop()将返回0。对可见的和隐藏的元素均有效)

jQuery.fn.height([ value ])(设置或返回当前匹配元素的高度。该高度值不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的高度。如下图

jQuery 1.9.1源码分析系列(十三)之位置大小操作

如果你要获取包括上述某部分在内的高度,请使用innerHeight()和outerHeight()。该函数属于jQuery对象(实例),并且对不可见的元素依然有效)

jQuery.fn.innerHeight([ value ])(设置或返回当前匹配元素的内高度。该高度值包括内边距(padding),但不包括元素的外边距(margin)、边框(border)等部分的高度。如下图:

jQuery 1.9.1源码分析系列(十三)之位置大小操作

该函数属于jQuery对象(实例),并且对不可见的元素依然有效)

jQuery.fn.outerHeight([includeMargin])(设置或返回当前匹配元素的外高度。该高度值包括内边距(padding) 、边框(border),但不包括元素的外边距(margin)部分的高度。你也可以指定参数为true,以包括外边距(margin)部分的高度如下图:

jQuery 1.9.1源码分析系列(十三)之位置大小操作

该函数属于jQuery对象(实例),并且对不可见的元素依然有效)

jQuery.fn.width([ value ])(描述:略)

jQuery.fn.innerWidth ([ value ])(描述:略)

jQuery.fn.outerWidth ([includeMargin])(描述:略)

借用孤月蓝风上色的详解图

 jQuery 1.9.1源码分析系列(十三)之位置大小操作

接下来分析部分函数。

a.jQuery.fn.offset分析

offset获取的方法如下(以top为例):

offset.top = elem距浏览器视窗顶部的位置 + 文档顶部被卷起来的部分 ? elem距离父元素上边框高度top。

jQuery处理就变成了:

box = elem.getBoundingClientRect();
  offset.top = box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 );

这里面IE8-和IE9+等现代浏览器有个差别,使用document.documentElement.getBoundingClientRect();IE8-的top/left值为-2px;其他现代浏览器top/left值为0px;可以看出IE8-浏览器是以窗口的(2,2)坐标为原点坐标的。

浏览器会默认body和窗口之间有8px的间隙,所以使用document.body.getBoundingClientRect(); 得到的top/left值为8px。

offset的设置方法如下(以top为例):

需要注意在设置之前,如果当前elem的position为static则要设置为relative才能处理

先得到要设置给elem的css特征top的值计算方法为

setTop = (要设置的offset top值 ? 当前元素的offset top值)+ elem的css top特征值

然后将setTop设置给elem的css top特征。

jQuery的处理就变成了:

   

var curElem = jQuery( elem ),
    curOffset = curElem.offset(),
    curCSSTop = jQuery.css( elem, "top" ),
    props = {}, curPosition = {}, curTop;
  //如果top值为auto且position为absolute或fixed则需要计算当前elem的css特征top的值
  if ( calculatePosition ) {
    curPosition = curElem.position();
    curTop = curPosition.top;
  } else {
    curTop = parseFloat( curCSSTop ) || ;
  }
  if ( options.top != null ) {
    props.top = ( options.top - curOffset.top ) + curTop;
  }
  curElem.css( props );

b.jQuery.fn.position

position只能获取不能设置,获取方法如下(以top为例):

position.top = elem的offsetTop - elem被定位的祖辈元素的offsetTop ? elem的marginTop值

这里面这个top就真的是elem的css属性top的值了。对于jQuery来说这个elem把width+padding+border+margin看成了一个整体,所以最终得到的top是elem这个整体距离被定为祖辈元素顶部内边的距离。

jQuery的处理变成了:

var offsetParent, offset,
    parentOffset = { top: 0, left: 0 },
    elem = this[ 0 ];
  //当元素为fixed定位是他的被定位的祖辈元素是window视窗(parentOffset = {top:0, left: 0}
  if ( jQuery.css( elem, "position" ) === "fixed" ) {
    //假设getBoundingClientRect可用
    offset = elem.getBoundingClientRect();
  } else {
    //获取offsetParent
    offsetParent = this.offsetParent();
    // Get correct offsets
    offset = this.offset();
    if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
      parentOffset = offsetParent.offset();
    }
    //增加边框
    parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
  }
  return {
    top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true )
  };

里面jQuery.fn.offsetParent()函数获取最近的祖先定位元素。

offsetParent: function() {
      return this.map(function() {
        var offsetParent = this.offsetParent || document.documentElement;
        while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
          offsetParent = offsetParent.offsetParent;
        }
        return offsetParent || document.documentElement;
      });    }

c.jQuery.fn.scrollLeft和jQuery.fn.scrollTop

这两个函数的获取和设置滚动条位置比较简单,以scrollTop为获取无非就只有两个函数window[ pageYOffset]或elem [scrollTop]。而设置直接使用window[scrollTo]或elem[scrollTop]

以上内容是小编给大家介绍的关于jQuery 1.9.1源码分析系列(十三)之位置大小操作,希望大家喜欢。

Javascript 相关文章推荐
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 #Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 #Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 #Javascript
jquery实现简单文字提示效果
Dec 02 #Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 #Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
jqGrid中文文档之选项设置
Dec 02 #Javascript
You might like
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
django框架cookie和session用法实例详解
2019/12/10 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
详解Python yaml模块
2020/09/23 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python中yield的用法详解
2021/01/13 Python
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
查环查孕证明
2014/01/10 职场文书
股权转让协议书范本
2014/04/12 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL