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标签在页面中的位置探讨
Apr 11 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
javascript关于继承解析
May 10 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
javascript自执行函数
Feb 10 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
vue实现移动端返回顶部
Oct 12 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
中专生学习生活的自我评价分享
2013/10/27 职场文书
cf收人广告词大全
2014/03/14 职场文书
毕业生就业协议书
2014/04/11 职场文书
项目负责人岗位职责
2015/02/15 职场文书
付款证明模板
2015/06/19 职场文书
红白喜事主持词
2015/07/06 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
高考升学宴主持词
2019/06/21 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python