插件
常用插件
插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。
jquery.color.js
animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。
使用插件的步骤
1. 引入jQuery文件
2. 引入插件(如果有用到css的话,需要引入css)
3. 使用插件
jquery.lazyload.js
懒加载插件
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实现新闻模块的案例
制作jquery插件
原理:jquery插件其实说白了就是给jquery对象增加一个新的方法,让jquery对象拥有某一个功能。
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};
/
一般会先在head标签中引入插件文件(首先被加载),执行插件文件代码最好写成自执行函数:
(function($){
$.fn. pluginName = function() {};
})(window.jQuery); //window.jQuery为jQuery对象/$
【制作表格插件】
使用插件接口:
<script>
$('#c').table(['序号', '姓名', '年龄', '工资'],[
{n: 'xy', age: 20, s: 10},
{n: 'wy', age: 10, s: 8},
{n: 'pl', age: 11, s: 9}
]);
</script>
插件源码:
/**
* Created by itcast on 2018 12/31.
*/
(function ($) {
/**
* 给$的原型添加table方法.
* @param arrTableHead 生成表格表头的数组
* @param arrTableBody 生成表格主体部分的数组
*/
$.fn.table = function (arrTableHead,arrTableBody) {
//console.log(this);//这里的this是一个jQuery对象,是调用这个table方法的jQuery对象.
var list = [];
list.push('<table>');
//生成表头
list.push("<thead>");
list.push('<tr>');
for(var i = 0 ; i < arrTableHead.length; i++){
list.push('<th>');
list.push(arrTableHead[i]);
list.push('</th>');
}
list.push('</tr>');
list.push("</thead>");
//生成表格主体部分
for(var i = 0 ; i < arrTableBody.length; i++){
list.push('<tr>')
//生成一个序号td.
list.push('<td>'+(i+1)+'</td>');
//遍历arrTableBody这个数组的一个个的元素.
for(var key in arrTableBody[i]){
list.push('<td>');
list.push(arrTableBody[i][key]);
list.push('</td>');
}
list.push('</tr>')
}
list.push('</table>');
//console.log(list.join(""));
this.html(list.join(""));
}
}(window.jQuery));
【制作tab栏插件】
<script src="jQuery-tabs.js"></script>
<script>
$(function () {
$('#wrapper').tabs({
tabHeads:'#tab-menu>li',
tabHeadsClass:'active',
tabBodys:'#tab-main>div',
tabBodysClass:'selected'
});
});
</script>
插件源码:
/**
* Created by itcast on 2018 12/31.
*/
(function ($) {
/**
* 给$的原型添加tabs方法
* @param option.tabHeads 需要注册事件的页签们选择器
* @param option.tabHeadsClass 触发事件的页面要添加的类
* @param option.tabBodys 要显示的页面们选择器
* @param option.tabBodysClass 索引一致要显示的页面要添加的类.
*/
$.fn.tabs = function (option) {
var $bigDiv = this; //把this先存进$bigDiv变量中.
//通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
$bigDiv.find(option.tabHeads).on('click', function () {
//给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
$(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);
//获取当前点击的页面的索引
var idx = $(this).index();
//获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
$bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);
});
//返回值.
return $bigDiv;
}
}(window.jQuery));