1.获取和设置元素的尺寸
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取尺寸</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ var $div = $(‘.box‘); /*盒子内容尺寸*/ console.log($div.width()); console.log($div.height()); /*盒子内容+padding*/ console.log($div.innerHeight()); console.log($div.innerWidth()); /*盒子真实尺寸，内容+padding+border*/ console.log($div.outerHeight()); console.log($div.outerWidth()); /*盒子真实尺寸+margin*/ console.log($div.outerHeight(true)); console.log($div.outerWidth(true));})</script><style type="text/css">
.box{ width: 300px; height: 200px; background-color: antiquewhite; margin: 50px; padding: 10px; border: 1px solid #000;}</style></head>
<body>
<div class="box"></div></body>
</html>
2.获取元素相对页面的绝对位置：offset（）
$(function(){
var div = $(‘.box‘); div.click(function(){ var oPos = $(‘.box‘).offset(); /*获取页面绝对位置*/ /*console.log(oPos);*/ document.title = oPos.left + ‘|‘ + oPos.top; /*更改标签*/ })})
例子：购物车
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ var $car = $(‘.car‘); var $count = $(‘.car em‘); var $btn = $(‘.btn‘); var $pot = $(‘.point‘); var $w = $btn.outerWidth(); /*真实大小*/ var $h = $btn.outerHeight(); var $w01 = $car.outerWidth(); var $h01 = $car.outerHeight(); $btn.click(function(){ var carp = $car.offset(); var btnp = $btn.offset(); $pot.css({‘left‘:btnp.left+parseInt($w/2)-8,‘top‘:btnp.top+parseInt($h/2)-8}); /*计算绝对距离*/ $pot.show(); $pot.animate({‘left‘:carp.left+parseInt($w01/2)-8,‘top‘:carp.top+parseInt($h01/2)-8},500,function(){ $pot.hide(); var iNum = $count.html(); /*读*/ $count.html(parseInt(iNum)+1); /*写*/ }); /*$pot.hide();*/ })})</script><style type="text/css">
.car{ /*购物车*/ width: 150px; height: 50px; border: 2px solid #000; line-height: 50px; text-align: center; float: right; margin: 50px 100px 0 0;}.car em{ /*购物车商品数量*/ font-style: normal; color: red; font-weight: bold; /*设置文本粗细，bold加粗*/}.btn{ /*加入购物车按钮*/ width: 100px; height: 50px; background-color: #F32914; border: 0; color: #fff; margin: 50px 0 0 100px; float: left;}.point{ /*小圆点*/ width: 16px; height: 16px; background-color: gold; border-radius: 8px; position: fixed; left: 0; top: 0; z-index: 100; display: none;}</style></head>
<body>
<div class="car">购物车<em>0</em></div><input type="button" name="" value="加入购物车" class="btn"><div class="point"></div></body>
</html>
3.获取浏览器可视宽度高度
4.获取页面文档的宽度高度
$(function(){
/可视区屏幕范围/
console.log(‘可视区宽度：‘+$(window).width());
console.log(‘可视区高度：‘+$(window).height());
/实际文本范围/
console.log(‘text区宽度：‘+$(document).width());
console.log(‘text区高度：‘+$(document).height());
})
**5.获取页面滚动距离**/页面滚动距离/
console.log(‘上滚动距离：‘+$(document).scrollTop());
console.log(‘左滚动距离：‘+$(document).scrollLeft());
**6.页面滚动事件**<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动菜单</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ var $menu = $(‘.menu‘); var $menub = $(‘.menu_back‘); var $arrow = $(‘.arrow‘); /*滚动事件*/ $(window).scroll(function(){ /*获取滚动top值*/ var iNum = $(window).scrollTop(); if(iNum>200){ $menu.css({ ‘position‘:‘fixed‘, ‘top‘:0, /*设置定位后配置居中*/ ‘left‘:‘50%‘, ‘marginLeft‘:-450, }); $menub.show(); /*定位之后脱离文档流，会导致下面的文档突然消失，用一个相同的div代替*/ } else{ $menu.css({ /*定位默认值，不定位，*/ ‘position‘:‘static‘, /*系统自动居中*/ ‘margin‘:‘auto‘, }); $menub.hide(); } /*滚动一定距离才显示*/ if(iNum>400){ $arrow.fadeIn(); } else{ $arrow.fadeOut(); } }); $arrow.click(function(){ /*兼容各个浏览器，body或者HTML*/ $(‘body,html‘).animate({‘scrollTop‘:0}) })})</script><style type="text/css">
.blank{ width: 900px; height: 300px; background-color: aqua; margin: 0 auto;}.menu{ width: 900px; height: 100px; background-color: antiquewhite; margin: 0 auto; text-align: center; line-height: 100px; /*opacity: 0.3;*/}.menu_back{ width: 900px; height: 100px; margin: 0 auto; display: none;}p{ color: red; margin: 0 auto; text-align: center;}.arrow{ width: 60px; height: 60px; background-color: #000000; position: fixed; right: 30px; bottom: 50px; text-align: center; line-height: 60px; font-size: 40px; border-radius: 30px; opacity: 0.5; cursor: pointer; display: none;}.arrow:hover{ opacity: 1;}</style></head>
<body>
<div class="blank"></div><div class="menu">菜单</div><div class="menu_back"></div><div class="arrow">
