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简易namespace管理器 实例代码
Jun 21 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
详解es6超好用的语法糖Decorator
Aug 01 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
详解用async/await来处理异步
Aug 28 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
js单词形式的运算符
2014/05/06 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
JS常见算法详解
2017/02/28 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
用python制作游戏外挂
2018/01/04 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
基于Python函数和变量名解析
2019/07/19 Python
python super的使用方法及实例详解
2019/09/25 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
企业宣传方案
2014/03/04 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
给客户的检讨书
2014/12/21 职场文书
大学生学期个人总结
2015/02/12 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技