位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享jQuery 1.9.1源码分析系列(十三)之位置大小操作(jquery fadein 源码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery源码是什么水平,jquery源码是什么水平,jquery.min.js源代码,jquery源码是什么水平,jquery.min.js源代码,jquery源码实现原理,jquery源码分析,jquery源码分析,内容如对您有帮助,希望把文章链接给更多的朋友!

先给大家展示谢

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)等部分的高度。如下图

  

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

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

  

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

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

  

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

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

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

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

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

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

  接下来分析部分函数。

a.jQuery.fn.offset分析

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

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

  jQuery处理就变成了:

  这里面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的处理就变成了:

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的处理变成了:

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

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

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

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

jQuery 1.9.1源码分析系列(十四)之常用jQuery工具 为了给下一章分析动画处理做准备,先来看一下一些工具。其中队列工具在动画处理中被经常使用。jQuery.fn.queue(([queueName][,newQueue])||([queueName,]callback))(

Jquery左右滑动插件之实现超级炫酷动画效果附源码下载 分享一款基于jQuery超级酷动画滑动插件。这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效。效果图如下,如果大家觉得还不错,很满意可以下

jQuery实现获取绑定自定义事件元素的方法 本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考,具体如下:(function($){//自定义itemtab事件$.fn.bind=function(types,data,fn){//

标签: jquery fadein 源码

本文链接地址:https://www.jiuchutong.com/biancheng/376188.html 转载请保留说明!

上一篇:解决jQuery使用JSONP时产生的错误(jquery 使用)

下一篇:jQuery 1.9.1源码分析系列(十四)之常用jQuery工具(jquery1.8)

  • 新开网吧需要缴纳哪些税金
  • 铜川缴纳房屋契税怎么算
  • 来料加工出口免税不退税
  • 累计个税是每年累计吗
  • 定期定额不开票违法吗
  • 一般纳税人资格证书是什么样的
  • 平价转让股权如何交税
  • 土地出让要不要交印花税吗
  • 加计扣除所得税怎么算
  • 奖金多发退回时间怎么算
  • 预收账款发货
  • 增值税尾数调整怎么做
  • 跨月红字发票可以作废吗
  • 学校有税号可以收专票吗
  • 全年一次性奖金税收优惠政策2024
  • 货到票未到的会计账务处理
  • 小规模纳税人可以享受小微企业吗
  • 业务宣传费和广告费计入什么科目
  • 物料买回来再发货可以吗
  • 库存商品发生损失
  • 金税盘开红字发票
  • 鸿蒙系统如何删除桌面图标
  • 稳定用工社保补贴和岗位补贴多久发下来
  • 消防工程改造需要什么资质
  • windows7怎样升级windows10
  • typecho 插件开发
  • downloadplus.exe是什么进程 作用是什么 downloadplus进程是安全的吗
  • iphone6s显示4g却无法上网
  • 银行汇票和银行本票区别图解
  • 企业向银行申请办理非原路的服务贸易退汇,银行应当
  • 企业合作建房会计核算
  • 员工意外受伤费用谁出
  • regsrv.exe - regsrv是什么进程 有什么用
  • h5适配iphonex
  • 建筑业统一发票真伪查询
  • 生产企业可以抵扣进项税的
  • github ci/cd
  • 【GitHub Copilot X】基于GPT-4的全新智能编程助手
  • 办完外经证怎么交税
  • 购置固定资产支付的现金属于投资活动产生的现金流量吗
  • 金税盘 解锁
  • 一般项目的进项税和即征即退进项税
  • 2023小型微利企业税收优惠
  • 月初没报完税可以开发票吗
  • 应付职工薪酬的含义
  • 高铁票可以抵扣的进项
  • 残保金季报还是月报
  • 小规模企业没有账,税务会查账吗
  • 支付给个人的佣金没有发票
  • 冲减实收资本是什么意思
  • 分包工程 税务 账务处理
  • 收到客户不要的定金怎么做账?
  • 从事国家重点扶持的公共基础项目
  • 农副产品免税发票可以抵扣吗?
  • 什么时候确认应收
  • 啥叫合同
  • 发票作废怎么写说明
  • 仓库周转率是什么意思
  • 分公司需要独立核算和报税吗
  • 内部交易固定资产折旧为什么调整
  • mysql中的存储过程
  • window8更新
  • linux十大常用软件
  • win10预览版和正式版区别
  • 重装系统要注意哪些
  • win10微软在哪
  • win7找回删除的文件
  • centos安装编译环境
  • win7系统如何屏幕放满屏幕
  • win7网络信号差
  • win8什么时候发布
  • Quick cocos2dx-Lua(V3.3R1)学习笔记(8) ---- 事件篇之单点触摸事件,让我们用精灵模仿一个按钮吧
  • js制作倒计时
  • socketio nodejs
  • 安卓绘制图表
  • Unity3D游戏开发(第2版)pdf
  • linux pythonide
  • 国家税务总局税法
  • 02112366电子税务局
  • 社保在税务系统交,有何用意
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设