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 相关文章推荐
用于table内容排序
Jul 21 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
Javascript 面向对象 继承
May 13 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
微信小程序自定义组件实现环形进度条
Nov 17 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
php session劫持和防范的方法
2013/11/12 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python实现AI换脸功能
2020/04/10 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
UNIX文件名称有什么规定
2013/03/25 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
涉外文秘个人求职的自我评价
2013/10/07 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
农村葬礼主持词
2014/03/31 职场文书
优秀员工推荐信
2014/05/10 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
python实现过滤敏感词
2021/05/08 Python
Python编写nmap扫描工具
2021/07/21 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS