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 相关文章推荐
自己实现ajax封装示例分享
Apr 01 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
jquery实现倒计时效果
Dec 14 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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调用三种数据库的方法(3)
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
爱情寄语大全
2014/04/09 职场文书
开工仪式策划方案
2014/05/23 职场文书
企业晚会策划方案
2014/05/29 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
股东协议书范本2016
2016/03/21 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python