$.extend

1、扩展jQuery静态方法.

$.extend({
  myFun:function(){alert('test函数')}
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
}); $.myFun();
$.min(2,3); // 2
$.max(4,5); // 5

2、合并多个对象.

var newcss = jquery.extend(css1,css2)  //newcss就是合并的新对象。
var newcss = jquery.extend({},css1,css2) //newcss就是合并的新对象.而且没有破坏css1的结构。 //用法: jQuery.extend(obj1,obj2,obj3, ..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果: Css1 = {size: "12px",style: "oblique",weight: "bolder"}

3、深度镶套对象

新的extend()允许你更深度的合并镶套对象

// 以前的 .extend()
jQuery.extend(
  { name: “John”, location: { city: “Boston” } }, { last: “Resig”, location: { state: “MA” } }
);
//结果:{ name: “John”, last: “Resig”, location: { state: “MA” } }

// 新的更深入的 .extend()
jQuery.extend(
  true,
  { name: “John”, location: { city: “Boston”, country:”USA”} },
  { last: “Smith”, location: { state: “MA”, country:”china”} }
);
//结果 { name:“John”, last:“Smith”, location:{city:“Boston”, state:“MA”, country:”china” }}

$.fn.extend(object);

$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//.... 

};

原来 jQuery.fn = jQuery.prototype.

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

比如要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容

$.fn.extend({
doAlertWhileClick:function() {
$(this).click(function(){
 alert($(this).val());
});
}
});
$("#input1").doAlertWhileClick(); // 页面上为: //$("#input1") 为一个jQuery实例,当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

区别:

1、两者调用方式不同:

jQuery.extend()一般由传入的全局函数来调用,主要用来拓展全局函数,如$.init()、$.ajax();

jQuery.fn.extend()一般由具体的实例对象来调用,可用来拓展个选择器,例如$.fn.each();

2、两者的主要功能作用不同:

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

3、大部分插件都是用jQuery.fn.extend()

 

随机推荐

  1. java类的主动使用/被动使用

    对类的使用方式分为:主动使用.被动使用 所有的java虚拟机实现必须在每个类或接口被java程序"首次主动使用"时才初始化他们 ps:被动使用不会初始化类,但是有可能会加载类(JV ...

  2. Ubuntu和UOS+mips64l龙芯处理器安装编译Openssl

    1.下载openssl开发包文件,我这里下载的是openssl-1.1.1f.tar.gz:并放在/data/home/dengchaoqun/openssl1.1.1目录下 2.终端切换到当前目录下 ...

  3. mysql The used table type doesn’t support FULLTEXT indexes 解决方案 (phpstudy 会出现),coten不会

    mysql The used table type doesn't support FULLTEXT indexes 是不支持全文索引,解决方案: 1.停掉mysql服务2.打开my.ini,搜索de ...

  4. PyCharm 2019、2020、2021专业版激活

    PyCharm下载地址:https://www.jetbrains.com/pycharm/download/ PyCharm社区版功能基本够用,但是作为傲娇的程序员,咱都是上来就专业版,然后各种破解 ...

  5. String、StringBuffer 和 StringBuilder 的区别

    面试简答 区别: 1) String 长度大小不可变 2) StringBuffer 和 StringBuilder 长度可变 3) StringBuffer 线程安全 StringBuilder 线 ...

  6. NOIP初赛篇——10计算机网络

    网络的定义 ​ 所谓计算机网络,就是利用通信线路和设备,把分布在不同地理位置上的多台计算机连接起来. ​ 计算机网络是现代通信技术与计算机奇数结合的产物. ​ 网络中计算机与计算机之间的通信依靠协议进 ...

  7. HP PROLIANT DL388 GEN10 (故障3019)SPP损坏

    HP PROLIANT DL388 GEN10 (故障3019)SPP损坏 1. 开机硬件自检,提示错误ERROR 3019: 2. 根据服务器版本GEN10下载最新固件SPP,可找服务商或者HP售后 ...

  8. LeetCode 二分查找模板 II

    模板 #2: int binarySearch(vector<int>& nums, int target){ if(nums.size() == 0) return -1; in ...

  9. shell 脚本安装Tomcat和java

    脚本安装Tomcat和java#!/bin/bash##SCRIPT:install_jdk-8u181-linux-x64_apache-tomcat-8.0.53#AUTHOR:Shinyinfo ...

  10. Netty入门一:服务端应用搭建 & 启动过程源码分析

    最近周末也没啥事就学学Netty,同时打算写一些博客记录一下(写的过程理解更加深刻了) 本文主要从三个方法来呈现:Netty核心组件简介.Netty服务端创建.Netty启动过程源码分析 如果你对Ne ...