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 Autocomplete自动完成插件
Jul 17 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 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异步多线程swoole用法实例
2014/11/14 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
js实现抽奖效果
2017/03/27 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Python入门篇之列表和元组
2014/10/17 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python 阶乘累加和的实例
2019/02/01 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
2014年教师节寄语
2014/04/03 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
银行授权委托书格式
2014/10/10 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
养成教育工作总结
2015/08/13 职场文书
合作合同协议书
2016/03/21 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Java移除无效括号的方法实现
2021/08/07 Java/Android