jQuery.fn如何扩展。

jQuery插件 $.fn(object)与$.extend(object)

jQuery提供了两个方法帮助开发插件

  • $.extend(object);扩展jQuery类本身；
  • $.fn.extend(object);扩展jQuery对象；

一、$.fn

$.fn 等于 $.prototype；这样就好理解了，就好比对String.porotype增加一个函数，然后所有的字符串对象都能够直接调用，
jQuery也是如果。给jQuery增加一个函数，然后所有的jQuery对象都能够调用。jQuery对象就是$("#id")或

$(document.getElementById("Id"))这些;
在写法上可以
$.fn或$.fn.extend({})

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  5. <script>
  6.  
  7.      $.fn.clear = function(){
  8.           $(this).html('');	//写法一
  9.       }
  10.  
  11. 	$.fn.extend({
  12.           clear:function(){
  13.              $(this).html('');	//写法二
  14.           }
  15.     })
  16.  
  17.     $(function(){
  18.         $("#btn1").click(function(){
  19.         	$("h1").clear();
  20.         })
  21.  
  22.     })
  23. </script>
  24. </head>
  25. <body>
  26.  
  27. <h1>我的第一个 JavaScript 程序</h1>
  28. <input type="button" id="btn1" value="确定" />
  29. </body>
  30. </html>

二、$.extend();

我们知道$就是jQuery对象。所以
$.extend其实就是扩展"jQuery"这个对象本身的函数。实际上相当于你创建了一个object对象,然后object.abc = function(){}

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  5. <script>
  6.      $.clear = function(obj){
  7.           obj.html('');			//写法一
  8.       }
  9.  
  10. 	$.extend({
  11.           clear:function(obj){
  12.              obj.html('');		//写法二
  13.           }
  14.     })
  15.  
  16.     $(function(){
  17.         $("#btn1").click(function(){
  18.         	$.clear($("h1"));
  19.         })
  20.     })
  21. </script>
  22. </head>
  23. <body>
  24.  
  25. <h1>我的第一个 JavaScript 程序</h1>
  26. <input type="button" id="btn1" value="确定" />
  27. </body>
  28. </html>

jQuery.fn.extend() 与 jQuery.extend()的更多相关文章

  1. jQuery源码-jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...

  2. jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr与jQuery.fn.prop jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$ ...

  3. jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

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

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方 ...

  5. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  6. jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  7. jQuery.fn.extend()

    jQuery.fn.extend() extend()方法是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法.jQuery构造 ...

  8. jQuery.extend()、jQuery.fn.extend()扩展方法具体解释

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dreamsunday/article/details/25193459 jQuery自己定义了jQu ...

  9. jQuery中jQuery.extend() 和 jQuery.fn.extend()的功能和区别

    昨天下午和今天上午断断续续的一直在看jQuery中jQuery.extend() 和 jQuery.fn.extend()两个函数的功能及区别,现在自认为是掌握的差不多了.好记性不如烂笔头,这里一方面 ...

  10. 记jQuery.fn.show的一次踩坑和问题排查

    最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...

随机推荐

  1. IOS 关键字self,super，copy, retain, assign , readonly , readwrite, nonatomic、 @synthesize、@property、@dynamic

    IOS 关键字self,super,copy, retain, assign , readonly , readwrite, nonatomic.                     @synth ...

  2. WCF初体验(C#操作Exchange)

    最近再做一个Exchange的客户端维护工具,遇到了很多问题. 由于刚接触C#和Exchange,所以还需要继续学习.在此记录一下,只是一个新手的记录. 环境:         服务器:Exchang ...

  3. vm centos 网络配置

    安装Centos系统,查看网络配置. 输入命令:ifconfig 127.0.0.1 要开启网络 进入ifcfg-eth0文件. 输入命令:vi /etc/sysconfig/network-scri ...

  4. SQLServer 数据库查看死锁、堵塞的SQL语句

    http://www.cnblogs.com/zhuque/archive/2012/11/08/2763343.html 死锁和堵塞一直是性能测试执行中关注的重点. 下面是我整理的监控sql ser ...

  5. java web的开发 知识要点

    近期闲下来时写的一个有关 java web的开发 的 常用架构 的总结,用于初 学 者或团队新人培训. Java开发初步.ppt SSH  为 struts+spring+hibernate 的一个集 ...

  6. Gridview 分多页时导出excel的解决方案

    在开发会遇到将gridview中的数据导入到excel 这样的需求,当girdview有多页数据时按照一般的方式导出的数据只可能是当前页的数据,后几页的数据还在数据库内,没有呈现到页面上,传统的方式是 ...

  7. 【python】获取指定网页上的所有超级链接

    # -*- coding: utf-8 -*- import urllib2 import re #connect to a URL website = urllib2.urlopen("h ...

  8. TRIGGER_15.8.3BACKUP

    1 CREATE OR REPLACE TRIGGER "XMV502"."ADDAREA12" before insert on bd_areacl for ...

  9. c#操作Excel

    Excel是微软公司办公自动化套件中的一个软件,他主要是用来处理电子表格.Excel以其功能强大,界面友好等受到了许多用户的欢迎.在设计应用系统时,对于不同的用户,他们对于打印的需求是不一样的,如果要 ...

  10. 数据挖掘之决策树ID3算法（C#实现）

    决策树是一种非常经典的分类器,它的作用原理有点类似于我们玩的猜谜游戏.比如猜一个动物: 问:这个动物是陆生动物吗? 答:是的. 问:这个动物有鳃吗? 答:没有. 这样的两个问题顺序就有些颠倒,因为一般 ...