OK，Let’s go on，看一下三个简单的处理函数
mouseover : function(e){
$(this).css(‘cursor’,’pointer’);
},
mouseout : function(){
$(this).css(‘cursor’,’default’);
average.width(0);
},
mouseleave: function () {
$(“p.jRatingInfos”).remove();
},
mouseover函数确保鼠标进入插件后的显示样式，mouseout也是同样，但它将类名为average的div（红色的）宽度变成0，mouseleave函数让提示信息框消失。
最后一个函数，也是整个源码的结尾，当然也是最重要最复杂的——鼠标点击函数：
click : function(e){
//接下来的代码都在此处。
}
我们分部来，先看第一部分：
$(this).unbind().css(‘cursor’,’default’).addClass(‘jDisabled’);
为什么这里只列出一条语句，因为它很重要，但也很简单，我们这里一定要关注unbind()函数，它非常非常重要，当点击鼠标后，首先把其他所有绑定到外围<div>的事件都去掉了，这样就鼠标点击的瞬间，该插件的外观就固定显示在浏览器中，不再随着鼠标事件而出现变化。当然，最后给<div>添加jDisabled属性。
我们接着往后走：
if (opts.showRateInfo) $(“p.jRatingInfos”).fadeOut(‘fast’,function(){$(this).remove();});
e.preventDefault();
var rate = getNote(newWidth); //关注rate变量，后面要用到。
average.width(newWidth);
第一句不难理解，删除提示信息框，第二句取消鼠标点击的默认操作，后面两句很简单，不再赘述，要知道newWidth在前面已提到，表示鼠标选择的宽度。
最后一条语句，把选择的比例发送到服务器端进行持久化操作：
$.post(
opts.phpPath, //利用Ajax技术，向服务端发送数据的地址
{ //Post过去的数据
idBox : idBox,
rate : rate,
action : ‘rating’
},
function(data) { //回调函数，主要向插件自定义函数传递参数并执行。
if(!data.error)
{
if(opts.onSuccess) opts.onSuccess( element, rate );
}
else
{
if(opts.onError) opts.onError( element, rate );
}
},
‘json’ //确定如何理解返回的数据，它采用json.
);
利用jQuery做Ajax确实很简单，代码中做了必要注释，这里不再赘述，这个插件的源码就分析完了，比较粗，但整个逻辑也许体现了一些，希望该学习笔记对大家能有帮助。下面我们进入实战阶段。
三、实战jRating插件
为了更加逼近真实应用，我们先利用sql server建立一张数据库表，它是一个文章类型表，有id、标题、文章内容、评分四个字段，截图如下：
