jQuery(jquery ui,jquery plugins)插件笔记1

---恢复内容开始---

有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代码。现今,jQuery无 疑已成为最为流行没有之一的JavaScript类库。

  而jQuery UI 则是在jQuery 基础上开发的一套界面工具,几乎包括了网页上你所能想到和用到的插件以及动画特效,让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界 面。让你在做界面的时候随便‘拿来’就用,还有一点就是,它是免费开源的,用户可根据需要自定义甚至重新设计。

----------------------------------------------------------------------

在开始学习jquery插件开发之前,我们先来了解下jqeury各种关系:

----------------------------------------------------------------------

打开jquery官网,这里有api,有基于jquery开发的各种插件,严格的讲,jquery ui是jquery官方的界面插件,而这里的plugins大多数是民间的。

jQuery(jquery ui,jquery plugins)插件笔记1

 

api我们就不看了,如果英文不好,网上还有好多中文的jqueryapi,百度一下就可以,点击plugins,可以看到这里有很多的插件

jQuery(jquery ui,jquery plugins)插件笔记1

可以根据tags寻找我们想要的标签,我们在搜索框搜索blockUI

jQuery(jquery ui,jquery plugins)插件笔记1

这里有该插件的简单说明,作者,github地址等等

点开github链接,

jQuery(jquery ui,jquery plugins)插件笔记1

这个有关插件的更多介绍。

---------------------------------------------------

感谢:

jQuery插件开发全解析http://www.iteye.com/topic/545971

 

--------------------------------------------------------

JQuery插件的开发包括两种:

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

另一种是对象级别的插件开发,即给jquery对象添加方法,

 

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1 添加一个新的全局函数

添加一个全局函数,我们只需如下定义:

1.1 添加一个新的全局函数
1.2 增加多个全局函数

1.3使用jQuery.extend(object);

1.4 使用命名空间

虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。

jquery.demo.js

jQuery(jquery ui,jquery plugins)插件笔记1
;(function($) {

    // 1.1, add a global function
    $.foo = function() {
        alert(‘this is a test ,this is only a test for global function !‘);
    };

    // 1.2, add a global function with param
    $.fooWithParam = function(param) {
        alert(‘this global function takes a parameter, which is named: ‘ + param + ‘.‘);
    };

    // 1.3, define a global function with jQuery.extend(object), this method will add
    // object to global Object of jQuery
    $.extend({
        foo1 : function() {
            alert(‘this is a test ,this is only a test for global function !‘);
        },
        fooWithParam1 : function(param) {
            alert(‘this global function takes a parameter, which is named:  ‘ + param + ‘.‘);
        }
    });

    // 1.4, use nameSpace to avoid conflict
    $.myPlugin = {
        foo2 : function() {
            alert(‘this is a test ,this is only a test for global function !‘);
        },
        fooWithParam2 : function(param) {
            alert(‘this global function takes a parameter, which is named:  ‘ + param + ‘.‘);
        }
    };

})(jQuery);
jQuery(jquery ui,jquery plugins)插件笔记1

 

页面调用:

jQuery(jquery ui,jquery plugins)插件笔记1
$("#button").click(function() {
            //调用全局函数
            $.foo();
            $.fooWithParam(‘hello‘);

            $.foo1();
            $.fooWithParam1(‘andy‘);

            $.myPlugin.foo2();
            $.myPlugin.fooWithParam2(‘lily‘);
        });
jQuery(jquery ui,jquery plugins)插件笔记1

 

--------------------------------

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式:、

形式1:

jQuery(jquery ui,jquery plugins)插件笔记1
;
(function($) {
    $.fn.extend({
        pluginName : function(options, collback) {
            // out plugin implementation code goes here;
        }
    });

})(jQuery);
jQuery(jquery ui,jquery plugins)插件笔记1

形式2:

jQuery(jquery ui,jquery plugins)插件笔记1
;
(function($) {
    $.fn.pluginName = function(options, collback) {
        // out plugin implementation code goes here;
    };

})(jQuery);
jQuery(jquery ui,jquery plugins)插件笔记1

上面定义了一个jQuery函数,形式参数是$,函数定义完成以后将jQuery这个实际参数传递进去,立即调用执行,这样写的好处是,我们在写jQuery插件的时候,也可以使用$这个别名,而不会与prototype引起冲突。

这时候,插件可以这样调用:

$(‘#myDiv‘).pluginName();

 

3、总结

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

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

3.1 jQuery.fn.extend(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类的实例可以使用这个“成员函数”。

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

$.fn.extend({        

     alertWhileClick:function(){       

         $(this).click(function(){      

              alert($(this).val());       

          });       

      }       

});   

$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

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

3.2 jQuery.extend(object); 

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

$.extend({  

    add:function(a,b){return a+b;}  

});  

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,$.add(3,4); //return 7

 

 

jQuery(jquery ui,jquery plugins)插件笔记1,布布扣,bubuko.com

jQuery(jquery ui,jquery plugins)插件笔记1

上一篇:jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家


下一篇:001 win10下安装linux子系统--Ubuntu及其图形界面