• 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)的更多相关文章

  1. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  2. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  3. 第四十四课:jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

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

    .queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...

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

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

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

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  7. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

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

    1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...

  9. jQuery.extend和jQuery.fn.extend的区别?

    jquery 本身 是由 Resig: 莱希格, 一个美国的小伙子小伙伴开发的, 在2005年 prototype发表之后, 在2006年1月发表的, 后来进入mozilla工作, mozilla的j ...

随机推荐

  1. jsp 简单下载

    <%@ page language="java" import="java.util.*" contentType="text/html;cha ...

  2. python3 OrderedDict类(有序字典)

    创建有序字典 import collections dic = collections.OrderedDict() dic['k1'] = 'v1' dic['k2'] = 'v2' dic['k3' ...

  3. Cs231n-assignment 1作业笔记

    KNN assignment1 KNN讲解参见: https://blog.csdn.net/u014485485/article/details/79433514?utm_source=blogxg ...

  4. python之单元测试_生成测试报告

    (1)HTMLTestRunner.py的下载路径:https://pan.baidu.com/s/1Yk2E8d8bIo5_rmpussOE9Q 提取码:0jae (2)HTMLTestRunner ...

  5. Eclipse启动报错,解决办法

    打开log日志,发现如下错误.原因是修改了计算机用户名导致 !SESSION Thu Aug 30 08:55:41 CST 2018 -------------------------------- ...

  6. SQLServer之创建Transact-SQL DDL触发器

    DDL触发器原理 DDL 触发器用于响应各种数据定义语言 (DDL) 事件. 这些事件主要与以关键字 CREATE.ALTER.DROP.GRANT.DENY.REVOKE 或 UPDATE STAT ...

  7. SpringCloud(9)使用Spring Cloud OAuth2保护微服务系统

    一.简介 OAth2是一个标准的授权协议. 在认证与授权的过程中,主要包含以下3种角色. 服务提供方 Authorization Server. 资源持有者 Resource Server. 客户端 ...

  8. vue入门之编译项目

    好记性不如烂笔头,最近又开始学习vue了,编译的过程中遇到几个小坑,特此一记.     首先说一下vue项目如何编译,其实很简单,cd到项目文件夹,然后执行命令: npm run bulid 不过np ...

  9. Django rest framework 使用haystack对接Elasticsearch

    Elasticsearch 介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是 ...

  10. android_模拟器调试

    找到adb_server adb_server connect