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中简单的进制转换代码实例
Oct 26 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue实现分页的三种效果
Jun 23 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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
如何开始收听短波广播
2021/03/01 无线电
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript函数详解
2015/02/27 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
js实现旋转的星空效果
2019/11/01 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python给图像添加噪声具体操作
2019/03/03 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
keras topN显示,自编写代码案例
2020/07/03 Python
美国家具网站:Cymax
2016/09/17 全球购物
几个常见的软件测试问题
2016/09/07 面试题
新闻学专业个人求职信写作
2014/02/04 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
PHP控制循环操作的时间
2021/04/01 PHP