`
jiangzhenghua
  • 浏览: 600231 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery.fn 是个什么东西?

阅读更多

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提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

分享到:
评论
1 楼 reyesyang 2012-02-20  
看别人的源码刚好看到这个,帮助理解!

相关推荐

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

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,... fn是什么东西呢。查看jQuery代码,就不难发现。 代码如下: jQuery.fn =

    开发插件的两个方法jquery.fn.extend与jquery.extend

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object)...

    jquery的extend和fn.extend的使用说明

    jQuery为开发插件提拱了两个方法,分别是: 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...

    jquery 插件开发方法小结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 ...

    jquery插件开发方法(初学者)

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 ...

    jquery 插件学习(四)

    首先,我们要明白`jQuery.fn`和`jQuery.prototype`实际上是同一个东西,它们都是jQuery对象实例的方法集合。当我们向`jQuery.fn`或`jQuery.prototype`添加新的方法时,实际上是在扩展jQuery对象的原型,使得所有...

    jquery源码,我上传东西,是为了可以下载东西,oh,mygod

    通过`$.fn.extend()`,开发者可以轻松创建自定义方法,构建个性化的jQuery插件。 9. **兼容性处理**:jQuery致力于提供跨浏览器的解决方案,通过封装差异,使得开发者不必关心不同浏览器之间的兼容性问题。 10. **...

    jquery实现的好东西 ,要就下,jquery实现的好东西 ,要就下

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在本文中,我们将深入探讨jQuery的核心概念、主要功能及其在实际开发中的应用。 1. **jQuery核心概念*...

    jquery 经典案例

    在本文中,我们将深入探讨50个经典的jQuery案例,这些案例展示了jQuery的强大功能和灵活性,帮助开发者提高效率并创建出令人惊艳的用户界面。** 1. **选择器与遍历DOM** - `$("#id")`:通过ID选择元素。 - `$("....

    JQuery中$(document)是什么意思有什么作用

    首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready… 他在页面加载完成之前执行。 为什么不用[removed](),因为[removed]函数执行的时候,要说明所有东西已经载入,...

    JQuery each()函数如何优化循环DOM结构的性能

    如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来。这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌。 代码如下: $.fn.beautifyTable = ...

    JQuery 图片延迟加载并等比缩放插件

    最近在学习JS的OOP所以写了这么个东西 使用方法: $(“.viewArea img”).zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 代码如下: (function($){ $.fn.zoom ...

    jQuery表格列宽可拖拽改变且兼容firfox

    选择了表格中的第一个tr(即表头)中的th元素,并在每一个th元素中插入了一个div,这个div带有自定义的CSS样式类resizeDivClass,使得鼠标可以识别为可拖拽状态,即当鼠标悬停在该div上时,光标变为e-resize(东西向...

Global site tag (gtag.js) - Google Analytics