<head>
<meta charset="UTF-8">
<title>jquery的位置信息</title>
<style>
body{
height: 2000px;
}
.box{
width: 200px;
height: 200px;
position: relative;
top: 100px;
left: 200px;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//获取.box的宽度,不包含padding与border的宽度
console.log($('.box').width());
//设置.box的宽度
// $('.box').width(300);
//height()高度。与width()使用方法一样 //内部的宽和内部的高innerWidth() innerHeight(),内部宽包含padding,不包含border
// console.log($('.box').innerWidth());
// console.log($('.box').innerHeight());
//设置内部的宽和高,只会更改内容区域的宽度,不会改变padding与border的宽高
// $('.box').innerWidth(300);
// $('.box').innerHeight(100); //外部宽outerWidth() 外部高outerHeight() 包含内部宽高+padding+border
// console.log($('.box').outerWidth())//222
//设置宽高时也是设置内容的宽度,不会改变padding与border
// $('.box').outerWidth(400); //offset()他的返回值是一个对象,对象中包含了top和left属性
//距离是页面顶部与左侧的距离,与绝对定位相对定位没有关系
//offset()的属性是只读属性,不可以进行设置
// console.log($('.box').offset().top);
// console.log($('.box').offset().left); //滚动的偏移距离-->页面卷起的高度和宽度
//jquery监听文档滚动事件:scroll
$(document).scroll(function () {
console.log($(this).scrollTop()); //实现滚动页面到.box补偿高度的时候隐藏.box
var scollHeight = $(this).scrollTop();
var boxOffset = $('.box').offset().top; if (scollHeight > boxOffset){
$('.box').hide(1000);
}
})
}) </script>
</body>

jQuery的位置信息的更多相关文章

  1. 前端 -----jQuery的位置信息

    08-jQuery的位置信息   jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...

  2. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. 07 jQuery的位置信息

    一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...

  4. jQuery系列(八):jQuery的位置信息

    1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...

  5. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  6. python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

  7. jquery获取元素在文档中的位置信息以及滚动条位置(转)

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  8. 获取元素位置信息和所占空间大小(via:js&jquery)

    工作中有一个很常见的需求,hover或者click某元素后,在该元素旁边出现弹框,主要就是获取该元素的位置坐标以及元素所占区块的大小.最近工作中就遇到了,发现js和jquery的实现方法有很大的区别, ...

  9. Python全栈开发之路 【第十七篇】:jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. MongoDB的管理

    1. 启动和停止MongoDB: 2. 访问控制: 3. 命令行操作: 4. 进程控制: 5. MongoDB的监控: 6. MongoDB数据的导入.导出: 7. MongoDB备份.还原. Mon ...

  2. qt 调用zlib压缩与解压缩功能

    Zlib是一种免费且通用的压缩库,由于Zlib压缩效果比LZW好,而且解压缩速度快,更重要的是商业软件中使用Zlib不需要缴纳版权费,所以很多游戏都使用Zlib压缩资源文件. Zlib是由Jean-l ...

  3. python截取字符串

    str = ‘0123456789’ print str[0:3] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 print str[6:] #截取第七个字符到结尾 p ...

  4. shell 变量介绍

    变量命名规则 变量名必须以字母或下划线开头,名字中间只能由字母,数字和下划线组成,大小写是区分的 变量名的长度不得超过255个字符 变量名在有效的范围内必须是唯一的 在Bash中,变量的默认类型都是字 ...

  5. 4.4基于switch语句的译码器

    Q:已知前缀码如右图所示,求0/1字符串“001011101001011001”相对应的译码. a b c 1 01 001 #include<iostream> #include< ...

  6. ural1519

    题解: 插头dp 具体可以看看cdq论文 代码: #include<bits/stdc++.h> using namespace std; typedef long long ll; ; ...

  7. JDBC连接数据库:单线程、多线程、批处理插入数据的对比

    一.单线程(单条循环)插入50000条记录: 每执行一次就要访问一次数据库 import java.sql.Connection; import java.sql.DriverManager; imp ...

  8. 使用MYSQL数据库实现编程----第二章第三章课堂知识小总结

    第二章1:创建数据库create database myschool 2.数据类型  1.整型 int  2.小数 double  精确度要求高的 ----Decimal(18,4)  2222222 ...

  9. Iterator 与ListIterator的区别

    Iterator 与ListIterator的区别: 1.Iterator能够迭代Set和List集合的元素,而ListIterator只能迭代List集合的元素 2.Iterator只能前向迭代,L ...

  10. TBody scrollbar 设置

    由于scrollbar自身有宽度 对于tbody来说可能会挤压与thead不对齐下面办法能够解决大致问题 1.设置tbody display:block :  overflow-y:auto:(并且修 ...