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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Yii快速入门经典教程
2015/12/28 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
js控制表单不能输入空格的小例子
2013/11/20 Javascript
javascript常用的方法分享
2015/07/01 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
经济贸易系求职信
2014/08/04 职场文书
班子四风对照检查材料
2014/08/21 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers