jQuery高度及位置操作
1. 获取滑轮位置，scrolltop:上下滚动的意思。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:100px;width:100px;overflow:auto;">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div style="height:1000px;"></div>
</body>
</html>
效果：
2. 默认情况下body离HTML页面的左边=8px,上边=8px的距离
$('#i1').offset(); 获取当前标签在整个文档中的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1"></div>
<div style="height:100px;width:100px;overflow:auto;">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div id="i2"></div>
<div style="height:1000px;"></div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
运行效果：
3.笔记
位置：
$(window).scrollTop() 获取滑轮的位置
$(window).scrollTop(0) 设置滑轮的位置
scrollLeft([val]) 左右滑轮
offset().left 获取当前标签在整个文档中的坐标
offset().top 获取当前标签在整个文档中的坐标
position() 指定标签相对于父标签(relative)的位置
$('i1').height() # 获取标签的纯高度
$('i1').innerHeight() #获取边框+纯高度+？内边距
$('i1').outerHeight() #获取边框+纯高度+？外边距
$('i1').outerHeight(true) #获取边框+纯高度+？外边距
#纯高度，边框，外边距，内边距
jQuery高度及位置操作的更多相关文章
- 深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
- jquery css事件编程 位置 操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js,jquery 获取滚动条高度和位置, 元素距顶部距离
一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height(); 获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- jquery 属性与css操作
属性1.属性 1.1 attr(name|properties|key,value|key,fn) 1) 获取属性值 $("img").attr(&quo ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- 锋利的jQuery ——jQuery中的DOM操作（三）
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
随机推荐
- 15、Java并发编程：Callable、Future和FutureTask
Java并发编程:Callable.Future和FutureTask 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一 ...
- [FJOI2014]最短路径树问题 长链剖分
[FJOI2014]最短路径树问题 LG传送门 B站传送门 长链剖分练手好题. 如果你还不会长链剖分的基本操作,可以看看我的总结. 这题本来出的很没水平,就是dijkstra(反正我是不用SPFA)的 ...
- 世界杯足彩怎么买划算？机器学习AI告诉你答案(含预测)
本文首发于InfoQ公众号头条. 四年一度的世界杯又来了,作为没什么时间看球的码农,跟大家一样,靠买买足彩给自己点看球动力和乐趣, 然而总是买错球队,面对各种赔率也不知道怎么买才划算,足彩是不是碰大运 ...
- PHP反序列化漏洞代码审计—学习资料
1.什么是序列化 A.PHP网站的定义: 所有php里面的值都可以使用函数serialize()来返回一个包含字节流的字符串来表示.unserialize()函数能够重新把字符串变回php原来的值. ...
- MongoDB 极简实践入门
原作者StevenSLXie; 原链接(https://github.com/StevenSLXie/Tutorials-for-Web-Developers/blob/master/MongoDB% ...
- linux源码学习-for_each_cpu
刚开始读linux源码,第一眼就看到了这个很有意思的函数族,周末好好研究一下 3.13 这个组都是宏定义for循环,分析的时候注意到cpumask_next(),它在一个文件中定义了两次,还不是重载, ...
- 【RL系列】SARSA算法的基本结构
SARSA算法严格上来说,是TD(0)关于状态动作函数估计的on-policy形式,所以其基本架构与TD的$v_{\pi}$估计算法(on-policy)并无太大区别,所以这里就不再单独阐述之.本文主 ...
- pip安装Crypto注意事项
pip install PyCrypto 1.使用pip install Crypto的方式安装的文件夹名称为crypto,而内部引用都用的Crypto路径,因此pip安装后,需要将文件夹名称修改为C ...
- CF 1008B Turn the Rectangles（水题+贪心）
There are n rectangles in a row. You can either turn each rectangle by 90 degrees or leave it as it ...
- 20181023-9 Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 06
作业要求参见: https://edu.cnblogs.com/campus/nenu/2018fall/homework/2289 Scrum master:赵佳璐 一.小组介绍 组长:王一可 组员 ...