javascript代码实例教程-Jquery 插件入门

发布时间:2019-02-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery 插件入门脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 网上一搜各种插件,什么文件上传,图片浏览 ,Autocomplete等

 

这些插件,代码,新手看起来是很力的,当然我也是新手,我开始改Autocomplete这个插件一点点,却真不知道如何开始,后面就用Firefox的firedebug慢慢看。

 

我也不是专门做前端的,但是总得了解,基本的使用还是得会。

 

 

 

今天,来总结下,最近看的插件的基础知识,这里算个入门,希望能帮到新手党们。

 

下面是2个非常重要的扩展函数。

 

.extend and.fn.extend

 

$.extend(object) 可以理解为jquery 添加一个静态方法。

 

$.fn.extend(object) 可以理解为JQuery实例添加一个方法。

 

基本的定义与调用:

 

复制代码

/* $.extend 定义与调用

 */

$.extend({ fun1: function () { alert("执行方法一"); } });

$.fun1();

/*  $.fn.extend 定义与调用

 */

$.fn.extend({ fun2: function () { alert("执行方法2"); } });

$(this).fun2();

//等同于

$.fn.fun3 = function () { alert("执行方法三"); }

$(this).fun3();

复制代码

  $.extend(target, [object1], [objectN]) 还有个用法,就是合并到第一个object.

 

该方法主要用于合并两个或更多对象的内容(属性)到第一个对象,并返回合并后的第一对象。如果该方法只有一个参数target,则该参数将扩展jQuery的命名空间,即作为静态方法挂在jQuery全局对象下,如jQuery里的$.ajax、$.getJSON全局函数等,如前面看到的:

 

值得注意的是:多个对象参数合并时,会破坏第一个对象的结构,所以可传递一个空对象作为第一个参数,如:$.extend({}, object1, object2);

 

 VAR options = $.extend({},defaults, options);

 

 

上面代码就是合并到{}中,然后赋值到options。这个在写插件的时候经常使用,用户可以自己定义某些属性,

 

插件一般也会定义默认属性,调用上面方法后,如果自定义属性,这使用新属性,否则,则使用默认属性,这个是非常有用的。

 

 

 

$.fn.extend(target)

 

在jQuery中,.fn本质上是等于jQuery的原型,即.fn = $.PRototyPE, 所以该方法实际上是为jQuery原型添加方法,即把target对象的方法添加到jQuery原型中去,这样jquery对象实例就可以访问添加的方法了,这也是jQuery插件开发常用的方法,特别是添加多个接口时。如:

 

// 将hello、hello2方法添加到jquery原型中

$.fn.extend({ 

    hello: function() {alert("hello!");},

    hello2: function() {alert("hello again!);}

});

看看Autocomplete插件使用的该方法。

 

 

$.fn.extend({

    autocomplete: function(urlOrData, options) {

        var isUrl = typeof urlOrData == "string";

        options = $.extend({}, $.Autocompleter.defaults, {

            url: isUrl ? urlOrData : null,

            data: isUrl ? null : urlOrData,

            delay: isUrl ? $.Autocompleter.defaults.delay : 10

            max: options && !options.scroll ? 1000 : 15000

        }, options);

        

        // if highlight is set to false, replace IT with a do-nothing function

        options.highlight = options.highlight || function(value) { return value; };

        

        // if the formatMatch option is not specified, then use formatItem for backwards compatibility

        options.formatMatch = options.formatMatch || options.formatItem;

        

        return this.each(function() {

            new $.Autocompleter(this, options);

        });

    },

    result: function(handler) {

        return this.bind("result", handler);

    },

    seArch: function(handler) {

        return this.trigger("search", [handler]);

    },

    flushCache: function() {

        return this.trigger("flushCache");

    },

    setOptions: function(options){

        return this.trigger("setOptions", [options]);

    },

    unautocomplete: function() {

        return this.trigger("unautocomplete");

    }

});

 

看不懂?没关系,下面马来接上。

 

 

 

如果添加单个方法到jQuery原型中,可使用$.fn.pluginName方法添加,如:

 

// 将hello方法添加到jquery原型中

$.fn.hello = function() {

    // ...            

};

  

 

 

 

插件通用模板(单个方法):

 

插件有自己的基本格式:

 

 

;(function($){

    $.fn.yourName = function(options){

        //各种属性、参数

        }

        var options = $.extend(defaults, options);

        return this.each(function(){

        //插件实现代码

        });

    };

})(jQuery);

 

 上面代码的最前面有一个分号,这是为了止多个脚本文件合并时,其他脚本的结尾语句没有添加分号,造成运行时错误。

 

 

 

1、把全部代码放在闭包(一个即时执行函数)里

 

此时闭包相当于一个私有作用域,外部无法访问到内部的信息,并且不会存在全局变量的污染情况。官方创建开发规范的解释是:

 

a) 避免全局依赖;

 

b) 避免第三方破坏;

 

c) 兼容jQuery操作符'$'和'jQuery '。

 

如下所示:

 

(function($) {

    // 局部作用域中使用$来引用jQuery

    // ...

})(jQuery);

 

 

这段代码在被解析时可理解成以下代码:

 

var jQ = function($) {

  // code goes here

}; 

jQ(jQuery);

 

 

新手如果无法理解,你知道,这是官方标准就ok。

 

 

 

下面是这个美化表格的例子,实现原理倒是简单,无非就是找到表格的奇偶行,然后添加不同的class,活动行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再去掉这个class即可。

 

 

 

查看这个链接能看到详细,你可以查看具体看看,写的不错,特别是步骤很清晰。

 

 

 

好,基本框架晓得了,下面就是填充具体内容了。

 

复制代码

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"            

        }

        var options = $.extend({},defaults, options);

        this.each(function(){

            //实现代码

        });

    };

})(jQuery);

 

 

 

重复一句:

 

var options = $.extend({},defaults, options);

其实就是合并多个对象为一个。这里就是,如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。想进一步了解的朋友,可以参考jquery的官方文档: http://api.jquery.COM/jQuery.extend/

 

 

 

其实,这里定义默认 var defaults是不规则的写法,

 

规则该是这样

 

 

$.fn.TableUI.defaults={    

  evenRowCass: "evenRow", 

  oddRowClass: "oddRow",

  activeRowClass: "activeRow"

};

 

options = $.extend({},$.fn.TableUI.defaults,options);

  

 

好了,直接看全部代码:

 

 

//这里最好写上相关描述,如时间,作者,主要用于干什么

/*

 * tableUI 0.1

 * Copyright (c) 2009 JustinYoung  http://justinyoung.cnblogs.com/

 * Date: 2010-03-30

 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示

 */

 

;(function($){

    $.fn.tableUI = function(options){

  $.fn.TableUI.defaults={ 

    evenRowCass: "evenRow", 

    oddRowClass: "oddRow",

    activeRowClass: "activeRow"

  };

 

       var options = $.extend({}, $.fn.TableUI.defaults, options); //合并

        return this.each(function(){

            var thisTable=$(this);

            //添加奇偶行颜色

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

            //添加活动行颜色

            $(thisTable).find("tr").bind(";mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);

 

 

下面是调用代码。

 

 

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="Scripts/TableUI.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".table_solid").TableUI({ evenRowCass: "eventRow", oddRowClass: "oddRowClass", activeRowClass: "activeRow" }); //这里是输入新的参数,不使用默认参数。插件代码会自动覆盖。

        })

    </script>

    <style type="text/css">

        body

        {

            font-family: 'Verdana' , '宋体';

            font-Size: 12px;

        }

        .eventRow

        {

            background-color: #f0f0ff;

        }

        .activeRow

        {

            background-color: #FFFF55;

        }

        .oddRowClass

        {

            background-color: red;

        }

    </style>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery 插件入门全部内容,希望文章能够帮你解决javascript代码实例教程-Jquery 插件入门所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。