$.extend、$.fn.extend

$.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()

 

posted @ 2019-04-16 17:38  WhatAreWords  阅读(172)  评论(0编辑  收藏  举报