jQuery使用(十):jQuery实例方法之位置、坐标、图形(BOM)
- offset()
- position()
- scrollTop()、scrollLeft
- width()、height()
- innerWidth()、outerWidth()、innerHeight()、outerWidth()
jQuery坐标图形大小相关
offset()
返回或设置元素距离浏览器的距离{top,left}

设置浏览器距离会累计父级的浏览器距离,当设置值小于父级相对浏览器距离时会出现负样式值。
具体参数和使用方法参考手册:http://www.runoob.com/jquery/css-offset.html
position()
返回jQuery对象中第一个DOM相对于父级的距离

即相对于父级元素链上第一个定位元素的距离。(这个方法不能设置值)
具体参数和使用方法参考手册:http://www.runoob.com/jquery/css-position.html
scrollTop()、scrollLeft
返回窗口或者出现滚动条的元素的纵向和横向滚动条的距离。

获取浏览器滚动条的距离:$(window).scrollTop();
获取元素上的滚动条距离:$(".wrapper").scrollTop();
width()、height()
设置和返回元素的宽高(content区域)
innerWidth()、innerHeight()
返回第一个匹配元素的内部宽高(content+padding)
outerWidth()、outerWidth()
返回第一个匹配元素的外部宽高(padding+border)
outerWidth(true)、outerWidth(true)
传入参数true以后就会返回(padding + borde + margin)

jQuery使用(十):jQuery实例方法之位置、坐标、图形(BOM)的更多相关文章
- jQuery 第五章 实例方法 事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- 第四十四课:jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
- jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器
1. 什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...
- 区别和详解:jQuery extend()和jQuery.fn.extend()
1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...
- jQuery.extend和jQuery.fn.extend的区别?
jquery 本身 是由 Resig: 莱希格, 一个美国的小伙子小伙伴开发的, 在2005年 prototype发表之后, 在2006年1月发表的, 后来进入mozilla工作, mozilla的j ...
随机推荐
- MFC自绘菜单
自绘控件问题多多.本文以菜单为例. ①当要使用顶层菜单资源.对话框资源.状态栏资源等这3种资源的任何一种.那么CWinApp::InitInstance函数内部必须使用LoadFrame函数来加载资源 ...
- Windows server 2008R2远程桌面3389端口修改方法技巧
windows server的服务器远程桌面默认端口号是3389,在工作中经常使用远程桌面连接服务器,但是这也是常常被黑客利用的端口号,但是如何修改掉默认端口,预防被黑客利用呢? 可以如下操作配置:很 ...
- chome(谷歌浏览器)上传文件崩溃/上传图片崩溃/打开浏览文件未响应 解决方案
测试解决方案:关闭搜狗输入法(我用的是搜狗输入法,若使用其他输入法,此方案也可能适用),再测试是否重现浏览器崩溃问题 可选解决方案:升级搜狗输入法(如果想 卸载输入法 也可以) 前面有段时间chome ...
- 微信小程序访问豆瓣api403问题解决方发法
微信小程序访问豆瓣api403问题解决方法一览:通过豆瓣api可以获取很多电影.书籍等的数据信息.昨晚上用微信小程序请求豆瓣api,竟然被豆瓣拒绝了.(豆瓣设置了小程序的访问权限):下面就跟着小编一起 ...
- SQL AUTO INCREMENT 字段
Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INCREMENT 字段 我们通常希望在每次插入新记录时,自动地创建主键字段的值. 我们可以在表中创建一个 auto- ...
- 正益移动推出新产品正益工作 实现PaaS+SaaS新组合
近期,正益移动不仅将其AppCan 移动平台云化,还通过发布全新 SaaS 产品 -- 正益工作,这款集合了企业信息聚合.应用聚合.社交聚合为一体的企业移动综合门户,与 AppCan 平台一起实现了P ...
- 一 Struts2 开发流程
SSH与SSM简介SSM:Spring+SpringMVC+MybatisSSH:Struts2+Hibernate+SpringStruts2:是侧重于控制层的框架Hibernate:是一个ORM( ...
- ASP.NET Web API2返回值处理流程
关于WebApi2控制器方法的四种返回类型请参考官方文档: https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/getting-start ...
- 基于 HTML5 WebGL 的地铁站 3D 可视化系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于 HTML5 结合互联网+的电力接线图
前言 “互联网+”思维让数据的搜集和获取更加便捷,并且随着大数据的深度开发和应用,数据分析预测对于提升用户体验有非常重要的价值,同时也为不同行业.不同领域的合作提供了更广阔的空间.传统的发电企业是一个 ...