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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 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
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
基层工作经历证明
2014/01/13 职场文书
四年级数学教学反思
2014/02/02 职场文书
防火标语大全
2014/10/06 职场文书
公务员政审材料范文
2014/12/23 职场文书
干部个人考察材料
2014/12/24 职场文书
教学质量月活动总结
2015/05/11 职场文书
培训简讯范文
2015/07/20 职场文书
运动会致辞稿
2015/07/29 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js