第四天:
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() {};
制作手风琴插件