大家都说,写个JS,用jQuery时就只会引入一个jQuery类库的话,写个$(‘# ‘),$(‘# ‘),是远远不够的,在学习的jQuery过程中,想要更好的掌握这项技术,还要熟练运用jQuery插件
有时在做一个项目的时候,会遇到很多页面遍历出数据以后数据很多要做分页的情况,所以在最近学习了jQuery以后,将这些分页的功能做成jQuery插件,便于自己的使用。
首先,编辑jQuery插件,写在(function ($) { })(jQuery);
里。这是一个匿名函数,其中jQuery代表这个匿名函数的实参,这样写实际上是为了防止$在外部被修改,起到了定义插件私有域的作用。
然后$.extend(object)
可以理解为JQuery 添加一个静态方法。
$.fn.extend(object)
可以理解为JQuery实例添加一个方法。
代码如下:
//(function ($) { })(jQuery); 定义了一个匿名函数,其中jQuery代表这个匿名函数的实参。
//在开发这样的插件的时候,放置$ 在外部被修改。
//通常用在JQuery插件开发中,起到了定义插件的私有域的作用。
(function($){
// 定义一个jQuery的静态方法 另外 $.fn.extend(object)可以为jQuery定义一个实例方法
$.extend({
// 以下分页的方法
pagination : function(setting){
// 在这个保存参数的对象中 你可以添加一些自己的参数 用来完成自己的功能
var params = {
url : "",
data : {},
success : function(data){
}
};
for(var attr in setting){
params[attr] = setting[attr];
}
// 异步请求 查询到数据后返回 数据中主要使用查到的数据的总页数
$.ajax({
url : params.url,
data:params.data,
type : "post",
dataType:"json",
success:function(data){
// 得到总页数 开始拼接页面元素
var totalPage = data.PageCount;
var u_html = "<span class='p_name'>共 "+totalPage+" 页</span><li id='prev'><a><span class='arrow_left'></span></a></li>";
for(var i=1;i<=totalPage;i++){
u_html +="<li id="+i+"><a>"+i+"</a></li>";
}
u_html+="<li id='next'><a><span class='arrow_right'></span></a></li>";
$('#upage').empty();
$('#upage').append(u_html);
// 为拼接好的元素添加点击事件 改变page值 回调pagination函数
$('#upage').find('li').click(function(){
var id= $(this).attr('id');
var p = 0;
if(id==="prev"){
p = params.data.page-1;
}else if(id==="next"){
p= params.data.page+1;
}else{
p=id;
}
if(p<1){p=1;}if(p>totalPage){p=totalPage;}
params.data.page = p;
$.pagination(params);
});
// 这里执行的是自己想要传过来的方法
params.success(data);
}
});
}
})
})(jQuery);
以上,只是一个简单的jQuery插件的小应用,希望自己在技术的道路上越走越远!