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 contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
js中replace的用法总结
Dec 27 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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操作类
2006/11/16 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python shelve模块实现解析
2019/08/28 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python3.9新特性详解
2020/10/10 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
毕业自我鉴定范文
2013/11/06 职场文书
预备党员思想汇报
2014/01/08 职场文书
留学顾问岗位职责
2014/04/14 职场文书
高考励志标语
2014/06/05 职场文书
租车协议书范本2014
2014/11/17 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang