Question

我一直在使用jquery一段时间，但我唯一知道的关于jquery的东西可能就是我完成工作的十几个函数。但我想了解jquery是如何从简单的普通javascript进化而来的，即如何

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

转换为

document.getElementById('xyz').value;

我已经在网上搜索了我的答案，但是大多数作者都很高兴地展示了如何使用jquery，选择器细节等来连接不同的DOM元素，但是没有找到关于如何实现转换的内容。任何人都可以向我推荐一些我可以获得所需材料的教程吗？感谢

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就是其中之一。

Answer 2

有很多关于jQuery如何工作的文章（也有screencasts）。

正如您所注意到的，jQuery基本上是一组在元素数组上运行的方法。它还旨在规范浏览器差异。

采用基本用法$("#xyz").val();

我甚至可以告诉你jQuery在幕后做了什么，但我认为你真的不想知道。：）

var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

// ...

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {
       // ...
    },
    // ...
};

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

所以基本上$(selector)表示 new jQuery.fn.init(selector)，它只是一种更容易打字的快捷方式（也可以防止“错误”在哪里生成 new 将this绑定到全局对象，而不是当前实例。

此外，添加为jQuery.fn.ext的所谓插件已映射到jQuery.fn.init.prototype，如您在最后一行中所见，它是另一种快捷方式。因此，当您致电$(selector)时，添加到jQuery.fn的所有内容也会显示在jQuery.fn.init.prototype上，因此新实例会将这些方法设为$(selector).ext(...)。

// as you use it today
jQuery.fn.plugin = function ( ... ) { ... }
$(selector).plugin( ... )

// as it would be without shortcuts
jQuery.fn.init.prototype.plugin = function ( ... ) { ... }
(new jQuery.fn.init(selector)).plugin( ... )

Jquery Evolution来自简单的普通javascript

2 个答案: