jQuery function的正确书写方法


Posted in Javascript onAugust 02, 2013

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; 
//刷新局部内容 
self.parentNode 
.on('refresh',function(event){ 
self.qiyiList(); 
}); 
}, 
//显示 
qiyiList: function(){ 
var self = this; 
//显示内功信息 
self.getQiyiList(function(result){ 
//console.log(result); 
if(result.qiyiList){ 
self.qiyiHtml1();//重新覆盖html,防止重复显示内容 
self.displayQiyiList(result.qiyiList);//展示页面内容 
}else{ 
alert("没有获得奇艺数据,请查看接口"); 
} 
}); 
}, 
//显示奇艺内容 
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_内功</td></tr>"; 
string += "<tr><td>当前等级:</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); 
}, 
};
Javascript 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
原生JS实现留言板功能
Feb 08 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 #Javascript
js 固定悬浮效果实现思路代码
Aug 02 #Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 #Javascript
页面右下角弹出提示框示例代码js版
Aug 02 #Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 #Javascript
js获取location.href的参数实例代码
Aug 02 #Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 #Javascript
You might like
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
讲解Python中的递归函数
2015/04/27 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python dict的常用方法示例代码
2020/06/23 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
药学专业个人自我评价
2013/11/11 职场文书
图书室标语
2014/06/21 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
寻找成龙观后感
2015/06/12 职场文书
葬礼主持词
2015/07/02 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Java字符串逆序方法详情
2022/03/21 Java/Android
python如何将mat文件转为png
2022/07/15 Python