第四天：
1. 插件
1.1. 常用插件
插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
使用插件的步骤
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css，还有一定要先引入jquery再引入插件，因为插件中有些变量是依赖于jquery文件的）
3. 使用插件
1.1.1. jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
例1：正常jquery中animate无法实现背景渐变的改变，但是可以利用jquery插件实现
<script src="jquery-1.12.4.js"></script>
<script src="jquery.color.js"></script>
<script>
$(function () {
//说明jquery不支持颜色的渐变,颜色最好用16进制
$('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {
alert("呵呵");
});
});
实现div背景渐变为黑色
1.1.2. jquery.lazyload.js
懒加载插件
例2：懒加载：就是图片暂时不加载，等到它时候再加载
<body>
<div style="height:4000px"></div>
<img class="lazy" data-original="02.gif" alt="">
<script src="jquery-1.12.4.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
$(function(){
$("img.lazy").lazyload();
})
</script>
</body>
滑到img区域时候，再加载图片。
注意：
1.图片的路径属性名不是src，是data-original
2.插件一定放在jquery文件后引入
3.一般在图片比较多，页面比较长的时候，用懒加载插件，要是就一张图片，直接用src引用就行，不用这么麻烦
4.最好将需要懒加载的图片加一个类 class="lazy"，然后将src变为data-original，这样在后面直接写$(".lazy").lazyload()就可以将部分图片懒加载了
1.1.3. jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
2. 1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能
使用jquery.ui.js实现新闻模块的案例
注意：下面是大致代码
$(".drag-wrapper").draggable({
/*让.drag-wrapper可以拖动，但是有因为我只想在拖动头时候才跟着拖动，拖动内容时候，不跟着拖动，所有加个参数，一个对象
只让拖动.drag-bar的时候，这个大的div才跟着拖动*/
handle:".drag-bar"
});
$(".sort-item").sortable({
/*让ul（.sort-item）可以手动任意排序，并且排序过程中的li透明度是0.3*/
opacity:0.3
});
$(".resize-item").resizable({
/*让内容区.resize-item只能向south南方向放大，不能在其他方向延伸*/
handles:"s",
});
1.2. 制作jquery插件
原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
实质：就是给jquery的原型上增加方法
例1:
$(function(){
$.fn.bgColor = function(color){
/*this就是一个jquery对象*/
this.css("backgroundColor" , color);
return this;
}
$("div").bgColor("red");
})
然后将那个函数保存到外部js文件中去，以后再调用利用...js引入，就是一个简易的jquery插件
封装的越好的东西，使用的就越方便，你改的就越麻烦。
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};
制作手风琴插件
