Jquery从简单的普通javascript演变而来
Jquery从简单的普通javascript演变而来,javascript,jquery,Javascript,Jquery,我已经使用jquery有一段时间了，但我对jquery所知的唯一一件事可能就是完成工作的十几个函数。但我想了解jquery是如何从简单的纯javascript演变而来的，即 $("#xyz").val(); 转换为 document.getElementById('xyz').value; 我已经在web上搜索了我的答案，但是大多数作者都很乐意展示如何使用jquery、选择器细节等连接到不同的DOM元素，但是没有找到关于转换是如何进行的。有人能给我介绍一些教程，我可以从中获得所需的材料吗？
我已经使用jquery有一段时间了，但我对jquery所知的唯一一件事可能就是完成工作的十几个函数。但我想了解jquery是如何从简单的纯javascript演变而来的，即
$("#xyz").val();
document.getElementById('xyz').value;
谢谢，jQuery不是编译器。jQuery不会被编译成javascript
.valfunction (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;
}
});
}
这个对象有各种各样的方法，允许您改变内部存储的底层dom对象
.val.valfunction (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;
}
});
}
这个对象有各种各样的方法，允许您改变内部存储的底层dom对象
.val$（“#xyz”）.val（）为例
我甚至可以告诉你jQuery在幕后做什么，但我认为你并不想知道。：）
因此，基本上$（选择器）
意味着新的
，它只是一种快捷方式，可以更容易地键入（也可以防止“bug”，即fogeting新的
将绑定到全局对象，而不是当前实例）
另外，添加为jQuery.fn.ext
的所谓插件被映射到jQuery.fn.init.prototype
，正如您在最后一行中看到的，这是另一个快捷方式。因此，当您调用$（选择器）
时，添加到jQuery.fn
的所有内容也将处于jQuery.fn.init.prototype
状态，因此新实例将具有$（选择器）.ext（…）
等方法
关于jQuery如何工作的文章很多（也有）
正如您所注意到的，jQuery基本上是一组对元素数组进行操作的方法。它还旨在规范引擎盖下的浏览器差异
以基本用法$（“#xyz”）.val（）为例
我甚至可以告诉你jQuery在幕后做什么，但我认为你并不想知道。：）
因此，基本上$（选择器）
意味着新的
，它只是一种快捷方式，可以更容易地键入（也可以防止“bug”，即fogeting新的
将绑定到全局对象，而不是当前实例）
另外，添加为jQuery.fn.ext
的所谓插件被映射到jQuery.fn.init.prototype
，正如您在最后一行中看到的，这是另一个快捷方式。因此，当您调用$（选择器）
时，添加到jQuery.fn
的所有内容也将处于jQuery.fn.init.prototype
状态，因此新实例将具有$（选择器）.ext（…）
等方法
看一看源代码，它的大意是“为什么我们要从使用汇编语言过渡到使用C和其他高级语言”？方便，懒惰，傲慢。看看来源$（）在jquery和mootools中是一个巨大的对象，并且围绕domNodeTake中的常规方法进行了包装。请看一下源代码。它的大意是“为什么我们从使用汇编语言过渡到使用C和其他高级语言”？方便，懒惰，傲慢。看看来源$（）在jquery和mootools中是一个巨大的对象，同时也是domNode中常规方法的包装
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;
// 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( ... )