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>