jQuery插件

时间:2020-01-09 10:47:15  来源:igfitidea点击:

可以为JQuery实现插件。插件是函数的独立单元,可以在应用程序之间重用。例如,一个插件可能只有一个函数,或者由多个函数和对象(数据)组成。

JQuery包含大量插件,我们可以下载和使用。我们可以在此处找到列表:

http://plugins.jquery.com/

在本文中,我将向我们展示如何编写自己的插件。

插件JavaScript文件

我们所有的插件JavaScript代码都应包含在一个独立的文件中。包含JQuery JavaScript文件后,应包含此文件。例如:

<script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

<script type="text/javascript"
     src="/jQuery.myJQueryPlugin.js"&gt
</script>

单函数插件

如果插件可以包含在单个JavaScript函数中,则可以创建一个函数插件。这是操作方式:

jQuery.myPlugin = function() {
    alert("Hello World, plugin");
}

我们现在可以直接在JQuery对象上调用该函数,如下所示:

jQuery.myPlugin();

或者通过使用$对象(jQuery对象的快捷方式),如下所示:

$.myPlugin();

多函数插件

如果需要在插件中将多个函数组合在一起,则可以通过将它们添加到JavaScript对象,然后在JQuery对象上设置该JavaScript对象来实现。看起来是这样的:

jQuery.myPlugin2 = {

    function1 : function() {
        alert("function1");
    }
    ,
    function2 : function() {
        alert("function2");
    }
};

我们现在可以在插件中调用这两个函数,如下所示:

jQuery.myPlugin2.function1();
jQuery.myPlugin2.function2();

或者,我们可以使用$快捷方式对象,如下所示:

$.myPlugin2.function1();
$.myPlugin2.function2();

处理选择

如果插件需要修改JQuery选择(一组选定的HTML元素),则必须使用略有不同的方法。我们必须将函数添加到jQuery对象的fn对象中。这是一个例子:

jQuery.fn.modify = function() {
    this.each(function() {
       $(this).css("background-color", "#ff00ff");
    });

    return this;
}

要调用此函数,应编写以下代码:

$("h2").modify();

首先,所有" h2"元素都被选中。然后在选定的元素上调用modify()函数。

注意如何将modify()函数添加到jQuery对象的fn对象中。为了能够处理JQuery选择,这是必需的。

还要注意在modify()函数内部的this上如何调用each()函数。这样做的原因是,一个JQuery选择可以包含多个元素。因此,要将函数的效果应用到选择中的所有元素,必须迭代选择并将效果应用到每个元素。

还有一点要注意的是,在modify()函数中名为this的引用是指所选元素的集合。但是,在" each()"函数内部," this"引用指向要迭代的当前元素。因此,这两个" this"引用没有指向相同的对象。

最后,请注意modify()函数如何返回this。这意味着modify()返回选择的元素。如果我们想在modify()函数调用之后链接JQuery调用,这将很方便。这是一个例子:

$("h2").modify().attr("align", "left");

由于JQuery用户习惯于能够像这样链接方法调用,因此使插件表现出用户期望的行为是一个好主意。

子选择器插件

我们还可以为JQuery创建自定义选择器插件。定制选择器插件是用于过滤选定元素的选择器。我们添加一个选择器插件,如下所示:

jQuery.extend(jQuery.expr[':'], {

   'align' : function(element, index, matches, set) {
        // return true or false
   }

});

jQuery.extend函数的第一个参数jQuery.expr [':']告诉extend方法,该选择器以冒号作为前缀。冒号是选择器插件的常用前缀。

jQuery.extend函数的第二个参数是一个JavaScript对象,具有一个称为align的属性。此属性的名称是子选择器的名称。此属性的值是一个筛选器函数,将为每个选定的元素调用该函数。如果子选择器函数确定元素应包含在最终选择集中,则该函数应返回true。如果不是,则该函数应返回false。

在查看该函数的实现之前,让我们看一下如何使用上述子选择器:

$("h2:align(right)");

在此示例中,选择器表达式选择页面中的所有" h2"元素,然后将每个元素传递给传递给" jQuery.extend()"函数的JavaScript对象的" align"属性中设置的函数,如图所示在前面的代码示例中。如果函数返回true,则特定元素将保留在选择集中。如果函数返回false,则将元素从选择集中排除。

现在让我们看一下filter函数的实现:

jQuery.extend(jQuery.expr[':'], {

   'align' : function(element, index, matches, set) {
    
        if( jQuery(element).attr("align") == matches[3] ) {
        return true;
        }

        return false;
    
   }

});

该过滤器函数包括所有具有align属性的元素,这些属性与作为参数传递给选择表达式中的子选择器的值相匹配。在前面显示的用法示例(h2:align(right))中,过滤器函数将包括所有具有align属性且值为right的元素。

传递给过滤器函数的" element"参数是选定的元素,该函数应确定是否将其包括在选择集中。

index参数包含选择集中元素的索引。

matches参数是一个数组,其中包含用于解析包含子选择器的选择器表达式的正则表达式的结果。数组的matchs [3]元素包含传递给子选择器的参数(如果有)。在上面的示例中(h2:align(right)),matches [3]将包含值right

传递给过滤器函数的set参数包含在此函数调用之前匹配的完整元素集。也就是说,与选择器的第一部分匹配的元素集。在此特定过滤器函数调用之前,它不是过滤器函数接受的一组元素。

插件代码约定

插件应遵守一组约定,JQuery插件的用户会习惯于这些约定。我会在这里通过他们。

插件不能假定它可以使用$函数。在某些应用程序中,$用于JQuery以外的其他JavaScript函数。因此,插件应始终调用jQuery函数,而不要使用$()函数。这两个函数的行为完全相同,因此这没有问题。这只是一件事要记住。

插件JavaScript文件应使用模式命名

jquery.pluginName.js

其中," pluginName"是插件的名称。

方法定义应以分号(;)结尾,因此插件即使在JavaScript压缩下也可以正常工作。

插件函数的参数应具有合理的默认值,以防插件用户未提供这些参数。