视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery为开发插件提拱了两个方法
2020-11-27 20:16:50 责编:小采
文档


jQuery为开发插件提拱了两个方法,分别是:

jQuery.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])
  • 用一个或多个其他对象来扩展一个对象,返回被扩展的对象

  • 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 );

    下载本文
    显示全文
    专题