1. 事件注册
1.1 单个事件注册
1.2 事件处理
注意：当很多操作都需要触发一个函数时，可以采用第二种方式，但是要注意操作与操作之间必须用空格隔开。
1.3 发布微博的案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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 {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// $("ul a").click(function() { // 此时的click不能给动态创建的a添加事件
// alert(11);
// })
// on可以给动态创建的元素绑定事件
$("ul").on("click", "a", function() {
$(this).parent().slideUp(function() {
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>
1.4 事件解绑off()
解除所有事件
解除特定事件
解除事件委托
1.5 自动触发事件
2. 拷贝对象
注意：面试提问点：
注意：针对复杂数据类型而言，比如对象中嵌套着对象。
3. jQuery插件
引入相关的css和js文件，然后再html页面进行导入。
4. 图片懒加载
即我们页面滑动到可视区域再去加载图片，提高网页性能。
先导入相关的js和css代码然后复制代码使用
5. 全屏滚动插件
链接：https://www.dowebok.com/77.html
<link rel="stylesheet" href="css/fullpage.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/fullpage.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<style>
#fp-nav ul li a.active span,
#fp-nav ul li a span {
background-color: red!important;
}
.section1 {
background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;
}
.section2 {
background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;
}
.section3 {
background: url(http://idowebok.u.qiniudn.com/77/3.jpg) 50%;
}
.section4 {
background: url(http://idowebok.u.qiniudn.com/77/4.jpg) 50%;
}
</style>
<script>
$(function() {
$('#dowebok').fullpage({
sectionsColor: ['#ffffff', '#4BBFC3', '#7BAABE', '#f90'],
navigation: true
});
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section section1">
<h3>第一屏</h3>
</div>
<div class="section section2">
<h3>第二屏</h3>
</div>
<div class="section section3">
<h3>第三屏</h3>
</div>
<div class="section section4">
<h3>第四屏</h3>
</div>
</div>
</body>
</html>
