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({})

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script>

     $.fn.clear = function(){

          $(this).html('');	//写法一

      }

	$.fn.extend({

          clear:function(){

             $(this).html('');	//写法二

          }

    })

    $(function(){

        $("#btn1").click(function(){

        	$("h1").clear();

        })

    })

</script>

</head>

<body>

<h1>我的第一个 JavaScript 程序</h1>

<input type="button" id="btn1" value="确定" />

</body>

</html>

二、$.extend();

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

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script>

     $.clear = function(obj){

          obj.html('');			//写法一

      }

	$.extend({

          clear:function(obj){

             obj.html('');		//写法二

          }

    })

    $(function(){

        $("#btn1").click(function(){

        	$.clear($("h1"));

        })

    })

</script>

</head>

<body>

<h1>我的第一个 JavaScript 程序</h1>

<input type="button" id="btn1" value="确定" />

</body>

</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. select 函数1

    Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect.accept.recv或recvfrom这样的阻塞程序( ...

  2. HTML 表格

    HTML 表格:表格由<table>标签来定义,行数由<tr>标签来定义,单元格由<td>标签来定义:<table border="1"& ...

  3. IE弹出窗口显示URL地址栏

    工具-->Internet 选项-->安全-->自定义级别-->允许网站打开没有地址栏或状态栏的窗口-->禁止

  4. 分析案例：应用服务器W3WP进程CPU持续超过百分之九十（Oracle客户端Bug）

    问题描述: 项目反馈应用负载的其中一台服务器业务操作的响应非常慢,登录该服务器发现W3WP进程CPU持续超过90%,哪怕在业务低峰期也是如此?远程查看后发现该应用服务器承载的请求确实很低,why??? ...

  5. ios 利用airprint实现无线打印（配合普通打印机）

    很多时候,我们不可能为了一个打印功能而去替换打印机,来支持无线打印. 找了很久,终于找到了一种解决方案,来适应大多数没有带wifi功能的打印机支持无线打印. 前提: 有wifi路由器:因为手机要打印, ...

  6. 一段关于测试和自定义Attribute的代码

    来自<西夏普入门经典> using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  7. php 函数汇总

    extract 从数组中将变量导入到当前的符号表 $arr['age'] = 30; $arr['name'] = 'bluesky'; $arr['sex'] = 'male'; var_dump( ...

  8. tokudb引擎磁盘空间不足导致写入失败的调查

    故障现象 2016.1.1号早上4点左右,zabbi数据库服务器报警,写入数据失败.登陆机器后检查发现磁盘空间使用95%没有用满,进去zabbix数据库,执行insert命令提示错误“errir 10 ...

  9. 【转】STM32中的抢占优先级、响应优先级概念

    STM32(Cortex-M3)中有两个优先级的概念--抢占式优先级和响应优先级,有人把响应优先级称作'亚优先级'或'副优先级',每个中断源都需要被指定这两种优先级. 具有高抢占式优先级的中断可以在具 ...

  10. git基本用法说明（原创+验证）

      关于文件状态   一般仓库中的文件可能存在于这4种状态: 1)Untracked files                     → 文件未被跟踪(A)  2)Untracked but no ...