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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 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单件模式结合命令链模式使用说明
2008/09/07 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
JS作用域链详解
2017/06/26 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Angular中支持SCSS的方法
2017/11/18 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python 3中的yield from语法详解
2017/01/18 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
妇科医生自荐信
2013/11/05 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python