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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
js实现图片放大展示效果
Aug 30 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
javascript实现计算器功能
Mar 30 Javascript
JavaScript实现HSL拾色器
May 21 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迭代器的内部执行过程详解
2013/11/12 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
Python 字符串定义
2009/09/25 Python
python控制台显示时钟的示例
2014/02/24 Python
Python中optparse模块使用浅析
2015/01/01 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
django解决跨域请求的问题
2018/11/11 Python
python字符串查找函数的用法详解
2019/07/08 Python
python写一个随机点名软件的实例
2019/11/28 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
什么是规则表达式
2012/05/03 面试题
建筑安全责任书范本
2014/07/24 职场文书
2015年助残日活动总结
2015/03/27 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
python基础之函数的定义和调用
2021/10/24 Python