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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 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防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
自动更新作用
2006/10/08 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
简单的三步vuex入门
2018/05/20 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python+django实现文件下载
2016/01/17 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
小学生读书感言
2014/02/12 职场文书
导游词之上海豫园
2019/10/24 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
2022年显卡天梯图(6月更新)
2022/06/17 数码科技