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)

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/10372160.html

时间: 2024-10-05 13:20:22

jQuery使用(十):jQuery实例方法之位置、坐标、图形(BOM)的相关文章

jQuery 第四章 实例方法 DOM操作之data方法

jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有联系,存信息, 存数据.以便以操作, 但是淘宝 把data 等放在行间样式上, 是为了 vue 等 其他框架的使用,在jquery中, jquery为我们提供了一个方法, 就是.data() 以便于我们存信息, 存数据.是用jquery 时,不推荐把 data等信息,写在行间样式了,性能不高,还频繁

jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

.queue() .dequeue() .clearQueue() --------------------------------------------------------------------------   .queue() 往队列 里面放东西 参数: .queue([queueName], fuc(next)) queueName: 队列名,字符串形式, 默认是 fx  fuc(next) : 可传函数, 等一系列 值. 他会把你的值, 放到 数组里面. (next) 如果你函数

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

原文:从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来!

Jquery(一) 初识Jquery,简单使用Jquery。

距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和bootstrap这几个东西给记录一下,之前就学过,但是没记录下来,所以忘的很快,又没地方去复习,所以还是记录记录这些知识点.以便将来查看复习. --WH 一.什么是Jquery? 其实超级简单,不要把它想的太难了,Jquery就是一个js(javascript)类库. 1.1.什么是js类库? [JavaS

jQuery验证空间jquery.validate.js使用说明+中文API

--------转载自http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html jQuery plugin: Validation 使用说明 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一.导入js库 <script src=

web前端之锋利的jQuery四:jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bind(event,data,function) 第一个参数是事件类型,类型包括:blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit

从零开始学习jQuery (八) 插播:jQuery实施方案

原文:从零开始学习jQuery (八) 插播:jQuery实施方案 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学

jQuery新版本中jquery.map是什么文件(回答)

source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是map,压缩后通过变量替换规则可能会被替换成a,这时source map文件会记录下这个mapping的信息,这样的好处就是说,在调试的时候,如果有一些JS报错,那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试,这样会给我们带来很大的方便! 而这种还原性调试功能,目前只有chorme才

区别和详解:jQuery extend()和jQuery.fn.extend()

1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样: 且看官方给出解释: jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中): jQuery.