1 - jQuery 事件注册 $("div").click(function() {});
jQuery 为我们提供了方便的事件注册机制，操作优缺点如下：
- 优点: 操作简单，且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
2 - jQuery 事件处理
因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法on()、bind()、live()、delegate()等，其中最好用的是: on()
- on(): 用于事件绑定，目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
1. on() 绑定事件
优势1：可以绑定多个事件，绑定多个事件处理程序
优势2：可以事件委派操作
给ul添加了点击事件，但是触发事件是小li，点击小li之后，事件冒泡到ul身上，ul有个点击事件，所以会执行上面的点击方法。
优势3: 可以给动态生成的元素绑定事件
使用on注册点击事件，就算先注册事件再生成元素，元素的点击事件也能执行。
示例代码：
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
案例：发布微博案例
- 点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中。
- 点击的删除按钮，可以删除当前的微博留言。
<script>
$(function() {
// 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
$(".btn").on("click", function() {
var li = $("<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>
2. off() 解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供了多种事件解绑方法：off()、 undelegate() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;
off() 方法可以移除通过 on() 方法添加的事件处理程序。
//解除了div身上的所有事件
$("div").off();
//解除了div身上的click事件
$("div").off("click");
r
//解绑事件委托
$("ul").off("click", "li");
//它只能触发一次事件，触发后会自动解绑
$("p").one("click", function() {})
示例代码：
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
//事件委托
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
$("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); //解绑事件委托
// 2. one() 它只能触发一次事件，触发后会自动解绑
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
3. trigger() 自动触发事件
有些时候，我们希望某些事件能够自动触发，比如点击按钮的时候，触发input元素的select事件，或者点击按钮的时候，触发input元素的focus事件。
//触发input元素的select事件
$("button").click(function(){
$("input").trigger("select");
});
//会触发元素的默认行为，比如触发输入框聚焦事件，会有光标闪烁
$("input").trigger("focus");
//不会触发元素的默认行为，比如触发输入框聚焦事件，没有光标闪烁
$("input").triggerHandler("focus");
示例代码：
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定点击事件
$("div").on("click", function() {
alert(11);
});
// 绑定聚焦事件
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 元素.trigger("事件")
$("input").trigger("focus"); //会触发元素的默认行为，比如触发输入框聚焦事件，会有光标闪烁
// 元素.triggerHandler("事件")
$("input").triggerHandler("focus"); //不会触发元素的默认行为，比如触发输入框聚焦事件，没有光标闪烁
});
</script>
</body>
3 - event 事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。
示例代码：
<body>
<div>123</div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation(); //阻止冒泡，这时候点击div，事件就不会冒泡到document上
})
})
</script>
</body>
注意：jQuery中的 event 使用，可以借鉴 WebAPIs 中的 event 。
4 - extend 合并对象
示例代码：
<script>
$(function() {
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
// 将obj合并到targetObj,第一个参数不传,默认是false, 会覆盖targetObj里面原来的sex
$.extend(targetObj, obj);
console.log(targetObj); //{"id": 1,"msg": {"age": 33},"name": "andy"}
console.log(obj); //{"id": 1,"msg": {"age": 33},"name": "andy"}
// 默认是浅拷贝,所以obj和targetObj里面的msg指针指向同一个对象
obj.msg.age = 33; //修改obj.msg的 age 的值, targetObj.msg.age 的值也会改变
console.log(targetObj); //msg: {age: 33}
console.log(obj); //msg: {age: 33}
// 将obj合并到targetObj,第一个参数设置为true,如果待合并对象有某个同名的属性也是对象,那么该"属性对象"的属性也将进行合并
$.extend(true, targetObj, obj);
console.log(targetObj); //{"id": 1,"msg": {"sex": "男","age": 18},"name": "andy"}
console.log(obj); //{"id": 1,"msg": {"age": 20},"name": "andy"}
// 深拷贝,所以修改obj.msg.age的值,不影响targetObj.msg.age 的值
obj.msg.age = 20;
console.log(targetObj); // msg: {sex: "男", age: 18}
console.log(obj); //msg: {age: 20}
});
</script>
5 - jQuery 多库共存
jQuery使用$作为标示符，随着jQuery的流行，其他 js 库也会用$作为标识符，这样一起使用会引起冲突。需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
<script>
$(function() {
// 让jquery释放对$的控制权，让用户自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>
6 - jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
- jQuery 插件库 www.jq22.com/
- jQuery 之家 www.htmleaf.com/ （推荐）
jQuery 插件使用步骤：
- 引入相关文件（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)
1. Chroma Gallery 瀑布流插件（重点讲解）
我们学习的第一个插件是jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。
下载位置：
代码演示：
插件的使用三点：1. 引入css，2.引入JS，3.引入html。（有的简单插件只需引入html和js，甚至有的只需引入js）
- 引入css
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 下面的样式代码为页面布局，可以引入，也可以自己写，自己设计页面样式，一般为直接引入，方便 -->
<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>
- 引入js
<!-- 前两个必须引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的为启动瀑布流代码，参数可调节属性，具体功能可参考readme.html -->
<script type="text/javascript">
$(function() {
$("#gallery-wrapper").pinterest_grid({
no_columns: 5,
padding_x: 15,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
- 引入html
<!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） -->
<section id="gallery-wrapper">
<article class="white-panel">
<img src="images/P_000.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_005.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_006.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
<article class="white-panel">
<img src="images/P_007.jpg" class="thumb">
<h1><a href="#">我是轮播图片1</a></h1>
<p>里面很精彩哦</p>
</article>
</section>
总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）
Demo地址：Chroma Gallery 瀑布流插件-demo
2. EasyLazyload 图片懒加载插件
图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。
只需引入html 和 js操作 即可，此插件不涉及css。
- 引入js
<script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>
- 引入html
<img data-lazy-src="upload/floor-1-3.png" alt="">
3. FullPage.js 全屏滚动插件
全屏滚动插件比较大，所以一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：www.dowebok.com/demo/2014/7…
全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
$(function() {
$('#dowebok').fullpage({
sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
navigation: true
});
});
</script>
注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。
Demo地址：fullPage.js 全屏滚动插件-demo
4. Bootstrap插件
Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。
步骤：1. 引入bootstrap相关css和js，2. 去官网复制html，3. 复制js代码，启动js插件
代码演示：
- 引入bootstrap相关css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
- 去官网复制html的功能模块
<!-- 模态框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
里面就是模态框
</div>
</div>
</div>
- 复制js代码，启动js插件
<script>
// 当我们点击了自己定义的按钮，就弹出模态框
$(".myBtn").on("click", function() {
// alert(11);
$('#btn').modal()
})
</script>
Demo地址：bootstrap-demo
Bootstrap案例：阿里百秀
- 通过调用组件实现导航栏
- 通过调用插件实现登录
- 通过调用插件标签页实现 tab 栏
代码地址：阿里百秀-bootstarp
7 - jQuery案例：toDoList
代码地址：jQuery案例：toDoList
1. toDoList 案例介绍
1. 文本框里面输入内容，按下回车，就可以生成待办事项。
2. 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
4. 但是本页面内容刷新页面不会丢失。
2. toDoList 分析
1. 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
2. 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
3. 存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}]
4. 注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。
5. 注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。
3. toDoList 按下回车把新数据添加到本地存储里面
1. 切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
2. 利用事件对象.keyCode判断用户按下回车键（13）。
3. 声明一个数组，保存数据。
4. 先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
5. 之后把最新从表单获取过来的数据，追加到数组里面。
6. 最后把数组存储给本地存储 (声明函数 savaDate())
4. toDoList 本地存储数据渲染加载到页面
1. 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
2. 先要读取本地存储数据。（数据不要忘记转换为对象格式）
3. 之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
4. 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。
5. toDoList 删除操作
1. 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
2. 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
3. 我们可以给链接自定义属性记录当前的索引号
4. 根据这个索引号删除相关的数据----数组的splice(i, 1)方法
5. 存储修改后的数据，然后存储给本地存储
6. 重新渲染加载数据列表
7. 因为a是动态创建的，我们使用on方法绑定事件
6. toDoList 正在进行和已完成选项操作
1. 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
2. 点击之后，获取本地存储数据。
3. 修改对应数据属性 done 为当前复选框的checked状态。
4. 之后保存数据到本地存储
5. 重新渲染加载数据列表
6. load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
7. 如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面
7. toDoList 统计正在进行个数和已经完成个数
1. 在我们load 函数里面操作
2. 声明2个变量 ：todoCount 待办个数 doneCount 已完成个数
3. 当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++
4. 最后修改相应的元素 text()
