jQuery插件-jRating評分插件源碼分析及使用方法
更新時(shí)間：2012年12月28日 15:24:11 作者：
該插件被廣泛應(yīng)用于各種需要評分的頁面當(dāng)中，今天作為學(xué)習(xí)，把源碼拿出來分析一下，順便學(xué)習(xí)其使用方法,需要了解的朋友可以研究下
該插件被廣泛應(yīng)用于各種需要評分的頁面當(dāng)中，今天作為學(xué)習(xí)，把源碼拿出來分析一下，順便學(xué)習(xí)其使用方法。
一、插件使用一覽。
<div>
<div>第一個(gè)例子</div>
<div id="16_1" class="myRating"></div>
</div>
<link href="Script/jRating/jRating.jquery.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="Script/jRating/jRating.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".myRating").jRating({
length:10
});
});
</script>
執(zhí)行效果：
可以看到，上面的例子中，有10顆星，是參數(shù)length的作用。其中，默認(rèn)總分是20分，就是10顆星都選擇。這里我們著重注意<div>的id16_1，其中16被用來初始化評分插件默認(rèn)選擇的比例，16/20 * 10。所以我們上面有8顆星是黃色的。
當(dāng)我們把鼠標(biāo)放到插件上時(shí)，小星星會(huì)隨著鼠標(biāo)移動(dòng)而增加或減少（紅色會(huì)覆蓋黃色或白色），表示評分的從0至20，但點(diǎn)擊鼠標(biāo)時(shí)，評分結(jié)束，插件不能再編輯了，同時(shí)，通過Ajax向指定的路徑POST數(shù)據(jù)，用后臺(tái)數(shù)據(jù)將評分?jǐn)?shù)據(jù)持久化。
在分析源代碼之前，我們先看一下使用該插件時(shí)有哪些可選參數(shù)：
二、插件源碼分析
按照jQuery插件開發(fā)的推薦方法，為了避免快捷符號“$”與其他JavaScript插件產(chǎn)生沖突，源碼開頭采用了下面技術(shù)：
(function($) {
$.fn.jRating = function(op) {
//這里為插件代碼
}
})(jQurery)
接下來，我們分析的所有代碼都將出現(xiàn)在上面綠色區(qū)域部分，首先設(shè)置默認(rèn)參數(shù)。
var defaults = {
/** String vars **/
bigStarsPath : 'icons/stars.png', // 設(shè)置大星星（默認(rèn)顯示）的相對路徑
smallStarsPath : 'icons/small.png', // 小星星
phpPath : 'php/jRating.php', // 點(diǎn)擊鼠標(biāo)，評分確定后，將POST數(shù)據(jù)的地址，接下來我們會(huì)采用ASP.Net技術(shù)進(jìn)行處理
type : 'big', // 可以看出，默認(rèn)是使用大星星
/** Boolean vars **/
step:false, // 如果設(shè)置為True，則星星要么全變色，要么不全變，當(dāng)然這也適和選擇分?jǐn)?shù)是同步的。
isDisabled:false, //如果設(shè)置為True，則插件不能編輯，當(dāng)點(diǎn)擊鼠標(biāo)過后，默認(rèn)是True的狀態(tài)
showRateInfo: true, //當(dāng)鼠標(biāo)放到星星上時(shí)，是否在鼠標(biāo)下方顯示選擇比例信息，例如16/20
/** Integer vars **/
length:5, // 星星的個(gè)數(shù)
decimalLength : 0, // 選擇的數(shù)字其后的小數(shù)位，最多為3位，如果設(shè)置為1，可能出現(xiàn)的情況為16.3/20
rateMax : 20, // 比例中的分母，整數(shù)0-9999
rateInfosX : -45, // 信息提示框相對于鼠標(biāo)位置的橫坐標(biāo)位置
rateInfosY : 5, // 同上，縱坐標(biāo)位置
/** Functions **/
onSuccess : null, //成功后的回調(diào)函數(shù)
onError : null //出錯(cuò)處理函數(shù)
};
通過上面綠色部分的解釋，我們可以看到所有參數(shù)的默認(rèn)值，同時(shí)，我們可以在插件使用中，根據(jù)需求確定適合的配置，插件的使用不就是這些參數(shù)的搭配組合嗎？
接下來我們再看一個(gè)函數(shù)作用域：
if(this.length>0)
return this.each(function() { //接下來出現(xiàn)的代碼，都將在此處！?。
這段代碼很簡單，我們要在選中的集合上執(zhí)行jRating()函數(shù)，而上面的代碼首先判斷該集合是否長度大于0，如果為1或者更多，則在該集合上執(zhí)行each()函數(shù)，對集合中的每一個(gè)元素（div）進(jìn)行單獨(dú)處理。
該插件的核心代碼其實(shí)都在上面的each()函數(shù)中，我們首先看幾個(gè)函數(shù)，這幾個(gè)函數(shù)都定義在each()函數(shù)中，并被其他語句調(diào)用。
function findRealLeft(obj) {
if( !obj ) return 0;
return obj.offsetLeft + findRealLeft( obj.offsetParent );
};
首先關(guān)注findRealLeft()函數(shù)，該函數(shù)接收名為obj的對象參數(shù)，最后返回該元素對象相對于瀏覽器左邊界的距離。注：offsetParent是指元素最近的定位（relative,absolute）祖先元素，如果沒有祖先元素是定位的話，會(huì)指向body元素。offsetLeft返回相對于offsetParent的位置。
function getNote(relativeX) {
var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); //兩個(gè)100是否可以去掉，表示選擇的比例，如16 或 16.1
switch(opts.decimalLength) { //根據(jù)參數(shù)確定要輸去比例需要的小數(shù)位，例如16.1 16.12 16.123
case 1 :
var note = Math.round(noteBrut*10)/10;
break;
case 2 :
var note = Math.round(noteBrut*100)/100;
break;
case 3 :
var note = Math.round(noteBrut*1000)/1000;
break;
default :
var note = Math.round(noteBrut*1)/1;
}
return note;
};
接著關(guān)注getNote函數(shù)，首先我們看以下relativeX是一個(gè)什么東西：
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
上面兩行代碼是調(diào)用getNote函數(shù)前，定義relativeX變量用的，我們可以分析出relativeX的作用。這里的this是我們應(yīng)用jRating()函數(shù)的某個(gè)div，首先獲得其相對于瀏覽器的左邊距，因?yàn)樯厦鎯尚写a是出現(xiàn)在鼠標(biāo)移動(dòng)處理函數(shù)mouseenter中（稍后我們會(huì)看到），因此這里的e.pageX表示鼠標(biāo)相對于瀏覽器的橫向距離。因此，這里的relativeX表示的是鼠標(biāo)相對于<div>左邊界的橫向距離。
我們再次關(guān)注getNote函數(shù)，由widthRatingContainer = starWidth*opts.length可以看出，widthRatingContainer是左右星星圖片加起來的寬度。因此，var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);可以把分母與分子上的兩個(gè)100去掉，即(relativeX/widthRatingContainer)*opts.rateMax)，noteBrut變量最后存儲(chǔ)的是鼠標(biāo)選擇的比例，如果rateMax設(shè)為20，則noteBrut的范圍可以通過鼠標(biāo)來確定（0—20）。
switch函數(shù)，是通過decimalLength參數(shù)（用來設(shè)定顯示比例的小數(shù)位），最終確定（比例）顯示的位數(shù)。讀到這里，我們可以發(fā)現(xiàn)，getNote函數(shù)就是通過relativX來返回鼠標(biāo)選擇的比例，這個(gè)比例是什么，見下圖用筆刷框起來的部分：
接下來，我們再關(guān)注一個(gè)函數(shù)：
function getStarWidth(){
switch(opts.type) {
case 'small' :
starWidth = 12; // small.png小星星圖片的寬度
starHeight = 10; // 高度
bgPath = opts.smallStarsPath; //圖片相對地址
break;
default :
starWidth = 23; // 大星星的寬度，可以看到，這是默認(rèn)值
starHeight = 20; // 高度
bgPath = opts.bigStarsPath; //星圖片相對地址
}
};
這個(gè)是一個(gè)比較簡單的用于初始化變量的函數(shù)，根據(jù)type屬性，初始化三個(gè)變量，分別是starWidth、starHeight、bgPath，綠色的注釋信息已能夠說明一切，不再贅述！
each()中定義的函數(shù)看完了，接下來，我們還在each()函數(shù)中進(jìn)行游蕩，按照從上到下的順序，先截取了幾行代碼如下：
var opts = $.extend(defaults, op), //利用extend（）函數(shù)將默認(rèn)參數(shù)與輸入?yún)?shù)進(jìn)行合并，最后存儲(chǔ)在opts變量中。
newWidth = 0, //定義變量，該變量用于存儲(chǔ)relativeX,但會(huì)根據(jù)step屬性進(jìn)行相應(yīng)調(diào)整
starWidth = 0, //定義變量，星星的寬度
starHeight = 0, //高度
bgPath = ''; //星星圖片地址
if($(this).hasClass('jDisabled') || opts.isDisabled) //確定jDisabled變量，表示是否能對div進(jìn)行操作
var jDisabled = true;
else
var jDisabled = false;
getStarWidth(); //這個(gè)函數(shù)不贅述，上面分析過
$(this).height(starHeight); //根據(jù)星星的高度，確定此div的高度。
接著往下看：
var average = parseFloat($(this).attr('id').split('_')[0]), //通過<div>的id（例如16_2），獲取下劃線前面的數(shù)字，把該數(shù)字作為默認(rèn)的選擇比例
idBox = parseInt($(this).attr('id').split('_')[1]), // 下劃線后面的部分，作為辨別評分插件的id
widthRatingContainer = starWidth*opts.length, // 星星圖片寬度總和，并作為外圍容器的寬度
widthColor = average/opts.rateMax*widthRatingContainer, // 顏色塊占用的寬度
接下來，我們將看到新建的三個(gè)<div>，并插入到主div中
quotient =
$('<div>',
{
'class' : 'jRatingColor',
css:{
width:widthColor
}
}).appendTo($(this)),
average =
$('<div>',
{
'class' : 'jRatingAverage',
css:{
width:0,
top:- starHeight
}
}).appendTo($(this)),
jstar =
$('<div>',
{
'class' : 'jStar',
css:{
width:widthRatingContainer,
height:starHeight,
top:- (starHeight*2),
background: 'url('+bgPath+') repeat-x'
}
}).appendTo($(this));
首先我們分析第一個(gè)<div>，它的類名為jRatingColor，它表示默認(rèn)比例，用黃色表示，它的長度為withColor,這里主要看一下它的樣式表：
.jRatingColor {
background-color:#f4c239; /* bgcolor of the stars*/
position:relative; //相對定位
top:0;
left:0;
z-index:2; //這里需注意，該div的祖先即我們each函數(shù)中的this 的z-index是1，下面我們將馬上看到。
height:100%;
}
第二個(gè)<div>樣式表如下：
.jRatingAverage {
background-color:#f62929; //紅色
position:relative;
top:0;
left:0;
z-index:2;
height:100%;
}
但在上面的程序中，初始化時(shí)，把寬度設(shè)為0（因?yàn)槭髽?biāo)還沒選嘛），同時(shí)改變了top值：- 星高度，這樣它就和上面添加的div在縱方向上重合了。
接下來看第三個(gè)<div>,主要用來放小星星。
/** Div containing the stars **/
.jStar {
position:relative;
left:0;
z-index:3;
}
這個(gè)樣式表比較簡單，我們著重看一下JS中動(dòng)態(tài)添加的幾個(gè)屬性值：
width:widthRatingContainer, //設(shè)置寬度
height:starHeight, //高度
top:- (starHeight*2), //改變縱方向的值，和上面兩個(gè)<div>重合
background: 'url('+bgPath+') repeat-x' //設(shè)置背景為小星星
屬性的值設(shè)置了，但也許有人會(huì)問，問什么只看到小星星顏色是彩色的，而上面添加的前兩個(gè)<div>不是具有高度的長方形顏色條嗎？下面我們看一下小星星的圖片就明白為什么了！
不用多說，旁邊用不透明的背景，中間小星星是透明的，下面的顏色自然就顯示出來了！！
接下來的語句很簡單，就是設(shè)置一下最外層div容器的樣式，注意z-Index屬性:
$(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
接下來會(huì)進(jìn)入相對復(fù)雜的部分，我們將關(guān)注鼠標(biāo)動(dòng)作及其響應(yīng)效果，首先關(guān)注一個(gè)小邏輯：
if(!jDisabled)
//接下來的代碼
可以看出，前面我們設(shè)置的jDisable變量在這里用上了，如果jDisabled為true，就表示插件禁用了，那么接下來的鼠標(biāo)操作將不會(huì)被執(zhí)行。
接下來看鼠標(biāo)操作是如何添加到插件中的：
$(this).unbind().bind({//鼠標(biāo)事件處理代碼，下面將分別進(jìn)行討論。
}）;
首先看以一下鼠標(biāo)進(jìn)入事件處理代碼：
mouseenter : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft; //首先計(jì)算出relativeX，它表示的是鼠標(biāo)相對于外層<div>左邊界的橫向距離
if (opts.showRateInfo)
var tooltip =
$('<p>',{
'class' : 'jRatingInfos',
html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>', //注意這里用了getNote方法，前面已講了它的用途。
css : {
top: (e.pageY + opts.rateInfosY),
left: (e.pageX + opts.rateInfosX)
}
}).appendTo('body').show();
},
relativeX變量不多解釋，這里的注釋和前面都有提到，接下來，判斷showRateInfo參數(shù)是否為true,如果為true，表示要顯示比例信息（例如鼠標(biāo)下面顯示16/20），tooltip變量就是這個(gè)信息框，最后通過appendTo方法添加到body中。代碼邏輯很簡單，這個(gè)函數(shù)主要用來顯示提示框<p>，我們在這里可以重點(diǎn)關(guān)注一下<p>節(jié)點(diǎn)的樣式，它是絕對定位的，并利用代碼改變了top和Left值，看一下相關(guān)的樣式表：
p.jRatingInfos {
position: absolute;
z-index:9999;
background: transparent url('http://www.cnblogs.com/icons/bg_jRatingInfos.png') no-repeat;
color: #FFF;
display: none;
width: 91px;
height: 29px;
font-size:16px;
text-align:center;
padding-top:5px;
}
p.jRatingInfos span.maxRate {
color:#c9c9c9;
font-size:14px;
}
接下來我們看一下鼠標(biāo)進(jìn)來后的mousemove事件的處理函數(shù)：
mousemove : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
else newWidth = relativeX;
average.width(newWidth);
if (opts.showRateInfo)
$("p.jRatingInfos")
.css({
left: (e.pageX + opts.rateInfosX)
})
.html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
},
這個(gè)函數(shù)主要用來確定鼠標(biāo)選擇的比例，當(dāng)然這個(gè)比例是通過getNote(newWidth)來得到的，那么，確定合適的newWidth值就成了這個(gè)函數(shù)的核心，如果opts.step為true，即比例只能是整數(shù)個(gè)星星（不能為15.3等等），那么我們看一下這個(gè)邏輯：Math.floor(relativeX/starWidth)，starWidth是星星圖片的寬度，Math.floor(-0.1)=-1，Math.floor(0.1) = 0，Math.floor(2.6)=2，知道這些，上面加紅的代碼就很容易理解了。
OK，Let's go on，看一下三個(gè)簡單的處理函數(shù)
mouseover : function(e){
$(this).css('cursor','pointer');
},
mouseout : function(){
$(this).css('cursor','default');
average.width(0);
},
mouseleave: function () {
$("p.jRatingInfos").remove();
},
mouseover函數(shù)確保鼠標(biāo)進(jìn)入插件后的顯示樣式，mouseout也是同樣，但它將類名為average的div（紅色的）寬度變成0，mouseleave函數(shù)讓提示信息框消失。
最后一個(gè)函數(shù)，也是整個(gè)源碼的結(jié)尾，當(dāng)然也是最重要最復(fù)雜的——鼠標(biāo)點(diǎn)擊函數(shù)：
click : function(e){
//接下來的代碼都在此處。
}
我們分部來，先看第一部分：
$(this).unbind().css('cursor','default').addClass('jDisabled');
為什么這里只列出一條語句，因?yàn)樗苤匾?，但也很簡單，我們這里一定要關(guān)注unbind()函數(shù)，它非常非常重要，當(dāng)點(diǎn)擊鼠標(biāo)后，首先把其他所有綁定到外圍<div>的事件都去掉了，這樣就鼠標(biāo)點(diǎn)擊的瞬間，該插件的外觀就固定顯示在瀏覽器中，不再隨著鼠標(biāo)事件而出現(xiàn)變化。當(dāng)然，最后給<div>添加jDisabled屬性。
我們接著往后走：
if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
e.preventDefault();
var rate = getNote(newWidth); //關(guān)注rate變量，后面要用到。
average.width(newWidth);
第一句不難理解，刪除提示信息框，第二句取消鼠標(biāo)點(diǎn)擊的默認(rèn)操作，后面兩句很簡單，不再贅述，要知道newWidth在前面已提到，表示鼠標(biāo)選擇的寬度。
最后一條語句，把選擇的比例發(fā)送到服務(wù)器端進(jìn)行持久化操作：
$.post(
opts.phpPath, //利用Ajax技術(shù)，向服務(wù)端發(fā)送數(shù)據(jù)的地址
{ //Post過去的數(shù)據(jù)
idBox : idBox,
rate : rate,
action : 'rating'
},
function(data) { //回調(diào)函數(shù)，主要向插件自定義函數(shù)傳遞參數(shù)并執(zhí)行。
if(!data.error)
{
if(opts.onSuccess) opts.onSuccess( element, rate );
}
else
{
if(opts.onError) opts.onError( element, rate );
}
},
'json' //確定如何理解返回的數(shù)據(jù)，它采用json.
);
利用jQuery做Ajax確實(shí)很簡單，代碼中做了必要注釋，這里不再贅述，這個(gè)插件的源碼就分析完了，比較粗，但整個(gè)邏輯也許體現(xiàn)了一些，希望該學(xué)習(xí)筆記對大家能有幫助。下面我們進(jìn)入實(shí)戰(zhàn)階段。
三、實(shí)戰(zhàn)jRating插件
為了更加逼近真實(shí)應(yīng)用，我們先利用sql server建立一張數(shù)據(jù)庫表，它是一個(gè)文章類型表，有id、標(biāo)題、文章內(nèi)容、評分四個(gè)字段，截圖如下：
評分字段默認(rèn)為-1，表示該文章還沒有被評分。當(dāng)然，現(xiàn)在有人會(huì)說，這個(gè)表設(shè)計(jì)的很不合理，因?yàn)橐黄恼虏粫?huì)只評分一次吧，應(yīng)該每個(gè)用戶都能進(jìn)行評論，是的，我們在這里只是為了演示jRating插件利用Ajax進(jìn)行持久化操作，因?yàn)槭茄菔?，所以一切從儉。
新建一個(gè)Web頁面，用來顯示第一篇文章（id為1）的標(biāo)題、內(nèi)容及評分插件，見前臺(tái)代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Script/jRating/jRating.jquery.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="Script/jRating/jRating.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".theRating").jRating({
length: 20,
phpPath: 'tempAjax.aspx/UpdateComment' //地址變成了一個(gè)aspx類型的WEB頁面下的一個(gè)靜態(tài)函數(shù)，稍后我們會(huì)看到！
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="標(biāo)題："></asp:Label>
<asp:Label ID="page1_title" runat="server" Text=""></asp:Label><br />
<asp:Label ID="page1_body" runat="server" Text=""></asp:Label><br />
<div id="16_1" class="theRating"></div>
</div>
</form>
</body>
</html>
后臺(tái)CS代碼如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
tempEntities cbx = new tempEntities(); //用了實(shí)體框架獲取數(shù)據(jù)表
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1_title.Text = page1.title;
page1_body.Text = page1.body;
}
}
為了減少數(shù)據(jù)庫連接代碼，我用了實(shí)體框架，只映射了一張表（jRatingArticle），就是上面我們看到的。獲取id為1的文章對象，并把相應(yīng)屬性賦值到Label控件的Text屬性中。
頁面效果如下：
我們可以看到上面前臺(tái)頁面的JS代碼中，有這樣一條語句：
phpPath: 'tempAjax.aspx/UpdateComment'
它指明了，當(dāng)鼠標(biāo)點(diǎn)擊插件后，要通過Ajax發(fā)送數(shù)據(jù)的地址，這里我們用.net頁面技術(shù)來處理這個(gè)異步請求。tempAjax.aspx的后臺(tái)cs代碼如下：
[WebMethod()]
public static void UpdateComment(int idBox, int rate)
{
tempEntities cbx = new tempEntities();
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1.is_comment = rate;
cbx.SaveChanges();
}
此時(shí)，我們還需修改jRating插件的原文件，把鼠標(biāo)單擊(click)處理函數(shù)中的$.post函數(shù)替換如下：
$.ajax({
type: "POST",
url: opts.phpPath,
data: '{"idBox":"' + idBox + '","rate":"' + rate + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
為什么要改變源文件，因?yàn)槲蚁敫淖傾jax請求的contentType屬性，利用json格式發(fā)送請求數(shù)據(jù)，默認(rèn)是application/x-www-form-urlencoded
OK，萬事俱備，看一下執(zhí)行效果（選擇比例為16,16顆紅星嘛）：
看看數(shù)據(jù)庫的變化：
試驗(yàn)成功！今天學(xué)習(xí)就到這里，希望此篇學(xué)習(xí)筆記對大家能有所幫助！
一、插件使用一覽。
復(fù)制代碼 代碼如下:
<div>
<div>第一個(gè)例子</div>
<div id="16_1" class="myRating"></div>
</div>
復(fù)制代碼 代碼如下:
<link href="Script/jRating/jRating.jquery.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="Script/jRating/jRating.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".myRating").jRating({
length:10
});
});
</script>
執(zhí)行效果：
可以看到，上面的例子中，有10顆星，是參數(shù)length的作用。其中，默認(rèn)總分是20分，就是10顆星都選擇。這里我們著重注意<div>的id16_1，其中16被用來初始化評分插件默認(rèn)選擇的比例，16/20 * 10。所以我們上面有8顆星是黃色的。
當(dāng)我們把鼠標(biāo)放到插件上時(shí)，小星星會(huì)隨著鼠標(biāo)移動(dòng)而增加或減少（紅色會(huì)覆蓋黃色或白色），表示評分的從0至20，但點(diǎn)擊鼠標(biāo)時(shí)，評分結(jié)束，插件不能再編輯了，同時(shí)，通過Ajax向指定的路徑POST數(shù)據(jù)，用后臺(tái)數(shù)據(jù)將評分?jǐn)?shù)據(jù)持久化。
在分析源代碼之前，我們先看一下使用該插件時(shí)有哪些可選參數(shù)：
二、插件源碼分析
按照jQuery插件開發(fā)的推薦方法，為了避免快捷符號“$”與其他JavaScript插件產(chǎn)生沖突，源碼開頭采用了下面技術(shù)：
復(fù)制代碼 代碼如下:
(function($) {
$.fn.jRating = function(op) {
//這里為插件代碼
}
})(jQurery)
接下來，我們分析的所有代碼都將出現(xiàn)在上面綠色區(qū)域部分，首先設(shè)置默認(rèn)參數(shù)。
復(fù)制代碼 代碼如下:
var defaults = {
/** String vars **/
bigStarsPath : 'icons/stars.png', // 設(shè)置大星星（默認(rèn)顯示）的相對路徑
smallStarsPath : 'icons/small.png', // 小星星
phpPath : 'php/jRating.php', // 點(diǎn)擊鼠標(biāo)，評分確定后，將POST數(shù)據(jù)的地址，接下來我們會(huì)采用ASP.Net技術(shù)進(jìn)行處理
type : 'big', // 可以看出，默認(rèn)是使用大星星
/** Boolean vars **/
step:false, // 如果設(shè)置為True，則星星要么全變色，要么不全變，當(dāng)然這也適和選擇分?jǐn)?shù)是同步的。
isDisabled:false, //如果設(shè)置為True，則插件不能編輯，當(dāng)點(diǎn)擊鼠標(biāo)過后，默認(rèn)是True的狀態(tài)
showRateInfo: true, //當(dāng)鼠標(biāo)放到星星上時(shí)，是否在鼠標(biāo)下方顯示選擇比例信息，例如16/20
/** Integer vars **/
length:5, // 星星的個(gè)數(shù)
decimalLength : 0, // 選擇的數(shù)字其后的小數(shù)位，最多為3位，如果設(shè)置為1，可能出現(xiàn)的情況為16.3/20
rateMax : 20, // 比例中的分母，整數(shù)0-9999
rateInfosX : -45, // 信息提示框相對于鼠標(biāo)位置的橫坐標(biāo)位置
rateInfosY : 5, // 同上，縱坐標(biāo)位置
/** Functions **/
onSuccess : null, //成功后的回調(diào)函數(shù)
onError : null //出錯(cuò)處理函數(shù)
};
通過上面綠色部分的解釋，我們可以看到所有參數(shù)的默認(rèn)值，同時(shí)，我們可以在插件使用中，根據(jù)需求確定適合的配置，插件的使用不就是這些參數(shù)的搭配組合嗎？
接下來我們再看一個(gè)函數(shù)作用域：
復(fù)制代碼 代碼如下:
if(this.length>0)
return this.each(function() { //接下來出現(xiàn)的代碼，都將在此處！?。
這段代碼很簡單，我們要在選中的集合上執(zhí)行jRating()函數(shù)，而上面的代碼首先判斷該集合是否長度大于0，如果為1或者更多，則在該集合上執(zhí)行each()函數(shù)，對集合中的每一個(gè)元素（div）進(jìn)行單獨(dú)處理。
該插件的核心代碼其實(shí)都在上面的each()函數(shù)中，我們首先看幾個(gè)函數(shù)，這幾個(gè)函數(shù)都定義在each()函數(shù)中，并被其他語句調(diào)用。
復(fù)制代碼 代碼如下:
function findRealLeft(obj) {
if( !obj ) return 0;
return obj.offsetLeft + findRealLeft( obj.offsetParent );
};
首先關(guān)注findRealLeft()函數(shù)，該函數(shù)接收名為obj的對象參數(shù)，最后返回該元素對象相對于瀏覽器左邊界的距離。注：offsetParent是指元素最近的定位（relative,absolute）祖先元素，如果沒有祖先元素是定位的話，會(huì)指向body元素。offsetLeft返回相對于offsetParent的位置。
復(fù)制代碼 代碼如下:
function getNote(relativeX) {
var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); //兩個(gè)100是否可以去掉，表示選擇的比例，如16 或 16.1
switch(opts.decimalLength) { //根據(jù)參數(shù)確定要輸去比例需要的小數(shù)位，例如16.1 16.12 16.123
case 1 :
var note = Math.round(noteBrut*10)/10;
break;
case 2 :
var note = Math.round(noteBrut*100)/100;
break;
case 3 :
var note = Math.round(noteBrut*1000)/1000;
break;
default :
var note = Math.round(noteBrut*1)/1;
}
return note;
};
接著關(guān)注getNote函數(shù)，首先我們看以下relativeX是一個(gè)什么東西：
復(fù)制代碼 代碼如下:
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
上面兩行代碼是調(diào)用getNote函數(shù)前，定義relativeX變量用的，我們可以分析出relativeX的作用。這里的this是我們應(yīng)用jRating()函數(shù)的某個(gè)div，首先獲得其相對于瀏覽器的左邊距，因?yàn)樯厦鎯尚写a是出現(xiàn)在鼠標(biāo)移動(dòng)處理函數(shù)mouseenter中（稍后我們會(huì)看到），因此這里的e.pageX表示鼠標(biāo)相對于瀏覽器的橫向距離。因此，這里的relativeX表示的是鼠標(biāo)相對于<div>左邊界的橫向距離。
我們再次關(guān)注getNote函數(shù)，由widthRatingContainer = starWidth*opts.length可以看出，widthRatingContainer是左右星星圖片加起來的寬度。因此，var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);可以把分母與分子上的兩個(gè)100去掉，即(relativeX/widthRatingContainer)*opts.rateMax)，noteBrut變量最后存儲(chǔ)的是鼠標(biāo)選擇的比例，如果rateMax設(shè)為20，則noteBrut的范圍可以通過鼠標(biāo)來確定（0—20）。
switch函數(shù)，是通過decimalLength參數(shù)（用來設(shè)定顯示比例的小數(shù)位），最終確定（比例）顯示的位數(shù)。讀到這里，我們可以發(fā)現(xiàn)，getNote函數(shù)就是通過relativX來返回鼠標(biāo)選擇的比例，這個(gè)比例是什么，見下圖用筆刷框起來的部分：
接下來，我們再關(guān)注一個(gè)函數(shù)：
復(fù)制代碼 代碼如下:
function getStarWidth(){
switch(opts.type) {
case 'small' :
starWidth = 12; // small.png小星星圖片的寬度
starHeight = 10; // 高度
bgPath = opts.smallStarsPath; //圖片相對地址
break;
default :
starWidth = 23; // 大星星的寬度，可以看到，這是默認(rèn)值
starHeight = 20; // 高度
bgPath = opts.bigStarsPath; //星圖片相對地址
}
};
這個(gè)是一個(gè)比較簡單的用于初始化變量的函數(shù)，根據(jù)type屬性，初始化三個(gè)變量，分別是starWidth、starHeight、bgPath，綠色的注釋信息已能夠說明一切，不再贅述！
each()中定義的函數(shù)看完了，接下來，我們還在each()函數(shù)中進(jìn)行游蕩，按照從上到下的順序，先截取了幾行代碼如下：
復(fù)制代碼 代碼如下:
var opts = $.extend(defaults, op), //利用extend（）函數(shù)將默認(rèn)參數(shù)與輸入?yún)?shù)進(jìn)行合并，最后存儲(chǔ)在opts變量中。
newWidth = 0, //定義變量，該變量用于存儲(chǔ)relativeX,但會(huì)根據(jù)step屬性進(jìn)行相應(yīng)調(diào)整
starWidth = 0, //定義變量，星星的寬度
starHeight = 0, //高度
bgPath = ''; //星星圖片地址
if($(this).hasClass('jDisabled') || opts.isDisabled) //確定jDisabled變量，表示是否能對div進(jìn)行操作
var jDisabled = true;
else
var jDisabled = false;
getStarWidth(); //這個(gè)函數(shù)不贅述，上面分析過
$(this).height(starHeight); //根據(jù)星星的高度，確定此div的高度。
接著往下看：
復(fù)制代碼 代碼如下:
var average = parseFloat($(this).attr('id').split('_')[0]), //通過<div>的id（例如16_2），獲取下劃線前面的數(shù)字，把該數(shù)字作為默認(rèn)的選擇比例
idBox = parseInt($(this).attr('id').split('_')[1]), // 下劃線后面的部分，作為辨別評分插件的id
widthRatingContainer = starWidth*opts.length, // 星星圖片寬度總和，并作為外圍容器的寬度
widthColor = average/opts.rateMax*widthRatingContainer, // 顏色塊占用的寬度
接下來，我們將看到新建的三個(gè)<div>，并插入到主div中
復(fù)制代碼 代碼如下:
quotient =
$('<div>',
{
'class' : 'jRatingColor',
css:{
width:widthColor
}
}).appendTo($(this)),
average =
$('<div>',
{
'class' : 'jRatingAverage',
css:{
width:0,
top:- starHeight
}
}).appendTo($(this)),
jstar =
$('<div>',
{
'class' : 'jStar',
css:{
width:widthRatingContainer,
height:starHeight,
top:- (starHeight*2),
background: 'url('+bgPath+') repeat-x'
}
}).appendTo($(this));
首先我們分析第一個(gè)<div>，它的類名為jRatingColor，它表示默認(rèn)比例，用黃色表示，它的長度為withColor,這里主要看一下它的樣式表：
復(fù)制代碼 代碼如下:
.jRatingColor {
background-color:#f4c239; /* bgcolor of the stars*/
position:relative; //相對定位
top:0;
left:0;
z-index:2; //這里需注意，該div的祖先即我們each函數(shù)中的this 的z-index是1，下面我們將馬上看到。
height:100%;
}
第二個(gè)<div>樣式表如下：
復(fù)制代碼 代碼如下:
.jRatingAverage {
background-color:#f62929; //紅色
position:relative;
top:0;
left:0;
z-index:2;
height:100%;
}
但在上面的程序中，初始化時(shí)，把寬度設(shè)為0（因?yàn)槭髽?biāo)還沒選嘛），同時(shí)改變了top值：- 星高度，這樣它就和上面添加的div在縱方向上重合了。
接下來看第三個(gè)<div>,主要用來放小星星。
復(fù)制代碼 代碼如下:
/** Div containing the stars **/
.jStar {
position:relative;
left:0;
z-index:3;
}
這個(gè)樣式表比較簡單，我們著重看一下JS中動(dòng)態(tài)添加的幾個(gè)屬性值：
復(fù)制代碼 代碼如下:
width:widthRatingContainer, //設(shè)置寬度
height:starHeight, //高度
top:- (starHeight*2), //改變縱方向的值，和上面兩個(gè)<div>重合
background: 'url('+bgPath+') repeat-x' //設(shè)置背景為小星星
屬性的值設(shè)置了，但也許有人會(huì)問，問什么只看到小星星顏色是彩色的，而上面添加的前兩個(gè)<div>不是具有高度的長方形顏色條嗎？下面我們看一下小星星的圖片就明白為什么了！
不用多說，旁邊用不透明的背景，中間小星星是透明的，下面的顏色自然就顯示出來了！！
接下來的語句很簡單，就是設(shè)置一下最外層div容器的樣式，注意z-Index屬性:
復(fù)制代碼 代碼如下:
$(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
接下來會(huì)進(jìn)入相對復(fù)雜的部分，我們將關(guān)注鼠標(biāo)動(dòng)作及其響應(yīng)效果，首先關(guān)注一個(gè)小邏輯：
if(!jDisabled)
//接下來的代碼
可以看出，前面我們設(shè)置的jDisable變量在這里用上了，如果jDisabled為true，就表示插件禁用了，那么接下來的鼠標(biāo)操作將不會(huì)被執(zhí)行。
接下來看鼠標(biāo)操作是如何添加到插件中的：
$(this).unbind().bind({//鼠標(biāo)事件處理代碼，下面將分別進(jìn)行討論。
}）;
首先看以一下鼠標(biāo)進(jìn)入事件處理代碼：
復(fù)制代碼 代碼如下:
mouseenter : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft; //首先計(jì)算出relativeX，它表示的是鼠標(biāo)相對于外層<div>左邊界的橫向距離
if (opts.showRateInfo)
var tooltip =
$('<p>',{
'class' : 'jRatingInfos',
html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>', //注意這里用了getNote方法，前面已講了它的用途。
css : {
top: (e.pageY + opts.rateInfosY),
left: (e.pageX + opts.rateInfosX)
}
}).appendTo('body').show();
},
relativeX變量不多解釋，這里的注釋和前面都有提到，接下來，判斷showRateInfo參數(shù)是否為true,如果為true，表示要顯示比例信息（例如鼠標(biāo)下面顯示16/20），tooltip變量就是這個(gè)信息框，最后通過appendTo方法添加到body中。代碼邏輯很簡單，這個(gè)函數(shù)主要用來顯示提示框<p>，我們在這里可以重點(diǎn)關(guān)注一下<p>節(jié)點(diǎn)的樣式，它是絕對定位的，并利用代碼改變了top和Left值，看一下相關(guān)的樣式表：
復(fù)制代碼 代碼如下:
p.jRatingInfos {
position: absolute;
z-index:9999;
background: transparent url('http://www.cnblogs.com/icons/bg_jRatingInfos.png') no-repeat;
color: #FFF;
display: none;
width: 91px;
height: 29px;
font-size:16px;
text-align:center;
padding-top:5px;
}
p.jRatingInfos span.maxRate {
color:#c9c9c9;
font-size:14px;
}
接下來我們看一下鼠標(biāo)進(jìn)來后的mousemove事件的處理函數(shù)：
復(fù)制代碼 代碼如下:
mousemove : function(e){
var realOffsetLeft = findRealLeft(this);
var relativeX = e.pageX - realOffsetLeft;
if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
else newWidth = relativeX;
average.width(newWidth);
if (opts.showRateInfo)
$("p.jRatingInfos")
.css({
left: (e.pageX + opts.rateInfosX)
})
.html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
},
這個(gè)函數(shù)主要用來確定鼠標(biāo)選擇的比例，當(dāng)然這個(gè)比例是通過getNote(newWidth)來得到的，那么，確定合適的newWidth值就成了這個(gè)函數(shù)的核心，如果opts.step為true，即比例只能是整數(shù)個(gè)星星（不能為15.3等等），那么我們看一下這個(gè)邏輯：Math.floor(relativeX/starWidth)，starWidth是星星圖片的寬度，Math.floor(-0.1)=-1，Math.floor(0.1) = 0，Math.floor(2.6)=2，知道這些，上面加紅的代碼就很容易理解了。
OK，Let's go on，看一下三個(gè)簡單的處理函數(shù)
復(fù)制代碼 代碼如下:
mouseover : function(e){
$(this).css('cursor','pointer');
},
mouseout : function(){
$(this).css('cursor','default');
average.width(0);
},
mouseleave: function () {
$("p.jRatingInfos").remove();
},
mouseover函數(shù)確保鼠標(biāo)進(jìn)入插件后的顯示樣式，mouseout也是同樣，但它將類名為average的div（紅色的）寬度變成0，mouseleave函數(shù)讓提示信息框消失。
最后一個(gè)函數(shù)，也是整個(gè)源碼的結(jié)尾，當(dāng)然也是最重要最復(fù)雜的——鼠標(biāo)點(diǎn)擊函數(shù)：
復(fù)制代碼 代碼如下:
click : function(e){
//接下來的代碼都在此處。
}
我們分部來，先看第一部分：
復(fù)制代碼 代碼如下:
$(this).unbind().css('cursor','default').addClass('jDisabled');
為什么這里只列出一條語句，因?yàn)樗苤匾?，但也很簡單，我們這里一定要關(guān)注unbind()函數(shù)，它非常非常重要，當(dāng)點(diǎn)擊鼠標(biāo)后，首先把其他所有綁定到外圍<div>的事件都去掉了，這樣就鼠標(biāo)點(diǎn)擊的瞬間，該插件的外觀就固定顯示在瀏覽器中，不再隨著鼠標(biāo)事件而出現(xiàn)變化。當(dāng)然，最后給<div>添加jDisabled屬性。
我們接著往后走：
復(fù)制代碼 代碼如下:
if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
e.preventDefault();
var rate = getNote(newWidth); //關(guān)注rate變量，后面要用到。
average.width(newWidth);
第一句不難理解，刪除提示信息框，第二句取消鼠標(biāo)點(diǎn)擊的默認(rèn)操作，后面兩句很簡單，不再贅述，要知道newWidth在前面已提到，表示鼠標(biāo)選擇的寬度。
最后一條語句，把選擇的比例發(fā)送到服務(wù)器端進(jìn)行持久化操作：
復(fù)制代碼 代碼如下:
$.post(
opts.phpPath, //利用Ajax技術(shù)，向服務(wù)端發(fā)送數(shù)據(jù)的地址
{ //Post過去的數(shù)據(jù)
idBox : idBox,
rate : rate,
action : 'rating'
},
function(data) { //回調(diào)函數(shù)，主要向插件自定義函數(shù)傳遞參數(shù)并執(zhí)行。
if(!data.error)
{
if(opts.onSuccess) opts.onSuccess( element, rate );
}
else
{
if(opts.onError) opts.onError( element, rate );
}
},
'json' //確定如何理解返回的數(shù)據(jù)，它采用json.
);
利用jQuery做Ajax確實(shí)很簡單，代碼中做了必要注釋，這里不再贅述，這個(gè)插件的源碼就分析完了，比較粗，但整個(gè)邏輯也許體現(xiàn)了一些，希望該學(xué)習(xí)筆記對大家能有幫助。下面我們進(jìn)入實(shí)戰(zhàn)階段。
三、實(shí)戰(zhàn)jRating插件
為了更加逼近真實(shí)應(yīng)用，我們先利用sql server建立一張數(shù)據(jù)庫表，它是一個(gè)文章類型表，有id、標(biāo)題、文章內(nèi)容、評分四個(gè)字段，截圖如下：
評分字段默認(rèn)為-1，表示該文章還沒有被評分。當(dāng)然，現(xiàn)在有人會(huì)說，這個(gè)表設(shè)計(jì)的很不合理，因?yàn)橐黄恼虏粫?huì)只評分一次吧，應(yīng)該每個(gè)用戶都能進(jìn)行評論，是的，我們在這里只是為了演示jRating插件利用Ajax進(jìn)行持久化操作，因?yàn)槭茄菔?，所以一切從儉。
新建一個(gè)Web頁面，用來顯示第一篇文章（id為1）的標(biāo)題、內(nèi)容及評分插件，見前臺(tái)代碼：
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Script/jRating/jRating.jquery.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="Script/jRating/jRating.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".theRating").jRating({
length: 20,
phpPath: 'tempAjax.aspx/UpdateComment' //地址變成了一個(gè)aspx類型的WEB頁面下的一個(gè)靜態(tài)函數(shù)，稍后我們會(huì)看到！
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="標(biāo)題："></asp:Label>
<asp:Label ID="page1_title" runat="server" Text=""></asp:Label><br />
<asp:Label ID="page1_body" runat="server" Text=""></asp:Label><br />
<div id="16_1" class="theRating"></div>
</div>
</form>
</body>
</html>
后臺(tái)CS代碼如下：
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
tempEntities cbx = new tempEntities(); //用了實(shí)體框架獲取數(shù)據(jù)表
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1_title.Text = page1.title;
page1_body.Text = page1.body;
}
}
為了減少數(shù)據(jù)庫連接代碼，我用了實(shí)體框架，只映射了一張表（jRatingArticle），就是上面我們看到的。獲取id為1的文章對象，并把相應(yīng)屬性賦值到Label控件的Text屬性中。
頁面效果如下：
我們可以看到上面前臺(tái)頁面的JS代碼中，有這樣一條語句：
phpPath: 'tempAjax.aspx/UpdateComment'
它指明了，當(dāng)鼠標(biāo)點(diǎn)擊插件后，要通過Ajax發(fā)送數(shù)據(jù)的地址，這里我們用.net頁面技術(shù)來處理這個(gè)異步請求。tempAjax.aspx的后臺(tái)cs代碼如下：
復(fù)制代碼 代碼如下:
[WebMethod()]
public static void UpdateComment(int idBox, int rate)
{
tempEntities cbx = new tempEntities();
var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault();
page1.is_comment = rate;
cbx.SaveChanges();
}
此時(shí)，我們還需修改jRating插件的原文件，把鼠標(biāo)單擊(click)處理函數(shù)中的$.post函數(shù)替換如下：
復(fù)制代碼 代碼如下:
$.ajax({
type: "POST",
url: opts.phpPath,
data: '{"idBox":"' + idBox + '","rate":"' + rate + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
為什么要改變源文件，因?yàn)槲蚁敫淖傾jax請求的contentType屬性，利用json格式發(fā)送請求數(shù)據(jù)，默認(rèn)是application/x-www-form-urlencoded
OK，萬事俱備，看一下執(zhí)行效果（選擇比例為16,16顆紅星嘛）：
看看數(shù)據(jù)庫的變化：
試驗(yàn)成功！今天學(xué)習(xí)就到這里，希望此篇學(xué)習(xí)筆記對大家能有所幫助！
相關(guān)文章
關(guān)于jquery動(dòng)態(tài)增減控件的一些想法和小插件
這段代碼壓縮到100行內(nèi)，而且擴(kuò)展方便，可以非常輕松的增減控件的數(shù)量,使用非常簡單。2010-08-08
這篇文章主要介紹了jQuery實(shí)現(xiàn)按比例縮放圖片的方法,涉及jQuery針對頁面元素的獲取、屬性運(yùn)算、設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
本文為大家介紹下使用jquery改變class屬性的值，通過removeClass、addClass實(shí)現(xiàn)，具體如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery插件實(shí)現(xiàn)控制網(wǎng)頁元素動(dòng)態(tài)居中顯示
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)控制網(wǎng)頁元素動(dòng)態(tài)居中顯示,實(shí)例分析了jQuery插件的實(shí)現(xiàn)與元素動(dòng)態(tài)顯示的技巧,需要的朋友可以參考下2015-03-03
JQuery中基礎(chǔ)過濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
zTree異步加載展開第一級節(jié)點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了zTree異步加載展開第一級節(jié)點(diǎn)的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-09-09
本文主要介紹了JQuery的基本知識，如：jquery內(nèi)置函數(shù)，JQuery對象，Dom對象，jquery選擇器，jquery的迭代，jquery的節(jié)點(diǎn)遍歷等等，有助于對JQuery基本知識的學(xué)習(xí)與鞏固。需要的朋友可以參考下2016-12-12
這篇文章主要介紹了jQuery獲取瀏覽器類型和版本號的方法 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jquery offset函數(shù)應(yīng)用實(shí)例
點(diǎn)擊一個(gè)按鈕，然后在按鈕的下方顯示一個(gè)div,當(dāng)按鈕位于角落時(shí)，div的位置設(shè)定就需要調(diào)整，不然，div將顯示不完全.我打算使用offset()方法實(shí)現(xiàn)此功能2012-11-11