扩展DOM元素的功能

Question

如何选择DOM元素并将一系列操作链接到该元素，如下所示：

_my('#maindiv').move(100, 250).fadeOut(1000)

我意识到jQuery和其他许多库都可以完成上述操作，但是我有点茫然……

实际的实现不是必需的，只是选择和链接的基本框架。

Answer 1

您可以使用jQuery链接方法：

$('#maindiv')
    .css({left: 100, top: 250})
    .fadeOut(1000)
    .addClass('.foo')
    .toggleClass('.inactive', $(this).is(':checked'))
;

检查这些方法的内部，以了解如何进行链接。

通常，您会制作函数function _(selector)类的function _(selector) ，该function _(selector)会返回其内部包含所有新函数的选定元素对象。

function _(selector) {
    var obj = {
        el: document.getElementById(selector),
        css: function (attributes, values) {
            /* ... */

            return obj;
        },
        fadeOut: function (speed) {
            /* ... */

            return obj;
        }
    };

    return obj;
}