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 ...
随机推荐
- 转：sqlplus与shell互相传值的几种情况
sqlplus与shell互相传值的几种情况 情况一:在shell中最简单的调用sqlplus $cat test.sh #!/bin/sh sqlplus oracle/oracle@oracle& ...
- MIME小知识
http://www.alixixi.com/program/a/2008020514775.shtml 用户可以通过使用MIME以设置服务器传送多媒体如声音和动画信息,这一切可能通过CGI脚本来进行 ...
- UIScrollView 和 UIPageControl
UIScrollView [滚动视图]非常重要 UIScrollView是滚动视图,是其它带有滚动功能视图的父类, 本身不显示或者只显示背景,主要负责子视图的滚动和翻页. 一.常用属性 1.基本方法 ...
- JS查找和替换字符串列子
依赖 工具函数库 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 套接字和域名系统DNS
套接字产生的原因: 当应用进程通过传输层进行通信时 ,TCP和 UDP将面临同时为多个应用进程提供并行通信的问题.多个TCP连接或多个应用程序进程可能需要通过同一个TCP协议端口传输数据. 为了区别每 ...
- 天梯赛决赛 L2-1.红色警报 并查集
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- javactript关闭窗体,刷新父窗体
//关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=javascript>window.close();< ...
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
- -linux删除大量文件----rm,rsync
要在linux下删除海量文件,比如有数十万个文件,此时常用的rm -rf * 就会等待时间很长.这时我们可以使用rsync快速删除大量文件. 1.建立一个空目录 mkdir -p /tmp/rsync ...
- 在MyEclipse8.6中设置jQuery自动提示 - 肖飞figo的云计算专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...