该插件被广泛应用于各种需要评分的页面当中，今天作为学习，把源码拿出来分析一下，顺便学习其使用方法。
一、插件使用一览。
复制代码 代码如下:
<div>
<div>第一个例子</div>
<div></div>
</div>
复制代码 代码如下:
<link href="https://www.jb51.net/Script/jRating/jRating.jquery.css" type="text/css" />
<script src="https://www.jb51.net/Script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="https://www.jb51.net/Script/jRating/jRating.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".myRating").jRating({
length:10
});
});
</script>
执行效果：
可以看到，上面的例子中，有10颗星，是参数length的作用。其中，默认总分是20分，就是10颗星都选择。这里我们着重注意<div>的id16_1，其中16被用来初始化评分插件默认选择的比例，16/20 * 10。所以我们上面有8颗星是黄色的。
当我们把鼠标放到插件上时，小星星会随着鼠标移动而增加或减少（红色会覆盖黄色或白色），表示评分的从0至20，但点击鼠标时，评分结束，插件不能再编辑了，同时，通过Ajax向指定的路径POST数据，用后台数据将评分数据持久化。
在分析源代码之前，我们先看一下使用该插件时有哪些可选参数：
二、插件源码分析
按照jQuery插件开发的推荐方法，为了避免快捷符号“$”与其他JavaScript插件产生冲突，源码开头采用了下面技术：
复制代码 代码如下:
(function($) {
$.fn.jRating = function(op) {
//这里为插件代码
}
})(jQurery)
接下来，我们分析的所有代码都将出现在上面绿色区域部分，首先设置默认参数。
复制代码 代码如下:
var defaults = {
/** String vars **/
bigStarsPath : 'icons/stars.png', // 设置大星星（默认显示）的相对路径
smallStarsPath : 'icons/small.png', // 小星星
phpPath : 'php/jRating.php', // 点击鼠标，评分确定后，将POST数据的地址，接下来我们会采用ASP.Net技术进行处理
type : 'big', // 可以看出，默认是使用大星星
/** Boolean vars **/
step:false, // 如果设置为True，则星星要么全变色，要么不全变，当然这也适和选择分数是同步的。
isDisabled:false, //如果设置为True，则插件不能编辑，当点击鼠标过后，默认是True的状态
showRateInfo: true, //当鼠标放到星星上时，是否在鼠标下方显示选择比例信息，例如16/20
/** Integer vars **/
length:5, // 星星的个数
decimalLength : 0, // 选择的数字其后的小数位，最多为3位，如果设置为1，可能出现的情况为16.3/20
rateMax : 20, // 比例中的分母，整数0-9999
rateInfosX : -45, // 信息提示框相对于鼠标位置的横坐标位置
rateInfosY : 5, // 同上，纵坐标位置
/** Functions **/
onSuccess : null, //成功后的回调函数
onError : null //出错处理函数
};
通过上面绿色部分的解释，我们可以看到所有参数的默认值，同时，我们可以在插件使用中，根据需求确定适合的配置，插件的使用不就是这些参数的搭配组合吗？
接下来我们再看一个函数作用域：
复制代码 代码如下:
if(this.length>0)
return this.each(function() { //接下来出现的代码，都将在此处！！！}
这段代码很简单，我们要在选中的集合上执行jRating()函数，而上面的代码首先判断该集合是否长度大于0，如果为1或者更多，则在该集合上执行each()函数，对集合中的每一个元素（div）进行单独处理。
该插件的核心代码其实都在上面的each()函数中，我们首先看几个函数，这几个函数都定义在each()函数中，并被其他语句调用。
复制代码 代码如下:
function findRealLeft(obj) {
if( !obj ) return 0;
return obj.offsetLeft + findRealLeft( obj.offsetParent );
};
首先关注findRealLeft()函数，该函数接收名为obj的对象参数，最后返回该元素对象相对于浏览器左边界的距离。注：offsetParent是指元素最近的定位（relative,absolute）祖先元素，如果没有祖先元素是定位的话，会指向body元素。offsetLeft返回相对于offsetParent的位置。
复制代码 代码如下: