jQuery插件开发详解
我们该如何扩展jQuery呢?主要可以通过下面2个来扩展:$.extend 和 $.fn
$.extend
如果把jQuery当成一个类,$.extend相当于为该类添加了静态方法extend。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1,
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + ' My App: ' + message);
}
});
$.log("出错啦!");
</script>
</body>
</html>
$.fn等于$.prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p class="text1">测试文字</p>
<p class="text2">测试文字</p>
<script src="jquery.js"></script>
<script>
$.fn.changeColor = function(options){
this.defaults = {
'color': '#000',
'fontSize': '14px',
'fontWeight': 'normal'
};
this.opt = $.extend(this.defaults, options);
console.log(this.defaults);
this.css({
'color': this.opt.color,
'font-size': this.opt.fontSize,
'font-weight': this.opt.fontWeight
});
}
$(".text1").changeColor();
$(".text2").changeColor({'color': '#f06','fontSize': '18px','fontWeight': 'bold'});
</script>
</body>
</html>
将我们要实现的代码封装在
;(function($,window,document,undefined){
//想要实现的功能的代码
})(jQuery,window,document);
这里的";"最好添加上,可以避免代码压缩时出现问题
jQuery插件开发详解的更多相关文章
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- jQuery.validator 详解
jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
- jquery方法详解
jquery方法详解 http://www.365mini.com/doc
- Android Studio 插件开发详解四:填坑
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78265540 本文出自[赵彦军的博客] 在前面我介绍了插件开发的基本流程 [And ...
- Android Studio 插件开发详解三:翻译插件实战
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78113868 本文出自[赵彦军的博客] 一:概述 如果不了解插件开发基础的同学可以 ...
- Android Studio 插件开发详解二:工具类
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112856 本文出自[赵彦军的博客] 在插件开发过程中,我们按照开发一个正式的项 ...
- Android Studio 插件开发详解一:入门练手
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112003 本文出自[赵彦军的博客] 一:概述 相信大家在使用Android S ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
随机推荐
- ural1147 Shaping Regions
Shaping Regions Time limit: 0.5 secondMemory limit: 64 MB N opaque rectangles (1 ≤ N ≤ 1000) of vari ...
- UIApearance
转载自:http://www.cocoachina.com/ios/20150723/12671.html 文章开头先援引一下Mattt Thompson大神在UIApearance里的一句话吧: 1 ...
- 【转】SSL/TLS/WTLS协议原理
1 SSL(Secure Socket Layer)是netscape公司设计的主要用于web的安全传输协议.这种协议在WEB上获得了广泛的应用.2 IETF(www.ietf.org )将SSL作了 ...
- 读取excel数据 到 datagrid 出现 找不到可安装的ISAM
读取excel数据 到 datagrid 出现:找不到可安装的ISAM 错误: 实在没有办法了 就仔细的查看了 一下数据链接字符串: string strConn = "Prov ...
- Counting Intersections
Counting Intersections Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...
- 读书笔记——thinking in java
1.一切都是对象,用引用操作对象 1.1程序存储的地方 引用存放在堆栈区(通用的RAM),所有对象存储在堆(一种通用的内存池).堆和堆栈的区别:堆栈中的这些引用,java系统是要知道确切的生命周期,堆 ...
- [iOS]C语言技术视频-03-程序分支结构(switch)
下载地址: 链接: http://pan.baidu.com/s/1iBpYA 密码: e2ym
- hibernate--对象的三种状态Transient,Persistent,Detached
Transient:刚new出来的对象 Persistent: sava或者update之后的状态 Detached: close或者clear之后 test函数: @Test public void ...
- E/WindowState(643): getStack: Window{33f867f8 u0 Starting com.xxxxxx.ooooo}
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% ...
- SQL truncate 、delete与drop区别
SQL truncate .delete与drop区别 相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句 ...