下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructions.html

jQuery插件实现的方法和原理简单说明

jQuery是一个封装的很好的类,比如我们使用$("#username")会生成一个 jQuery类的实例。

1、jQuery插件开发主要使用如下两个方法:
1.1、添加静态方法
jQuery.extend(object);

为扩展jQuery类本身,为类添加新的方法,可以理解文添加静态方法。

$.extend({
  addMethod : function(a, b){return a + b;} // $.addMethod(1, 2); //return 3
});
1.2、添加成员方法
jQuery.fn.extend(object);
jQuery.fn = jQuery.prototype

给jQuery对象添加方法,对jQuery.prototype进行扩展,为jQuery类添加成员方法:

$.fn.extend({
getInputText:function(){
$(this).click(function(){
alert($(this).val());
});
}
}); $("#username").getInputText();
2、一个通用的框架:

以下是一个通用的框架:

(function($){
$.fn.yourPluginName = function(options){
//各种属性和参数 var options = $.extend(defaults, options); this.each(function(){
//插件的实现代码 });
};
})(jQuery);

关于

$.extend(defaults, options);

就是通过合并defaults和options来扩展defaults,实现插件默认参数的功能,详细解释可以参考jQuery的官方文档:

http://api.jquery.com/jQuery.extend/

jQuery插件实现的方法和原理简单说明的更多相关文章

  1. jQuery插件扩展extend的实现原理

    相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的 ...

  2. jQuery 插件封装的方法

    方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuer ...

  3. jquery插件jTemplates使用方法

    简单记一下我所做项目中用到的代码,以备以后用的时候一看明确了. 1.jsp(jquery-jtemplates.js下载地址:http://download.csdn.net/detail/xlb74 ...

  4. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  5. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  6. Wordpress解析系列之PHP编写hook钩子原理简单实例

    Wordpress作为全球应用最广泛的个人博客建站工具,有很多的技术架构值得我们学习推敲.其中,最著名最经典的编码技术架构就是采用了hook的机制. hook翻译成中文是钩子的意思,单独看这个词我们难 ...

  7. 简易jQuery插件

    之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...

  8. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  9. 如何开发jQuery插件

    一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...

随机推荐

  1. Linux SSH使用公钥私钥实现免登陆

    公钥和私钥(我是文盲,钥字之前都是读yao,这是多音字这里应该念yue),是成对出现的,一旦任何一个做了更改都会验证失败. 1.免登陆的实现:   使用下例中ssky-keygen和ssh-copy- ...

  2. C#后台绑定ComboBox

    C# using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...

  3. Tab选项卡的原生写法

    关键点:建立点击事件和显示事件的连接,即点li 1让对应的div1出来,很容易想到遍历.索引 ;;} ul,li{list-style: none;} .tab{background: rgba(2, ...

  4. CodeForces 719A Vitya in the Countryside 思维题

    题目大意:月亮从0到15,15下面是0.循环往复.给出n个数字,如果下一个数字大于第n个数字输出UP,小于输出DOWN,无法确定输出-1. 题目思路:给出0则一定是UP,给出15一定是DOWN,给出其 ...

  5. MySQL 常用基础命令

    一.启动与关闭 1.1 Linux下启动mysql 的命令: a. rpm包安装:service mysqld start b. 源码包安装:/usr/local/mysql/bin/mysqld_s ...

  6. Jquery的parent和parents(找到某一特定的祖先元素)

    关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...

  7. aX+bY+cZ=n(非负整数解存在性)

    题意: a*1234567+b*123456+c*1234=n 非负整数解得存在性. 题解: 看代码. #include<iostream> #include<cstdio> ...

  8. JS-运动基础(一)

    <title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red; posit ...

  9. Ng-model undefined in the controller

    这个问题是我最近在项目中碰到的,暂时没找到原因,找到一个解决方法,还多请大神指教,在Stack Overflow找到解决方法: I am having some "problems" ...

  10. Developing Backbone.js Applications

    https://addyosmani.com/backbone-fundamentals/