位置大小操作,之位置大小操作

作者: 关于计算机  发布:2019-09-03

先给我们来得谢

jQuery-1.9.1源码分析体系(十三) 地点大小操作,jquery-1.9.1源码

  先列一下那一个个api

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)等局地的万丈。如下图

  图片 1

  即使您要博取包含上述某有些在内的冲天,请使用innerHeight()和outerHeight()。该函数属于jQuery对象(实例),并且对不可知的成分如故有效)

jQuery.fn.innerHeight([ value ])(设置或重返当前匹配成分的内中度。该中度值富含内边距(padding),但不包括成分的外省距(margin)、边框(border)等一些的莫斯中国科学技术大学学。如下图:

  图片 2

  该函数属于jQuery对象(实例),而且对不可知的成分依然有效)

jQuery.fn.outerHeight([includeMargin])(设置或重返当前相称成分的外高度。该中度值满含内边距(padding) 、边框(border),但不富含成分的外省距(margin)部分的莫斯中国科学技术大学学。你也得以钦点参数为true,以囊括各市距(margin)部分的惊人如下图:

  图片 3

  该函数属于jQuery对象(实例),何况对不可知的因素依旧有效)

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

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

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

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

  图片 4

 

  接下去深入分析部分函数。

jQuery.fn.css (propertyName [, value ]| object )(函数用于安装或回到当前jQuery对象所匹配的要素的css样式属性值。要是必要删除内定的css属性,请使用该函数将其值设为空字符串("")

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 ) || 0;
    }

    if ( options.top != null ) {
        props.top = ( options.top - curOffset.top ) + curTop;
    }

    curElem.css( props );

 

  注意:1、假设轻巧了value参数,则表示收获属性值;借使内定了该参数,则象征设置属性值。2、css()函数的装有"设置"操作针对的是时下jQuery对象所相称的每贰个成分;全体"读取"操作只针对第贰个相当的因素。)

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()函数获取最近的先世定位成分。

图片 5 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; }); } View Code

  

jQuery.fn.offset([coordinatesObj])(设置或重回当前相称成分(将content+padding+border看成三个完完全全)相对于当下文书档案的摇摆,也正是相持于前段时间文书档案的坐标。该函数只对可知成分有效。该函数再次来到贰个坐标对象(Object),该目的有四个left属性和top属性。属性值均为数字,它们都是像素(px)为单位。与position()分裂的是:offset()重返的是相对于前段时间文书档案的坐标,position()再次来到的是争辩于其固定的上代元素的坐标。)

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


  那三个函数的拿走和设置滚动条地方比较轻松,以scrollTop为得到无非就独有三个函数window[ pageYOffset]或elem [scrollTop]。而设置直接行使window[scrollTo]或elem[scrollTop]

 

  假如以为本文不错,请点击右下方【推荐】!

地点大小操作,jquery-1.9.1源码 先列一下那些个api jQuery.fn.css (propertyName [, value ]| object ) (函数用于安装或返...

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)等一些的莫斯中国科学技术大学学。如下图

  图片 6

  假设您要获得包涵上述某部分在内的中度,请使用innerHeight()和outerHeight()。该函数属于jQuery对象(实例),何况对不可知的成分依然有效)

jQuery.fn.innerHeight([ value ])(设置或回到当前相称元素的内中度。该中度值包蕴内边距(padding),但不富含成分的各地距(margin)、边框(border)等片段的冲天。如下图:

  图片 7

  该函数属于jQuery对象(实例),何况对不可见的成分依旧有效)

jQuery.fn.outerHeight([includeMargin])(设置或回到当前相配成分的外高度。该中度值满含内边距(padding) 、边框(border),但不包涵成分的外市距(margin)部分的冲天。你也得以内定参数为true,以囊括外地距(margin)部分的万丈如下图:

  图片 8

  该函数属于jQuery对象(实例),並且对不可知的要素还是有效)

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

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

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

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

 图片 9

  接下去分析部分函数。

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源码深入分析类别(十三)之职分大小操作,希望咱们欢畅。

您也许感兴趣的小说:

  • AJAX 验证框架拾叁个
  • jquery 框架使用教程 AJAX篇
  • Jquery AJAX 框架的应用方式
  • 听别人讲JQuery框架的AJAX实例代码
  • javascript之AJAX框架使用表明
  • asp.net省市三级联合浮动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
  • 简轻松单的前端js+ajax 购物车框架(入门篇)
  • jQuery1.9.1对准checkbox的调动方法(prop)
  • 零基础学习AJAX之AJAX框架
  • jQuery 1.9.1源码剖判类别(十)事件系统之绑定事件
  • jQuery-1.9.1源码深入分析连串(十)事件系统之事件连串布局
  • jQuery-1.9.1源码解析类别(十)事件系统之事件包装
  • Jquery1.9.1源码分析种类(六)延时对象应用之jQuery.ready
  • Jquery-1.9.1源码深入分析类别(十一)之DOM操作
  • jQuery 1.9.1源码剖判类别(十四)之常用jQuery工具
  • jQuery1.9.1源码深入分析体系(十六)ajax之ajax框架

本文由王中王开奖结果发布于关于计算机,转载请注明出处:位置大小操作,之位置大小操作

关键词: