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中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
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新手上路(十一)
2006/10/09 PHP
php URL编码解码函数代码
2009/03/10 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python如何实现DES加密
2020/09/21 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
abstract是什么意思
2012/02/12 面试题
质检员的岗位职责
2013/11/15 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
金融管理专业求职信
2014/07/10 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
教师节校长致辞
2015/07/31 职场文书