Question

我经常在jQuery中看到这段代码。

$('div').action1().delay(miliseconds).action2();

我可以在以下代码中的一个级别操作中实现它。

function $(id) {
   var $ =  document.getElementById(id);

   $.action1 = function() {

   };

  return $;

}

如何编写方法delay()和action2()以便我可以这样使用它们？

$('div').action1().delay(miliseconds).action2();

Answer 1

你所指的是链接。除了延迟用于动画之外，要记住的关键点是从函数中返回this。

如果您想了解具体的jQuery函数的工作原理，请查看removeClass的代码：

removeClass: function( value ) {
    if ( jQuery.isFunction(value) ) {
        return this.each(function(i) {
            var self = jQuery(this);
            self.removeClass( value.call(this, i, self.attr("class")) );
        });
    }

    if ( (value && typeof value === "string") || value === undefined ) {
        var classNames = (value || "").split(rspace);

        for ( var i = 0, l = this.length; i < l; i++ ) {
            var elem = this[i];

            if ( elem.nodeType === 1 && elem.className ) {
                if ( value ) {
                    var className = (" " + elem.className + " ").replace(rclass, " ");
                    for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
                        className = className.replace(" " + classNames[c] + " ", " ");
                    }
                    elem.className = jQuery.trim( className );

                } else {
                    elem.className = "";
                }
            }
        }
    }

    return this;
},

注意最后的return this;？这允许你调用$('#myelement').removeClass('highlight').someOtherFunction()，因为在removeClass的末尾，你仍然在jQuery对象本身上运行。

如果你想检查其他功能，请查看jQuery的开发版本（未经宣传）：http://code.jquery.com/jquery-1.4.2.js

编辑：为了更完整地回答你的问题，你可以编写你的函数以允许以下列方式链接（包括在你的jQuery包括之后）：

(function($){
    $.fn.extend({
        action1: function() { return this; },
        action2: function() { return this; }
    })(jQuery);

这实质上是创建自己的插件。你可以在网上找到很多关于如何操作的教程，或者打开你已经看过的插件。

以下是一个简单的教程：http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Edit2：在创建jQuery插件时没有太深入了（因为你的问题一般是关于javascript），我只是想提一下，如果你正在做一个jQuery插件，你会想做：
return this.each(function() {});
所以你的函数对选择器选择的所有元素执行。

Answer 2

.delay()用于制作动画

当然还有其他方法可以做到这一点，但jQuery可以以一种很棒的方式链接。也就是说，如果您不想，则不必编写一堆匿名函数或自定义回调函数。 链接方便！

另一方面，如果你真的想自定义动画的回调，你可以！

$('#foo').slideDown(500, function(){
  alert('foo is visible now!');
});

查看jQuery Effects API了解详情。

查看JavaScript的本地setTimeout()函数可能会有所帮助。

如何在调用另一个方法后调用js对象的方法？

2 个答案: