原文链接:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

Query.fn.extend();

jQuery.extend();

jQuery.fn

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

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

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

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

jQuery.extend(object)

为jQuery类添加类方法,可以理解为添加静态方法。如:

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2
jQuery.max(4,5); //  5

Objectj Query.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象

//code from http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery
.extend(settings, options);
结果:settings == { validate: true, limit: 5, name: "bar" }

jQuery.fn.extend(object);

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

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

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为:    

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

jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去,这样的话就是插件机制了。

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

来源:前端开发博客

随机推荐

  1. java 多线程 day04 线程通信

    package com.czbk.thread; /** * Created by chengtao on 17/12/3. * 需求: 子线程先运行10次,然后主线程运行 100次,依次运行50次 ...

  2. python代码结构

    1. 使用#单行注释,使用'''...'''多行注释 2. 使用连接符\来把一行过长的代码分为多行 3. 用缩进来控制代码块,推荐使用PEP8缩进风格,即四个空格 4. if ...: elif... ...

  3. Keras实践:实现非线性回归

    Keras实践:实现非线性回归 代码 import os os.environ["KMP_DUPLICATE_LIB_OK"]="TRUE" import ke ...

  4. LeetCode:组合总数II【40】

    LeetCode:组合总数II[40] 题目描述 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candi ...

  5. linq中将int类型转换为string类型,toString()报错

    今天同事在调试程序的时候,报了一个不寻常的错误, “LINQ to Entities 不识别方法"System.String ToString()",因此该方法无法转换为存储表达式 ...

  6. 与进程相关的命令ps、kill

    一.概述 Ubuntu中主要有如下操作进程的命令 二.进程查看命令 ps 2.1 ps –l PPID:父进程的 PID PID:进程的PID S:进程状态,S:是指sleep睡眠状态:T:是挂起状态 ...

  7. js防抖

    那我们设置个 options 作为第三个参数,然后根据传的值判断到底哪种效果,我们约定: leading:false 表示禁用第一次执行trailing: false 表示禁用停止触发的回调 我们来改 ...

  8. 【Flask】Flask-Migrate基本使用

    # flask_migrate笔记:在实际的开发环境中,经常会发生数据库修改的行为.一般我们修改数据库不会直接手动的去修改,而是去修改ORM对应的模型,然后再把模型映射到数据库中.这时候如果有一个工具 ...

  9. apache php 60 503

    服务器端:apache php 文件上传,60秒后,返回Response 503 php-fpm.conf: request_terminate_timeout = 600 前算万算没想到这里还有个超 ...

  10. Docker在渗透中的应用

    起因 环境因素影响,我他么路由器映射端口 msf就是反弹不回来session,在跟大牛交流后,大牛说服务器装个kali就行了,我以为是叫idc那边直接安装,但是因为这个系统特殊,很多 idc不允许安装 ...