`

关于 jquery #fn

 
阅读更多

jquery $.fn $.fx是什么意思

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc(),
即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();
通常使用extend方法扩展,详细请看API.



jQuery为开发插件提拱了两个方法,分别是:

 

jQuery.fn.extend(object);

jQuery.extend(object);

 

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

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

 

 

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

 


jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

 

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

 

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

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

 

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

 

$.extend({

  add:function(a,b){return a+b;}

});

 

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

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

 

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

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

 

Java代码 
$.fn.extend({        
        
   alertWhileClick:function(){        
       
       $(this).click(function(){        
       
            alert($(this).val());        
        });        
        
    }        
        
});        
        
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>    

 

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

分享到:
评论

相关推荐

    jQuery.extend和jQuery.fn.extend的区别

    在jQuery的API中,`jQuery.extend`和`jQuery.fn.extend`是两个重要的方法,它们用于合并对象属性,但作用范围和用途有所不同。本文将深入探讨这两个方法的差异,并通过实例解析它们的工作原理。 首先,`jQuery....

    HTML5使用jquery.fn.gantt.js生成甘特图.rar

    带动态提示的HTML5甘特图,HTML5使用jquery.fn.gantt.js生成甘特图,测试请在服务器环境下,请不要双击HTML打开,或者直接用火狐打开,这样看不到效果,本甘特图带有鼠标悬停提示效果。

    jQuery.fn和jQuery.prototype区别介绍

    在JavaScript和jQuery的世界里,`jQuery.fn` 和 `jQuery.prototype` 是两个非常关键的概念,它们密切相关,但有着明确的区别。了解这些概念对于深入理解和自定义jQuery插件是至关重要的。 首先,`jQuery.fn` 是 `...

    sortable.js(jquery.fn.sortable、jquery.fn.sortable.min.js)最新版

    在最新版本中,包括了`jquery.fn.sortable.js`和其压缩版`jquery.fn.sortable.min.js`,以及可能的替代版本`jquery.sortable.js`和`jquery.sortable.min.js`。这个插件主要适用于需要用户交互式调整元素顺序的场景,...

    jquery图片播放器 - jquery.fn.imgplayer-1.2

    &lt;script type="text/javascript" src="jquery.fn.imgplayer.min.js"&gt; 4. 绑定播放函数(参数说明详见上述) var player = $("#imgContainer").playImgs({ imgCSS : {'width' : '800px', 'height' : '600px'}, ...

    jQuery学习笔记之jQuery.fn.init()的参数分析

    在jQuery库中,`jQuery.fn.init`是jQuery构造函数的核心部分,它用于初始化新的jQuery对象。当我们使用`$`符号或者`jQuery`函数创建一个新的jQuery实例时,实际上就是在调用`jQuery.fn.init`。这个函数接收三个参数...

    jquery $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法,主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个...

    浅谈jquery.fn.extend与jquery.extend区别

    jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({  add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的“静态方法”,之后便可以在引入 jQuery 的地方,使用这...

    jQuery源码分析-03构造jQuery对象

    通过对jQuery源码中关于构造jQuery对象部分的分析,我们可以了解到jQuery对象的构造流程以及不同`selector`类型的处理方式。同时,通过`jQuery.extend`和`jQuery.fn.extend`的使用,使得jQuery具有良好的扩展性和...

    jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:...

    jquery.fn.sortable.js:jQuery插件可排序

    `jQuery.fn`是`jQuery.prototype`的别名,表示`jQuery`对象的所有方法集合。通过扩展`jQuery.fn`,开发者可以创建自定义的jQuery插件,就像`sortable.js`这样。 `jquery.fn.sortable.js`的工作原理通常包括以下步骤...

    jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

    主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下

    jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...

    jquery.gantt,js甘特图

    JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。它既可以图形化行程安排,也可以展示数据分布。使用方法:http://blog.csdn.net/kangrydotnet/article/details/42265539

    jQuery Gantt 甘特图

    **jQuery Gantt 甘特图**是用于网页端项目管理和任务调度的一种可视化工具,它基于流行的JavaScript库jQuery构建。甘特图是一种条形图,能够清晰地展示项目的进度、任务开始与结束时间以及任务间的依赖关系,对于...

    Jquery中$与$.fn的区别实例.zip

    在jQuery库中,`$`和`$.fn`都是核心组成部分,但它们有着不同的用途和功能。理解这两者的差异对于深入学习和使用jQuery至关重要。本文将详细解释`$`和`$.fn`的区别,并通过实例来帮助你更好地掌握它们。 首先,`$`...

    前端开源库-jquery-param-fn

    `jquery-param-fn` 就是这样一个针对jQuery的扩展,它是对原生`jQuery.param`函数的一个替代品,主要优化了参数序列化的过程。 `jQuery.param` 是jQuery核心库中的一个功能,用于将JavaScript对象或数组序列化为URL...

    jquery1.43源码分析(核心部分)

    该方法的具体实现位于 `jQuery.fn.init` 中,这个方法是 jQuery 对象原型的一个方法,因此所有 jQuery 对象都可以访问它。 ```javascript // 真正的初始化逻辑在这里 jQuery.fn.init = function(selector, context)...

    jQuery-gantt案例,下载即可用

    "jQuery-gantt"案例是利用JQuery库创建甘特图的一个实用示例,适合那些希望在Web应用中集成项目管理功能的开发者。 JQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。...

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

    jQuery.fn是jQuery库中的一个关键特性,它实际上是jQuery对象的prototype(原型)方法,允许开发者扩展jQuery的功能,创建自定义的插件。在这个案例中,我们将讨论如何使用jQuery.fn来构建一个简单的翻页插件。 ...

Global site tag (gtag.js) - Google Analytics