jquery之闭包 实现无刷新修改页面

刚看到这些东西的时候，心里煞是着急，一点都不明白，经过认识了一些选择符和属性以及get post传值之后，就能看懂一些jquery闭包的写法，能实现一些比较炫的功能了，现在介绍一下，通过ajax方法实现不刷新页面进行交互的操作

我们经常会看到一些网站，尤其是社交类网站的一篇文章下面会有转发 喜欢 收藏等等的方便用户管理的按钮，下面我介绍一下用户喜欢某一篇文章并且在页面不刷新的情况下进行喜欢数加一的操作

首先要介绍一个我认为比较重要的用法$.fn.params $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。

如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.

这是我封装的闭包

/*默认方法*/

;(function($) {

$.fn.userLike = function(options) {

/*默认值*/

var defaults = {

like_type: 3, //被喜欢对象的类型 0为图片 1为产品 2为转采产品 3 为专题

like_id: 0 //被喜欢对象的id

};

var opts = $.extend(defaults, options);

var obj= $(this);

/*单一方法调用正确*/

/*会员点击触发事件*/

$(this).click(function(e){

//alert(obj.attr('id'));

/*ajax增加被喜欢对象的喜欢次数*/

var url="ajax.php?m=UserCollect&a=userLike";

var params = {like_type:opts.like_type,like_id:opts.like_id};

$.get(url,params,valCallBack,'text');

});

function valCallBack(data) {

if(data=='2'){

$.prompt('系统提示',{ buttons: {'确定':true},message:'登录过期请重新登录' ,callback:function(clicked,msg){

if(clicked){

window.parent.location.href="index.php?m=Login&a=Login";

}

}});

return false;

}

if(data == '4'){

$.prompt('系统提示',{ buttons: {'确定':true},message:'参数非法！' });

return false;

}

if(data == '3'){

$.prompt('系统提示',{ buttons: {'确定':true},message:'您已经将该图片添加为喜欢！' });

return false;

}

var dataArr=data.split(",");

if(dataArr[0]=="1"){

$("#userLikeNum"+opts.like_id).html('（'+dataArr[1]+'）');

}else{

$.prompt('系统提示',{ buttons: {'确定':true},message:'更新失败' });

}

}

};

})(jQuery);

下面是在模板中的代码

$(document).ready(function() {

<foreach name="topicList" item="vo">

var like_id = <!--{$vo.topic_id}-->; //被喜欢的对象id

var like_type = 3; //被喜欢的对象类型 0 为图片 1为产品 2 转采的产品 3专题

$("#userLike<!--{$vo.topic_id}-->").userLike({like_type:like_type,like_id:like_id});

</foreach>

});

这样每点击一次喜欢，相应的文章的喜欢数就会加一。

下面解释闭包里的一些语法，

1 var opts = $.extend(defaults, options);

$.extend的用法 http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html这篇文章写的挺好的，不过我也没看懂，目前只明白这种写法是将两个参数的值合并在一起，如果两个参数存在相同的名称，那么后面的会覆盖前面的。说明白了，可以不用写 var opts = $.extend(defaults, options);，为了严谨怕传值时出错，所以给出默认值defaluts，然后用传过来的值覆盖我们自己定义的默认值。

2 var obj= $(this); $(this)的写法详细是每个初学jquery的最常见的一种语法了，这里说明一下this和$(this)还是有区别的，

$.fn.userLike = function(options) {

this.title = 'test'; //正确

$(this).title = 'test';//错误

}

下面是我自己的理解this代表的是当前的html元素，当前元素有title所以是正确的。而$(this)是一个jqeury对象，对象没有属性。可以这么写$(this).click该对象可以有双击方法

3
$.get(url,params,valCallBack,'text');这是我认为Jquery但凡牵扯到数据库的最常用方法，之前我也写过关于对jqeury的pos和get方法的理解。

4 在模板中的代码 $("#userLike<!--{$vo.topic_id}-->").userLike({like_type:like_type,like_id:like_id}); 这是调用在闭包中定义的$.fn.userLike方法