一、jQuery 事件
1. jQuery 事件注册
单个事件注册
语法：
element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
2. jQuery 事件处理
2.1 事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
element.on(events,[selector],fn)
1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
2. selector: 元素的子元素选择器 。
3. fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法优势1：
可以绑定多个事件，多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
如果事件处理程序相同
$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});
on() 方法优势2：
可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {
alert('hello world!');
});
在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
on() 方法优势3：
动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){
alert("可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"));
案例：发布微博案例
① 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
② 点击的删除按钮，可以删除当前的微博留言。
<!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>2.2 事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
$("p").one("click", function() {
alert(11);
})2.3 自动触发事件 trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标 点击触发。
element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
3. jQuery 事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
二、jQuery 其他方法
1. jQuery 对象拷贝
如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法
语法：
$.extend([deep], target, object1, [objectN])
1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。 （会覆盖）
6. 深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。（不会覆盖)
2. jQuery 多库共存
问题概述：
jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery 解决方案：
1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
2. jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
// 1. 如果$ 符号冲突 我们就使用 jQuery
jQuery.each();
// 2. 让jquery 释放对$ 控制权 让用自己决定
var xx = jQuery.noConflict();3. jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
1. 引入相关文件。（jQuery 文件 和 插件文件）
2. 复制相关html、css、js (调用插件)。
jQuery 插件：
1. 瀑布流
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<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>2. 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
<!-- 引入懒加载插件 -->
<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>3. 全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/fullpage.min.css">
<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 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>
</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>bootstrap JS 插件：
bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。
综合案例
案例：toDoList
① 文本框里面输入内容，按下回车，就可以生成待办事项。
② 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
③ 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
④ 但是本页面内容刷新页面不会丢失。
① 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
② 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
③ 存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}]
④ 注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。
⑤ 注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<script>
//数组对象
var todolist = [{
title: '我今天吃馒头',
done: false
}, {
title: '我今天学习jq',
done: false
}, ];
// localStorage.setItem("todo", todolist);
// 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
localStorage.setItem("todo", JSON.stringify(todolist));
var data = localStorage.getItem("todo");
// console.log(typeof data);
// console.log(data[0].title);
// 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
data = JSON.parse(data);
console.log(data);
console.log(data[0].title);
</script>
</body>
</html>案例：toDoList 按下回车把新数据添加到本地存储里面
① 切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
② 利用事件对象.keyCode判断用户按下回车键（13）。
③ 声明一个数组，保存数据。
④ 先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
⑤ 之后把最新从表单获取过来的数据，追加到数组里面。
⑥ 最后把数组存储给本地存储 (声明函数 savaDate())
案例：toDoList 本地存储数据渲染加载到页面
① 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
② 先要读取本地存储数据。（数据不要忘记转换为对象格式）
③ 之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
④ 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。
案例：toDoList 删除操作
① 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
② 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
③ 我们可以给链接自定义属性记录当前的索引号
④ 根据这个索引号删除相关的数据----数组的splice(i, 1)方法
⑤ 存储修改后的数据，然后存储给本地存储
⑥ 重新渲染加载数据列表
⑦ 因为a是动态创建的，我们使用on方法绑定事件
案例：toDoList 正在进行和已完成选项操作
① 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
② 点击之后，获取本地存储数据。
③ 修改对应数据属性 done 为当前复选框的checked状态。
④ 之后保存数据到本地存储
⑤ 重新渲染加载数据列表
⑥ load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
⑦ 如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面
案例：toDoList 统计正在进行个数和已经完成个数
① 在我们load 函数里面操作
② 声明2个变量 ：todoCount 待办个数 doneCount 已完成个数
③ 当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++
④ 最后修改相应的元素 text()
// $(function() {
// // alert(11);
// // 1. 按下回车 把完整数据 存储到本地存储里面
// // 存储的数据格式 var todolist = [{title: "xxx", done: false}]
// load();
// $("#title").on("keydown", function(event) {
// if (event.keyCode === 13) {
// if ($(this).val() === "") {
// alert("请输入您要的操作");
// } else {
// // 先读取本地存储原来的数据
// var local = getDate();
// // console.log(local);
// // 把local数组进行更新数据 把最新的数据追加给local数组
// local.push({ title: $(this).val(), done: false });
// // 把这个数组local 存储给本地存储
// saveDate(local);
// // 2. toDoList 本地存储数据渲染加载到页面
// load();
// $(this).val("");
// }
// }
// });
// // 3. toDoList 删除操作
// $("ol, ul").on("click", "a", function() {
// // alert(11);
// // 先获取本地存储
// var data = getDate();
// console.log(data);
// // 修改数据
// var index = $(this).attr("id");
// console.log(index);
// data.splice(index, 1);
// // 保存到本地存储
// saveDate(data);
// // 重新渲染页面
// load();
// });
// // 4. toDoList 正在进行和已完成选项操作
// $("ol, ul").on("click", "input", function() {
// // alert(11);
// // 先获取本地存储的数据
// var data = getDate();
// // 修改数据
// var index = $(this).siblings("a").attr("id");
// console.log(index);
// // data[?].done = ?
// data[index].done = $(this).prop("checked");
// console.log(data);
// // 保存到本地存储
// saveDate(data);
// // 重新渲染页面
// load();
// });
// // 读取本地存储的数据
// function getDate() {
// var data = localStorage.getItem("todolist");
// if (data !== null) {
// // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
// return JSON.parse(data);
// } else {
// return [];
// }
// }
// // 保存本地存储数据
// function saveDate(data) {
// localStorage.setItem("todolist", JSON.stringify(data));
// }
// // 渲染加载数据
// function load() {
// // 读取本地存储的数据
// var data = getDate();
// console.log(data);
// // 遍历之前先要清空ol里面的元素内容
// $("ol, ul").empty();
// var todoCount = 0; // 正在进行的个数
// var doneCount = 0; // 已经完成的个数
// // 遍历这个数据
// $.each(data, function(i, n) {
// // console.log(n);
// if (n.done) {
// $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
// doneCount++;
// } else {
// $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
// todoCount++;
// }
// });
// $("#todocount").text(todoCount);
// $("#donecount").text(doneCount);
// }
// })
