jQuery的位置信息
<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的位置信息的更多相关文章
- 前端 -----jQuery的位置信息
08-jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 07 jQuery的位置信息
一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位 ...
- jQuery系列（八）：jQuery的位置信息
1.宽度和高度 (1):获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个 ...
- jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象，事件委托，事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
- jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接 原创 201 ...
- 获取元素位置信息和所占空间大小(via:js&jquery)
工作中有一个很常见的需求,hover或者click某元素后,在该元素旁边出现弹框,主要就是获取该元素的位置坐标以及元素所占区块的大小.最近工作中就遇到了,发现js和jquery的实现方法有很大的区别, ...
- Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- Tips about Troubleshooting RAC
Installation Log Filessoftware installation log files inside the logs directory of Oracle central in ...
- this.$route和this.$router的区别
1. this.$router: 表示全局路由器对象,项目中通过router路由参数注入路由之后,在任何一个页面都可以通过此方法获取到路由器对象,并调用其push(), go()等方法: 2. thi ...
- vsftpd更新和修改版本号教程
1.rpm包更新 类似以下更新即可 rpm -Uvh vsftpd--.el6.x86_64.rpm 2.源码更新 不懂为什么对于新版本可能只有源码包而没有rpm等包,如此只能以源码更新了. .tar ...
- TCP可靠传输：校验和，重传控制，序号标识，滑动窗口、确认应答
Tcp通过校验和,重传控制,序号标识,滑动窗口.确认应答实现可靠传输 应答码:ACK TCP的滑动窗口机制 TCP这个协议是网络中使用的比较广泛,他是一个面向连接的可靠的传输协议.既然是一 ...
- css3 min-content，max-content，fit-content, fill属性
css3里有四个属性,用来实现以内容为主的尺寸计算方式,intrinsic sizing min-content max-content fit-content fill 其中 fill 关键字,需要 ...
- [BZOJ1269]文本编辑器editor
Problem 有n个操作 Solution splay模板题,用splay维护下标. Notice 需要把l的前一个位置旋转到根,r的后一个位置旋转到根的右节点.所以特别要注意0的大坑. Code ...
- Cracking The Coding Interview 2.0 单链表
#include <iostream> #include <string> using namespace std; class linklist { private: cla ...
- python获取代理IP
利用requests库获取代理,用Beautiful库解析网页筛选ip # -*- coding: utf- -*- import requests from bs4 import Beautiful ...
- Centos7部署kubernetes Proxy(七)
1.配置kube-proxy使用LVS(三个节点都装上去) [root@linux-node1 ssl]# yum install -y ipvsadm ipset conntrack [root@l ...
- 杭电多校第七场 1010 Sequence（除法分块+矩阵快速幂）
Sequence Problem Description Let us define a sequence as below f1=A f2=B fn=C*fn-2+D*fn-1+[p/n] Your ...