JavaScript

Question

我正在尝试理解 Javascript 与 return DOM 元素的链接。我不知道该怎么做。

这是我的代码：

        (function () {
            function MyQuery(selector) {
                if (!(this instanceof MyQuery)) {
                    return new MyQuery(selector);
                }

                this.nodes = document.querySelectorAll(selector);

                for (var i = 0; i < this.nodes.length; i++) {
                    this.nodes[i] = this.nodes[i];
                }

            }

            MyQuery.fn = MyQuery.prototype = {
                parent: function () {
                    return this.nodes[0].parentNode;
                },
                color: function(setColor) {
                    this.nodes[0].style.color = setColor;
                    return this;
                }
            };

            window.myQuery = window.$ = MyQuery;

        })();

调用方式：

myQuery(".mySpan").parent(); 

// Returns .. <div>

myQuery(".mySpan").parent().color("red");

// TypeError: myQuery(...).parent(...).color is not a function

HTML:

    <div>
        This DIV has some content.
        <span class="mySpan">This is a span</span>
        more content here.
    </div>

我不确定为什么它会给我一个 TypeError，我有一个父节点，它是 div 我想做的就是设置颜色文本其中 div.

Answer 1

为了使可链接的方法可用，您必须 而不是 return DOM 元素，而是 MyQuery class有这个方法。

function MyQuery(selector) {
    if (!(this instanceof MyQuery)) {
        return new MyQuery(selector);
    }

    if (Array.isArray(selector)) {
        this.nodes = selector;
    } else {
        this.nodes = [];
        if (typeof selector == "string") {
            var nodes = document.querySelectorAll(selector);
            for (var i = 0; i < nodes.length; i++) {
                this.nodes[i] = nodes[i];
            }
        }
    }
}

MyQuery.prototype.parent = function () {
    return new MyQuery([this.nodes[0].parentNode]);
};
MyQuery.prototype.color = function(setColor) {
    this.nodes[0].style.color = setColor;
    return this;
};

JavaScript - 了解使用 return DOM 元素的方法链接

JavaScript - Understanding Method Chaining with return DOM elements

methods

prototype

method-chaining

chaining