zoukankan      html  css  js  c++  java
  • jQuery自定义插件

    总结:

    jQuery编写插件的两种方法

    1.添加jQuery对象级的插件,是给jQuery类添加方法

    写法:

    ;(function($){
    $.fn.extend({
    "函数名":function(自定义参数){
    //这里写插件代码
    }
    });
    })(jQuery);
    或者
    ;(function($){
    $.fn.函数名=function(自定义参数){
    //这里写插件代码
    }
    })(jQuery);
    调用方法:$("#id").函数名(参数);

    2.jQuery类级别的插件,相当于添加静态方法


    ;(function($){
    $.extend({
    "函数名":function(自定义参数){
    //这里写插件代码
    }
    });
    })(jQuery);
    或者
    ;(function($){
    $.函数名=function(自定义参数){
    //这里写插件代码
    }
    })(jQuery);
    调用方法:$.函数名(参数);

    jquery插件的种类:

    1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent()、appendTo()

    2.一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,jQuery的全局函数就是属于jQuery命 名空间的函数,封装全局函数的插件

    3.选择器插件

    jQuery插件机制

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

    jQuery.fn.extend(object); 给jQuery对象添加方法。

    jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法,可以理解为添加静态方法。

    这两个方法都接受一个参数,类型为Object,Object对应的"名/值对"分别代表"函数或方法体/函数主体"。

    fn 是什么东西呢?

    查看jQuery代码,就不难发现:

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

    原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然javascript没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如 我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

    jQuery.fn.extend(object), 对jQuery.prototype进行扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。即:$("#id").object();

    jQuery.extend()方法除了可以扩展jQuery对象外,还可以扩展已有的Object对象,经常被用于设置插件方法的一系列默认参数,可以很方便的用传入的参数来覆盖默认值

    jQuery.extend(object1,object2)object1默认参数值,object2传入的参数值;详细说明,请点击这里

    var settions ={validate:false,limit:5,name="foo"};
    var options ={validate:true,name="bar"};
    var newOptions=jQuery.extend(settings,options);
    结果为:
    newOptions = {validate:true,limit:5,name="bar"};

    function foo(options){
    options = jQuery.extend({
    name="bar",
    length:5,
    dataType="xml" /*默认参数*/
    },options /*options 为传递的参数*/
    );
    }


    如果用户调用foo()方法的时候,在传递的参数options对象中设置了相应的值,
    那么就使用设置的值,否则使用默认值,调用方法:

    foo({name:"a",length:4,dataType:"json"});
    foo({name:"a"});
    foo();

    编写jQuery插件

    封装jQuery对你方法的插件,首先需要在javaScript文件里搭好框架,代码如下:
    ;(function($){
    //这里写插件代码
    })(jQuery);


    1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent()、appendTo()

    由于是对jQuery对象的方法扩展,因此采用扩展第1类(封装对象方法)插件的方法jQuery.fn.extend()来编写
    ;(function($){
    $.fn.extend({
    "color":function(value){
    //这里写插件代码
    }
    });
    })(jQuery);
    或者
    ;(function($){
    $.fn.color=function(value){
    //这里写插件代码
    }
    })(jQuery);

    这里的方法提供一个参数value,如果调用方法时传入value,那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值
    ;(function($){
    $.fn.extend({
    "color":function(value){
    return this.css("color",value);
    }
    });
    })(jQuery);

    插件内部的this指向的是jQuery对象,而非普通的DOM对象。接下来注意的是,插件如果不需要返回字符串之类的特定值,应当使其具有可链接性。
    为此,直接返回这个this这个对象,由于css()方法也会返回调用它的对象,即此外的this,因此可以将代码写成上面的形式;


    调用时可直接写成:$("div").color("red");

    另外如果要定义一组插件,可以使用如下所示写法:

    ;(function($){
    $.fn.extend({
    "color":function(value){
    //这里写插件代码
    },
    "border":function(value){
    //这里写插件代码
    },
    "background":function(value){
    //这里写插件代码
    }
    });
    })(jQuery);

    2.封装全局函数的插件

    这类插件是在jQuery命名空间内部添加一个函数。这类插件很简单,只是普通的函数,没有特别需要注意的地方。

    例如新增两个函数,用于去除左侧和右侧的空格。

    首先构建一个Object对象,把函数名和函数都放进去,其中的名/值对分别为函数名和函数主体
    然后利用jQuery.extend()方法直接对jQuery对象进行扩展

    jQuery代码如下:
    ;(function($){
    $.extend({
    ltrim:function(text){
    return (text||"").replace(/^\s+g,"");
    },
    rtrim:function(text){
    return (text||"").replace(/\s+$/g,"");
    }
    });
    })(jQuery);
    或者
    ;(function($){
    $.ltrim=function(text){
    return (text||"").replace(/^\s+g,"");
    },
    $.rtrim=function(text){
    return (text||"").replace(/\s+$/g,"");
    }

    })(jQuery);

    *(text||"")部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态,如果text是undeined,则返回字符串"",否则返回字符串text。
    这个处理是为了保证接下来的字符串替换方法replace()方法不会出错

    *运用了正则表达式替换首末的空格

    调用函数:

    $("trimTest").val(
    jQuery.trim(" test ")+"\n"+
    jQuery.ltrim(" test ")+"\n"+
    jQuery.rtrim(" test ")
    );

    运行代码后,文本框中第一行字符串左右两侧的空格都被删除。
    第二行的字符串只有左侧的空格被删除。
    第三行的字符串只有右侧的空格被删除。

    3.自定义选择器

    待。。。。
    ————————————————
    版权声明:本文为CSDN博主「夜舞倾城」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/bao19901210/article/details/21540137

    一份耕耘,一份收获,付出就有回报永不遭遇过失败,因我所碰到的都是暂时的挫折
  • 相关阅读:
    SharePoint 2010 User Profile Sync Service自动停止
    如何区别多个svchost.exe?
    Log Parser分析IIS log的一个简单例子
    Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached.
    Windows中右键点击文件夹, 结果找不到共享选项卡, 怎么办?
    介绍SOS中的SaveModule命令
    SharePoint中Draft版本的文档不会收到document added的Alert Email
    和我一起学Windows Workflow Foundation(1)创建和调试一个WF实例
    门户网站
    C#基础—— check、lock、using语句归纳
  • 原文地址:https://www.cnblogs.com/raincedar/p/15696452.html
Copyright © 2011-2022 走看看