JQuery事件处理
JQuery为我们提供方便的事件注册机制，但有以下优缺点。
1.优点:操作简单，且不用担心事件覆盖等问题
2.缺点：不能解绑事件，且不能实现事件委托
<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>事件处理程序on（）绑定事件
- on():用于事件绑定，是目前最好用的事件绑定方法
- off()事件解绑
- trigger()/triggerHandler():事件触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>on()事件处理程序</title>
<script src="jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box,.container {
width: 200px;
height: 200px;
background-color: #0000FF;
margin: 200px auto;
}
.curent {
background-color: #008000;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
<script>
// on（）方法可以添加多个事件处理程序
$(function(){
$('.box').on({
mouseenter:function(){
$(this).css('background','red')
},
mouseleave:function(){
$(this).css('background','purple')
},
click:function(){
$(this).css('background','yellow')
}
})
//事件处理程序相同的情况下
$('.container').on('mouseenter mouseleave',function(){
$(this).toggleClass('curent')
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>on()事件处理程序</title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li>平凡的荣耀 非常好看</li>
<li>平凡的荣耀 非常好看</li>
<li>平凡的荣耀 非常好看</li>
<li>平凡的荣耀 非常好看</li>
<li>平凡的荣耀 非常好看</li>
<li>平凡的荣耀 非常好看</li>
</ul>
<div class="box"></div>
<script>
$(function(){
// on()方法可以实现事件委托
$('ul').on('click','li',function(){
alert('very good')
})
// on（）可以给动态元素元素实现绑定事件
$('.box').on('click','p',function(){
alert('咻咻咻')
})
var p =$("<p>hello</p>")
$('.box').append(p)
})
</script>
</body>
</html>
微博留言
1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
2.点击的删除按钮，可以删除当前的微博留言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博发布功能</title>
<script src="jquery-3.5.1.js"></script>
<style>
＊ {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
list-style: none;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px solid #CCCCCC;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
</head>
<body>
<div class="box">
<span>微博发布</span>
<textarea></textarea>
<button class="bth">发布</button>
<ul>
</ul>
</div>
<script>
$(function () {
$('.bth').on('click', function () {
//点击发布按钮 动态创建一个小li .放入文本框的内容和删除按钮，并且添加到ul里面
let li = $("<li></li>");
li.html($("textarea").val() + "<a href ='javascript:;'>删除</a>");
$('ul').prepend(li);
li.slideDown();
$('textarea').val('')
})
// on可以给动态创建的元素绑定事件
$('ul').on('click', 'a', function () {
$(this).parent().remove()
})
})
</script>
</body>
</html>
解绑事件
jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等
甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件解绑off</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: black;
}
p {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script>
// 入口函数
$(function() {
$('div').on({
mouseenter: function() {
$(this).css("background", "yellow")
},
mouseleave: function() {
$(this).css("background", "purple")
}
})
//解绑div身上的鼠标移动事件
$('div').off('mouseenter');
//事件委托
$('ul').on('click', 'li', function() {
alert('事件委托')
})
//解除事件委托
$('ul').off('click', "li");
// 只触发一次事件
$('p').one('click', function() {
alert("只触发一次事件")
})
})
</script>
</head>
<body>
<div></div>
<ul>
<li>知否</li>
<li>知否</li>
<li>知否</li>
<li>知否</li>
<li>知否</li>
<li>知否</li>
</ul>
<p></p>
</body>
</html>
事件处理trigger()自动触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动触发事件</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
$(function () {
$('div').on('click', function () {
alert("how are you")
})
$('input').on('focus',function(){
$(this).val('how are you')
})
// 自动触发事件的三种方法
//第一种方法
$('div').click()
//第二种方法
$('div').trigger('click');
//第三种方法 不会触发元素的默认行为
$('input').triggerHandler('focus')
})
</script>
<body>
<div></div>
<input type="text">
</body>
</html>
JQuery事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。
事件被触发，就会有事件对象的产生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery事件对象</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background-color: red;
margin: 200px auto;
}
</style>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
$(function(){
$(document).on('click',function(e){
console.log(e)
alert('document')
})
$('div').on('click',function(e){
alert('div');
//取消事件冒泡
e.stopPropagation()
})
})
</script>
<body>
<div></div>
</body>
</html>
JQuery拷贝对象
JQuery为我们提供两套的快速获取和设置元素尺寸和位置的API,方便易用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery拷贝对象</title>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
$(function () {
//浅拷贝 会把原来对象里面的复杂类型地址拷贝给目标对象
var targetObj = {
msg:{
work:"it"
}
};
var obj = {
name:"尧子陌",
sex:"男",
age:'24',
msg :{
id:1,
}
};
$.extend(targetObj,obj);
console.log(targetObj)
// 深拷贝 会把原来对象里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，则会合并在一起
var targetObj2 = {
age:'18',
msg:{
id:2
},
};
var obj2 = {
name:"尧子陌",
sex:"男",
age:'24',
msg:{
work:"it"
},
};
$.extend(true,targetObj2,obj2);
console.log(targetObj2)
})
</script>
<body>
</body>
</html>
JQuery多库共存
随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多便产生冲库，于是出现JQuery多库共存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery多库共存</title>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
$(function () {
//让JQuery放弃对$的控制权
var zero = jQuery.noConflict();
console.log(zero("span"))
} )
</script>
<body>
<span></span>
</body>
</html>
JQuery插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。插件也是依赖于jQuery来完成的，所以必须要先引入
jQuery文件，因此也称为 jQuery 插件。
JQuery插件的常用网站
jQuery 插件常用的网站：
- jQuery 插件库 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
- 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)。
瀑布流插件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery瀑布流</title>
<!-- 引进相关插件和文件 -->
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/default.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<style type="text/css">
#gallery-wrapper {
position: relative;
max-width: 75%;
width: 75%;
margin: 50px auto;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<section class="htmleaf-container">
<header class="htmleaf-header">
<h1>兼容IE8的响应式网格瀑布流布局jQuery插件 <span>A Simple jQuery Plugin To Create Pinterest Style Grid Layout</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span>
jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html"
title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
</section>
<section id="gallery-wrapper">
<article class="white-panel">
<img src="img/focus1.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus2.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus3.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus4.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus1.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus2.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus3.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus4.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus1.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus2.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus3.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus4.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus1.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus2.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus3.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="img/focus4.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
</section>
<script type="text/javascript">
$(function() {
$("#gallery-wrapper").pinterest_grid({
no_columns: 4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
</body>
</html>
懒加载插件
当页面滑动到有图片的位置，图片才开始加载，大大的提高页面的加载速度及用户体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery图片懒加载</title>
<style>
img {
display: block;
margin: 0 auto;
margin-top: 100px;
}
</style>
</head>
<body>
<img data-lazy-src="./img/focus1.jpg" alt="">
<img data-lazy-src="./img/focus2.jpg" alt="">
<img data-lazy-src="./img/focus3.jpg" alt="">
<img data-lazy-src="./img/focus4.jpg" alt="">
<!--引进相关插件 -->
<script src="./js/jquery-3.5.1.js"></script>
<script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
offsetBottom: 0,
offsetTopm: 0,
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>
</body>
</html>
全屏滚动插件（很重要）
全屏滚动插件比较大，所以，一般大型插件都会有帮助文档：http://www.dowebok.com/demo/2014/77/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏滚动</title>
<style>
.section1 {
background: url('./img/focus1.jpg') 50%;
}
.section2 {
background: url(./img/focus2.jpg) 50%;
}
.section3 {
background: url(./img/focus3.jpg) 50%;
}
.section4 {
background: url(./img/focus4.jpg) 50%;
}
#menu {
margin: 0;
padding: 0;
position: fixed;
left: 10px;
top: 10px;
list-style-type: none;
z-index: 70;
}
#menu li {
float: left;
margin: 0 10px 0 0;
font-size: 14px;
}
#menu a {
float: left;
padding: 10px 20px;
background-color: #fff;
color: #333;
text-decoration: none;
}
#menu .active a {
color: #fff;
background-color: #333;
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
background-color: whitesmoke;
}
</style>
</head>
<!--引进相关插件-->
<link rel="stylesheet" href="./css/fullpage.min.css">
<script src="./js/jquery-3.5.1.js"></script>
<script src="js/fullpage.min.js"></script>
<body>
<div id="dowebok">
<div class="section section1">
</div>
<div class="section section2">
</div>
<div class="section section3">
</div>
<div class="section section4">
</div>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
<li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
<li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
<li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
</ul>
</div>
</body>
<script>
$(function() {
$('#dowebok').fullpage({
'navigation': true,
anchors: ['page1', 'page2', 'page3', 'page4'],
menu: '#menu'
});
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
continuousVertical: true
});
setInterval(function() {
$.fn.fullpage.moveSectionDown();
}, 3000);
});
</script>
</html>
bootstrap插件
Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式
组件是无数可复用的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery组件</title>
</head>
<!--引进相关插件-->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!--引进JQuery文件-->
<script src="jquery-3.5.1.js"></script>
<!--引进bootstrap相关的js文件-->
<script src="js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">主页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航 <span class="sr-only">(current)</span></a></li>
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">选项卡
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">选项卡<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
bootstrap插件
bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery中的javascript插件</title>
<style>
.carousel-control span:nth-of-type(1) {
position: absolute;
top: 50%;
font-weight: 700;
font-size: 50px;
}
img {
display: block;
}
.focus {
width: 1920px;
height: 1080px;
overflow: hidden;
}
</style>
</head>
<!--引进相关插件-->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.js"></script>
<body>
<div class="container-fluid">
<!--选项卡-->
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>
</div>
<div class="focus">
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/focus1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./img/focus2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./img/focus3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./img/focus3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span>
<</span> <span class="sr-only">Previous
</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span>></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 模态框 -->
<button type="button" class="btn btn-primary btn-lg" id="bth">
模态框
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
china I love you
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function() {
$('#bth').on('click', function() {
console.log('hello word')
$('#myModal').modal()
})
$('.carousel').carousel({
interval: 2000
})
})
</script>
</html>
JQuery获得元素的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery尺寸</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
padding: 20px;
border: 10px solid red;
background-color: blue;
}
</style>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div class="box"></div>
</body>
<script>
$(function() {
//获取匹配元素的宽度
console.log($('.box').width());
console.log($('.box').innerWidth());
console.log($('.box').outerWidth());
console.log($('.box').outerWidth(true))
//获取匹配元素的高度
console.log($('.box').height());
console.log($('.box').innerHeight());
console.log($('.box').outerHeight());
console.log($('.box').outerHeight(true))
})
</script>
</html>
JQuery位置
offset():获得设置距离文档的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery位置之offset()</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 600px;
height: 600px;
background: red;
margin: 200px auto;
}
.son {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<script src="jquery-3.5.1.js"></script>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
$(function() {
//offset()获得设置距离文档的位置
console.log($('.son').offset());
console.log($('.son').offset().top);
console.log($('.son').offset().left);
console.log($('.son').offset({
top: 200,
left: 680
}))
})
</script>
</html>
position():获得距离定位父元素的距离
注意：不能设置，只能读取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery位置之position()</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 600px;
height: 600px;
background: red;
margin: 200px auto;
}
.son {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<script src="jquery-3.5.1.js"></script>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
$(function() {
//offset()获得设置距离定位父元素之间的距离
console.log($('.son').position());
console.log($('.son').position().top);
console.log($('.son').position().left);
})
</script>
</html>
scrolLeft()及scrollTop()
（1）scrollLeft() : 设置或返回被选元素的水平滚动条位置；
（2）scrollTop() : 设置或返回垂直滚动条位置；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery位置之scrollTop()及scrollLeft()</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 800px;
background-color: blue;
margin: 200px auto;
}
.goBack {
display: none;
position: fixed;
bottom: 50px;
right: 0;
width: 100px;
height: 50px;
color: whitesmoke;
font-weight: 700;
text-align: center;
line-height: 50px;
background-color: purple;
}
</style>
</head>
<script src="jquery-3.5.1.js"></script>
<body>
<div class="goBack">返回顶部</div>
<div class="container"></div>
</body>
<script>
$(function() {
let conTop = $('.container').offset().top;
$(window).scroll(function() {
if ($(document).scrollTop() >= conTop) {
$('.goBack').fadeIn()
} else {
$('.goBack').fadeOut()
}
})
//返回顶部
$('.goBack').click(function() {
$('body,html').stop().animate({
scrollTop: 0,
})
})
})
</script>
</html>
电梯导航案例
1、当页面滚动相对应的模块，就让电梯导航显示出来
2、当点击电梯导航页面就可以滚动到相应页面
3、电梯导航模块与内容区模块意义对应
4、当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
5、就可以把annimate要移动的距离求出来；当前索引号内容区模块它的offset().top
6、然后执行动画即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电梯导航</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 6000px;
}
.bg_c {
background-color: red;
}
.box {
width: 1200px;
height: 600px;
margin: 200px auto;
background-color: black;
}
.header,
.nav,
.section,
.footer {
width: 1200px;
height: 500px;
text-align: center;
line-height: 500px !important;
font: normal 700 20px '楷体';
color: white;
margin: 50px auto;
}
.header {
background-color: pink;
}
.nav {
background-color: red;
}
.section {
background-color: blue;
}
.footer {
background-color: purple;
}
.aside {
display: none;
position: fixed;
top: 200px;
left: 50%;
width: 200px;
background-color: purple;
margin-left: -800px;
}
.aside ul {
list-style: none;
}
.aside ul li {
cursor: pointer;
width: 100%;
color: white;
text-align: center;
padding: 5px 0px;
border-bottom: 1px dashed white;
}
.goBack {
cursor: pointer;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
}
</style>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div class="box"></div>
<div class="floor">
<div class="header item">header</div>
<div class="nav item">nav</div>
<div class="section item">section</div>
<div class="footer item">footer</div>
</div>
<div class="aside">
<ul>
<li class="bg_c">header</li>
<li>nav</li>
<li>section</li>
<li>purple</li>
</ul>
<div class="goBack">顶部</div>
</div>
</body>
<script>
$(function() {
let boxTop = $('.box').offset().top
togleClass()
function togleClass() {
$(window).scroll(function() {
if ($(document).scrollTop() >= boxTop) {
$('.aside').fadeIn()
} else {
$(".aside").fadeOut()
}
})
}
$('.aside li').click(function() {
console.log($(this).index())
$(this).addClass('bg_c').siblings('li').removeClass('bg_c')
// 当我们每次点击小li的时候，页面会去往相对应的位置
var cuRent = $('.floor .item').eq($(this).index()).offset().top - 200
// 需要做动画
$('body,html').stop().animate({
scrollTop: cuRent,
})
})
$('.goBack').one('click', function() {
$('html,body').stop().animate({
scrollTop: 0
})
})
})
</script>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。