我们该如何扩展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插件开发详解的更多相关文章

  1. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  2. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  3. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  4. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  5. Android Studio 插件开发详解四：填坑

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78265540 本文出自[赵彦军的博客] 在前面我介绍了插件开发的基本流程 [And ...

  6. Android Studio 插件开发详解三：翻译插件实战

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78113868 本文出自[赵彦军的博客] 一:概述 如果不了解插件开发基础的同学可以 ...

  7. Android Studio 插件开发详解二：工具类

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112856 本文出自[赵彦军的博客] 在插件开发过程中,我们按照开发一个正式的项 ...

  8. Android Studio 插件开发详解一：入门练手

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112003 本文出自[赵彦军的博客] 一:概述 相信大家在使用Android S ...

  9. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

随机推荐

  1. 一个有意思的 hta 程序 （html application）

    哈哈,刚才同事给我讲了一个hta 程序,他自己说最近在学html5 开发坦克大战,不错,这种好奇心, 好学的精神值得我这个程序员学习,感觉他的视野面比我这个程序员还广,有点小惭愧. 什么是hta 呢? ...

  2. poj 1837 Balance 动态规划 （经典好题，很锻炼思维）

    题目大意:给你一个天平,并给出m个刻度,n个砝码,刻度的绝对值代表距离平衡点的位置,并给出每个砝码的重量.达到平衡状态的方法有几种. 题目思路:首先我们先要明确dp数组的作用,dp[i][j]中,i为 ...

  3. 总结OpenWrt系统基本操作方法

    1.OpenWrt系统编译好的固件位于哪个文件夹?root@ald888:/work/openwrt/trunk/bin/ramips# lsopenwrt-ramips-rt305x-mpr-a2- ...

  4. [数据结构]Splay简介

    Splay树,又叫伸展树,可以实现快速分裂合并一个序列,几乎可以完成平衡树的所有操作.其中最重要的操作是将指定节点伸展到指定位置, 目录 节点定义 旋转操作 伸展操作 插入操作 删除操作 lower_ ...

  5. 如何把mysql的ID归0？

    如何把mysql的ID归0 可以归0的,truncate table + 表名     就行了

  6. mysql连接不上Uncaught exception 'PDOException' with message 'could not find driver

    需要给你的PHP加一个PDO扩展打开PHP.INI 把extension=php_pdo.dll 前面的分号去掉 重启APACHE. extension=php_pdo_mysql.dll

  7. git 以及 github 使用系列

    本人打算开始写一个有关git 使用,以及github 使用的系列文章了,一来可以自己总结,二来github用好了,可以存放自己的一些知识框架吧. 1.准备 : 有一个 github上的账号, wind ...

  8. 2016"百度之星" - 资格赛（Astar Round1） Problem E

    简单模拟题,耐心写就能过. #include <stdio.h> #include <math.h> #include<cstring> #include<c ...

  9. 左倾堆（C#）

    参考:http://www.cnblogs.com/skywang12345/p/3638384.html using System; using System.Collections.Generic ...

  10. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...