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>