jquery扩展 $.fn

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

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

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

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

复制代码代码如下:

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

原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。 
jQuery便是一个封装得非常好的类,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例。

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

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

便为 jQuery 添加一个为add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了, 
$.add(3,4); //return 7

jQuery.fn.extend(object);对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。 
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容。可以这么做:

jQuery代码

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val()); 
}); 

});

来源于:http://www.jb51.net/article/42816.htm

时间: 2024-08-22 11:02:18

jquery扩展 $.fn的相关文章

jQuery扩展$.fn、$.extend jQery命名方法扩展 练习总结

<script>$.fn.hello = function(){  //扩展jQuery实例的自定义方法,基于$.fn的jq方法扩展    this.click(function(){        alert('hello');    })}$('input').hello();  // 点击input正确出弹窗 'hello'</script> <script>$.fn.extend({  //用extend扩展jQuery实例的自定义方法    hello:fun

文本域光标操作(选、添、删、取)的jQuery扩展

; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-extend/ */ $.fn.extend({ /* * 获取光标所在位置 */ iGetFieldPos: function () { var field = this.get(0); if (document.selection) { //IE $(this).focus(); var sel = d

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

看完自己似乎理解了点东西,记录一下: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱

jQuery $.extend $.fn.extend

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="te

实现jQuery扩展总结

开发自己需要的jQuery插件,看个示例说明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title> new document </title><meta name="ge

JQuery中$.fn的用法示例

$.fn是指JQuery的命名空间,加上fn上的方法及属性,会对JQuery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对JQuery扩展了一个abc方法,那么后面的每一个JQuery实例都可以这么引用这个方法,如: $("#div").abc(); JQuery为开发插件提供了两个方法,分别是: JQuery.extend(object);为了扩展JQuery类本身,为类添加新的方法. JQuery.fn.extend(object);给JQuery对象添加

jQuery中$.fn

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQue

jQuery中$.fn的用法

原文:http://www.jb51.net/article/42816.htm $.fn是指jquery的命名空间,$.fn=$.prototype. 1.$.fn.extend 为jquery添加静态方法,与$.support,$.each类似 $.extend({ add:function(a,b){returna+b;} }); function nPlugin(){ } $.extend(nPlugin.prototype,{ add:function(a,b){returna+b;}

自定义jQuery扩展

项目中js往往会有些比较常用的函数,这时就可以把这些函数封装到一起.如果项目使用jQuery则可以封装成jQuery的扩展.jQuery扩展一般有两种方式,一种是对jQuery本身的扩展,一种是jQuery对象的扩展. jQuery本身的扩展即把函数封装在jQuery名称空间下,通过jQuery.funcName的形式调用.如:jQuery.ajax({param1:value1,param2,value2[,...]}); jQuery对象的扩展,即扩展到jQuery查找到DOM后的对象下,通