jQuery function的正確書(shū)寫(xiě)方法
更新時(shí)間:2013年08月02日 18:23:20 作者:
jQuery function想必大家都不會(huì)陌生,web前端開(kāi)發(fā)人員經(jīng)常會(huì)接觸到,下面為大家介紹下它的正確書(shū)寫(xiě)方法,感興趣的朋友可以參考下
jQuery 正確的書(shū)寫(xiě)格式:
引入:<script src="/libs/jquery/jquery.js" type="text/javascript"></script>
html寫(xiě)法:
<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寫(xiě)法:
var qiyiPlugin =
{
init: function(parentNode) {
var self = this;
self.parentNode = parentNode;
//刷新局部?jī)?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);//展示頁(yè)面內(nèi)容
}else{
alert("沒(méi)有獲得奇藝數(shù)據(jù),請(qǐng)查看接口");
}
});
},
//顯示奇藝內(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)前等級(jí):</td><td id=level></td></tr>";
string += "<tr><td>最大等級(jí):</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'>升級(jí)</button></td></tr>";
string += "</table>";
$("#zong_qiyi").html(string);
},
//奇藝升級(jí)
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);
},
};
引入:<script src="/libs/jquery/jquery.js" type="text/javascript"></script>
html寫(xiě)法:
復(fù)制代碼 代碼如下:
<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寫(xiě)法:
var qiyiPlugin =
{
init: function(parentNode) {
var self = this;
self.parentNode = parentNode;
//刷新局部?jī)?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);//展示頁(yè)面內(nèi)容
}else{
alert("沒(méi)有獲得奇藝數(shù)據(jù),請(qǐng)查看接口");
}
});
},
//顯示奇藝內(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)前等級(jí):</td><td id=level></td></tr>";
string += "<tr><td>最大等級(jí):</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'>升級(jí)</button></td></tr>";
string += "</table>";
$("#zong_qiyi").html(string);
},
//奇藝升級(jí)
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);
},
};
您可能感興趣的文章:
- jQuery中isFunction方法的BUG修復(fù)
- (function($){...})(jQuery)的意思
- 解決jquery submit()提交表單提示:f[s] is not a function
- jQuery中(function(){})()執(zhí)行順序的理解
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- 淺析jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別
- jQuery中;function($,undefined) 前面的分號(hào)的用處
- 簡(jiǎn)單談?wù)刯Query(function(){})與(function(){})(jQuery)
相關(guān)文章
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動(dòng)提示功能示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-12jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jquery處理checkbox(復(fù)選框)是否被選中實(shí)例代碼
這篇文章主要介紹了jquery處理checkbox(復(fù)選框)是否被選中實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06jquery ui dialog替代confirm實(shí)例分析
這篇文章主要介紹了jquery ui dialog替代confirm的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery ui插件的dialog模擬confirm功能的具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)的簡(jiǎn)單排序功能示例【冒泡排序】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單排序功能,結(jié)合實(shí)例形式分析了冒泡排序的原理及具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01jquery配合css簡(jiǎn)單實(shí)現(xiàn)返回頂部效果
返回頂部效果想必大家并不陌生吧,其實(shí)實(shí)現(xiàn)方法有很多,在本文為大家介紹下使用jquery是如何輕易實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-09-09jQuery EasyUI中DataGird動(dòng)態(tài)生成列的方法
EasyUI中使用DataGird顯示數(shù)據(jù)列表中,有時(shí)需要根據(jù)需要顯示不同的列,例如,在權(quán)限管理中,不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段,這就需要DataGird動(dòng)態(tài)組合列,下面介紹EasyUI中DataGird動(dòng)態(tài)生成列的方法2016-04-04