javascript - Jquery 从简单的普通 javascript 演变而来

Question

我已经使用 jquery 一段时间了，但我对 jquery 唯一了解的可能是十几个可以完成我的工作的函数。但我想了解 jquery 是如何从简单的普通 javascript 演变而来的，即如何

$("#xyz").val();

转换为

document.getElementById('xyz').value;

我在网上搜索了我的答案，但大多数作者都很乐意向您展示如何使用 jquery、选择器详细信息等连接到不同的 DOM 元素，但没有找到关于实际如何进行转换的信息。任何人都可以向我推荐一些教程，在那里我可以获得所需的 Material 吗？
谢谢

Answer 1

jQuery 不是编译器。 jQuery 不会被编译成 javascript。

.val 是对象的方法。 jQuery 对象。

具体是

function (value) {
    if (!arguments.length) {
        var elem = this[0];

        if (elem) {
            if (jQuery.nodeName(elem, "option")) {
                // attributes.value is undefined in Blackberry 4.7 but
                // uses .value. See #6932
                var val = elem.attributes.value;
                return !val || val.specified ? elem.value : elem.text;
            }

            // We need to handle select boxes special
            if (jQuery.nodeName(elem, "select")) {
                var index = elem.selectedIndex,
                    values = [],
                    options = elem.options,
                    one = elem.type === "select-one";

                // Nothing was selected
                if (index < 0) {
                    return null;
                }

                // Loop through all the selected options
                for (var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++) {
                    var option = options[i];

                    // Don't return options that are disabled or in a disabled optgroup
                    if (option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) && (!option.parentNode.disabled || !jQuery.nodeName(option.parentNode, "optgroup"))) {

                        // Get the specific value for the option
                        value = jQuery(option).val();

                        // We don't need an array for one selects
                        if (one) {
                            return value;
                        }

                        // Multi-Selects return an array
                        values.push(value);
                    }
                }

                return values;
            }

            // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified
            if (rradiocheck.test(elem.type) && !jQuery.support.checkOn) {
                return elem.getAttribute("value") === null ? "on" : elem.value;
            }

            // Everything else, we just grab the value
            return (elem.value || "").replace(rreturn, "");

        }

        return undefined;
    }

    var isFunction = jQuery.isFunction(value);

    return this.each(function (i) {
        var self = jQuery(this),
            val = value;

        if (this.nodeType !== 1) {
            return;
        }

        if (isFunction) {
            val = value.call(this, i, self.val());
        }

        // Treat null/undefined as ""; convert numbers to string
        if (val == null) {
            val = "";
        } else if (typeof val === "number") {
            val += "";
        } else if (jQuery.isArray(val)) {
            val = jQuery.map(val, function (value) {
                return value == null ? "" : value + "";
            });
        }

        if (jQuery.isArray(val) && rradiocheck.test(this.type)) {
            this.checked = jQuery.inArray(self.val(), val) >= 0;

        } else if (jQuery.nodeName(this, "select")) {
            var values = jQuery.makeArray(val);

            jQuery("option", this).each(function () {
                this.selected = jQuery.inArray(jQuery(this).val(), values) >= 0;
            });

            if (!values.length) {
                this.selectedIndex = -1;
            }

        } else {
            this.value = val;
        }
    });
}

如果我们把上面的墙拆掉，我们就能得到

function (value) {
    if (arguments.length === 0) {
         return (this[0].value || "")
    }
    this.value = val;
    return this;
}

当然，jQuery 有更多的代码来处理各种边缘情况和特殊的事情。

本质上 jQuery 需要一个选择器。找到元素。在内部存储它们然后返回一个对象。

该对象具有各种方法，允许您改变内部存储的底层 dom 对象。 .val 就是其中之一。