jQuery function的正確書寫方法

更新時間：2013年08月02日 18:23:20 作者：

jQuery function想必大家都不會陌生，web前端開發(fā)人員經(jīng)常會接觸到，下面為大家介紹下它的正確書寫方法，感興趣的朋友可以參考下

jQuery 正確的書寫格式：
引入：<script src="/libs/jquery/jquery.js" type="text/javascript"></script>
html寫法：

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<script src="modules-js/qiyi.js"></script> 
<script> 
$(function() { 
qiyiPlugin.init($("#zong_qiyi")); 
}); 
</script> 
</head> 
<div id="zong_qiyi"> 
//XXXXXXXXXXXXXX 
</div> 
jQuery寫法： 
var qiyiPlugin = 
{ 
init: function(parentNode) { 
var self = this; 
self.parentNode = parentNode; 
//刷新局部內(nèi)容 
self.parentNode 
.on('refresh',function(event){ 
self.qiyiList(); 
}); 
}, 
//顯示 
qiyiList: function(){ 
var self = this; 
//顯示內(nèi)功信息 
self.getQiyiList(function(result){ 
//console.log(result); 
if(result.qiyiList){ 
self.qiyiHtml1();//重新覆蓋html，防止重復(fù)顯示內(nèi)容 
self.displayQiyiList(result.qiyiList);//展示頁面內(nèi)容 
}else{ 
alert("沒有獲得奇藝數(shù)據(jù)，請查看接口"); 
} 
}); 
}, 
//顯示奇藝內(nèi)容 
displayQiyiList: function(qiyiList){ 
var self = this; 
var top = "#zong_qiyi"; 
$(top).find('#qiyi_control_panel').each(function(){ 
if ($(this).data('data')) $(this).remove(); 
}); 
var line0 = $(top).find("#qiyi_control_panel"); 
$.each(qiyiList,function(index,item2){ 
var line1 = $(line0).clone(); 
$(line1).data('data',item2);//附加屬性data與信息 
$(line1).attr('id',index+1); 
$(line1).find("#name").html(item2.name); 
$(line1).find("#level").html(item2.level); 
$(line1).find("#maxLevel").html(item2.maxLevel); 
$(line1).find("#exp").html(item2.exp+"/"+item2.needExp); 
$(line1).find("#desc1").html(item2.desc1); 
$(line0).before(line1); 
$(line1).show(); 
$(line1).find("#upgrade") 
.on('click',function(event){ 
var table = $(this).parents('table:first'); 
var info = $(table).data('data'); 
self.clickToUpgradeQiyi(info, function(result){ 
if(!result.success){ 
alert(result.fail.desc1); 
}else{ 
//alert(result.success.desc1); 
growingPlugin.playerTopData();//改變attrs屬性 
self.parentNode.trigger('refresh'); 
} 
}); 
}); 
}); 
}, 
//賦html值- 
qiyiHtml1: function() { 
var string = "<table id='qiyi_control_panel' class='table table-bordered table-hover' style='display:none; width:500;'>"; 
string += "<tr><td>名稱：</td><td id=name>haoren_內(nèi)功</td></tr>"; 
string += "<tr><td>當(dāng)前等級：</td><td id=level></td></tr>"; 
string += "<tr><td>最大等級：</td><td id=maxLevel></td></tr>"; 
string += "<tr><td>exp：</td><td id=exp></td></tr>"; 
string += "<tr><td>描述：</td><td id=desc1></td></tr>"; 
string += "<tr><td><button id='upgrade' class='btn btn-link'>升級</button></td></tr>"; 
string += "</table>"; 
$("#zong_qiyi").html(string); 
}, 
//奇藝升級 
clickToUpgradeQiyi: function(info,callback) { 
var query = "operation=upgradeQiyi"; 
query += "&qiyiName=" + info.name; 
toolsPlugin.play(query,callback); 
}, 
//獲得奇藝列表 
getQiyiList: function(callback) { 
var query = "operation=getQiyiList"; 
toolsPlugin.play(query,callback); 
}, 
}; 