jq 插件 的两个相关的函数 jQuery.fn.extend(object); jQuery.extend(object);

jQuery为开发插件提拱了两个方法,分别是:  http://www.cnblogs.com/wyjgreat/archive/2011/07/19/2110754.html

JavaScript代码

  • jQuery.fn.extend(object);
  • jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

JavaScript代码

  • jQuery.fn = jQuery.prototype = {
  •    init: function( selector, context ) {//…. 
  •    //……
  • };

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

XML/HTML代码

  • $.extend({
  •   add:function(a,b){return a+b;}
  • });

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

JavaScript代码

  • $.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

JavaScript代码

  • $.fn.extend({
  • alertWhileClick:function(){
  • $(this).click(function(){
  • alert($(this).val());
  • });
  • }
  • });
  • $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>

$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

时间: 2024-08-05 02:54:02

jq 插件 的两个相关的函数 jQuery.fn.extend(object); jQuery.extend(object);的相关文章

jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别

一.jQuery插件开发分为两种:  1.类级别: 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); var i = $.add(3,2); var j = $.minus(3,2); 2.对象级别: 对

使用jQuery.fn自定义jQuery翻页插件

第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数 function setImageButto

JQ插件案例-基于jquery和canvas的调色板

最近在研究canvas,想要弄一个canvas的所见所得工具. 在研究的过程中,猛然发现调色板不太好实现. 通过多方面研究及翻阅文献,发现网上对于调色板的实现大都是产生一个色块列表而已. 这种方式丑爆了好吧,而且选颜色麻烦死了,绿色还分那么多个块,怎么能好好选到自己心仪的颜色呢? 论插件来说的话,有一个插件还不错,基本和Photoshop的调色板差不多: 官网:spectrum 这款调色板还算比较符合我个人喜好,而且demo显示的功能也非常不错. 我没有下载,也没有去仔细研究它的实现方式,粗看了

JQ插件机制

JQ插件概述 所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码就能实现很好的效果. 自定义插件 JQ允许自定义插件,对JQ的方法进行扩展.自定义插件主要分两种: JQ元素扩展和JQ本身扩展. JQ元素扩展: 方法: jQuery.fn.extend(object) 概述 扩展 jQuery 元素集来提供新的方法(通常用来制作插件). 也就是说,该方法可以用来扩

(二十四)linux新定时器:timefd及相关操作函数

timerfd是Linux为用户程序提供的一个定时器接口.这个接口基于文件描述符,通过文件描述符的可读事件进行超时通知,所以能够被用于select/poll的应用场景. 一,相关操作函数 #include <sys/timerfd.h> int timerfd_create(int clockid, int flags); int timerfd_settime(int fd, int flags, const struct itimerspec *new_value, struct itim

jQuery开发插件的两种方式

最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验讲讲插件开发.jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展

Sublime Text 2 安装Package Control和插件的两种方法

Sublime Text 2 安装Package Control和插件的两种方法 缘起 前几天系统刚刚还原了,重装完Sublime Text2再安装插件的时候可能是由于公司的网络环境的问题,各种报错,将解决方法记录下来.系统环境:Win7 x64 + Sublime Text2. Package Control 方法一:在线安装,首先打开 Ctrl + ~,输入如下的代码: import urllib2,os; pf='Package Control.sublime-package'; ipp

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

JQ插件

---恢复内容开始--- 什么是插件 插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一定规范的应用程序接口编写出来的程序. 插件的引入 引入jquery.js文件 引入插件的js文件 引入插件的周边文件,如皮肤,语言包等 插件的使用 可在jqurey的官网上查看JQ的各种插件:http://plugins.jquery.com/ 在点击进入某一插件后,可看到插件的版本等信息,常用的Try a Demo(运行样式)和Read the Do