我做一些同事對jQuery的介紹，我想演示如何在JavaScript的某些任務可以使用jQuery變得更加容易。有沒有簡單的方法來找到jQuery代碼的「JavaScript等效」？
我想出了一個小的jQuery的功能，做一些元素選擇/動畫，我希望向他們展示這個代碼的JavaScript等價的。
我的問題是，我的JavaScript是有點生疏了，我寧願不揣摩如何實現這個使用JavaScript。有誰知道從jQuery生成JavaScript的方法嗎？如果沒有，任何人都可以推薦一個很好的資源來找到等效的JavaScript和jQuery的並排比較？
我的代碼：
var move = 200;
$('#clickme').click(function() {
$('#main div:even').animate({
left:"+="+move
}, 2000);
move = -move;
});
This article有良好的表現，顯示了你想顯示你的同事是什麼。
它表明了這一點：
var example = null; // object
function doMove() {
example.style.left = parseInt(example.style.left)+1+'px';
setTimeout(doMove,20); // call doMove in 20msec
}
function init() {
example = document.getElementById('example'); // get the "example" object
example.style.left = '0px'; // set its initial position to 0px
doMove(); // start animating
}
window.onload = init;
可以變成這樣：
$("#element").animate({ left: 100px; });
因爲jQuery是JS實現的，並沒有轉化爲它（如CoffeeScript的或其他），還有展現一個VS其他沒有準確的方法。
您可以通過剖析了jQuery和顯示結果在同樣的想法 - 「看所有的jQuery開發團隊寫了我們的代碼，我們得到基本上免費使用！」或通過示出的$().attr的定義或隱藏一串特定瀏覽器的怪異的另一個類似的方法。
，如果你還不知道如何完成直JavaScript的任務最簡單的方法是看源代碼，看看它在做什麼，並編寫JavaScript，做同樣的事情。
這裏是Javascript Animation一些文檔的JavaScript，你將在這裏實現另一種是有關選擇元素like selecting by tag name
嗯，我想你可以嘗試
document.querySelector('#clickme')
這是基本相似的jQuery $(' ')但這種意志以前只會返回一個元素。
沒有直接的方式，如果你通過jQuery的來源，你會發現，節點選擇使用正則表達式這是不容易實現的要寫入每個代碼解析，
也有一個調用的方法之間的直接關係：
例如這裏：
.click(function) -> .addEventListener('click',function,false);
我會考慮只向他們展示了一堆它是多麼容易的例子在jquery中做些事情 - 動畫，DOM操作等。如果他們對JavaScript有任何的理解，他們會知道它存儲了多少工作，並且他們不知道他們爲什麼做出決定？
我會提出的一個重點是，jquery中的所有內容都可以正常工作，不再存在跨瀏覽器問題。
該選擇器非常簡單，可以轉換爲getElementById，但如果它更復雜，Sizzle庫將被調用以獲取元素。
點擊是綁定的別名，並指定點擊。綁定通過添加事件來工作。下面是從源代碼片段：
add: function(elem, types, handler, data) {
if (elem.nodeType === 3 || elem.nodeType === 8) {
return;
}
if (handler === false) {
handler = returnFalse;
} else if (!handler) {
// Fixes bug #7229. Fix recommended by jdalton
return;
}
var handleObjIn, handleObj;
if (handler.handler) {
handleObjIn = handler;
handler = handleObjIn.handler;
}
// Make sure that the function being executed has a unique ID
if (!handler.guid) {
handler.guid = jQuery.guid++;
}
// Init the element's event structure
var elemData = jQuery._data(elem);
// If no elemData is found then we must be trying to bind to one of the
// banned noData elements
if (!elemData) {
return;
}
var events = elemData.events,
eventHandle = elemData.handle;
if (!events) {
elemData.events = events = {};
}
if (!eventHandle) {
elemData.handle = eventHandle = function(e) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.handle.apply(eventHandle.elem, arguments) :
undefined;
};
}
// Add elem as a property of the handle function
// This is to prevent a memory leak with non-native events in IE.
eventHandle.elem = elem;
// Handle multiple events separated by a space
// jQuery(...).bind("mouseover mouseout", fn);
types = types.split(" ");
var type, i = 0, namespaces;
while ((type = types[ i++ ])) {
handleObj = handleObjIn ?
jQuery.extend({}, handleObjIn) :
{ handler: handler, data: data };
// Namespaced event handlers
if (type.indexOf(".") > -1) {
namespaces = type.split(".");
type = namespaces.shift();
handleObj.namespace = namespaces.slice(0).sort().join(".");
} else {
namespaces = [];
handleObj.namespace = "";
}
handleObj.type = type;
if (!handleObj.guid) {
handleObj.guid = handler.guid;
}
// Get the current list of functions bound to this event
var handlers = events[ type ],
special = jQuery.event.special[ type ] || {};
// Init the event handler queue
if (!handlers) {
handlers = events[ type ] = [];
// Check for a special event handler
// Only use addEventListener/attachEvent if the special
// events handler returns false
if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) {
// Bind the global event handler to the element
if (elem.addEventListener) {
elem.addEventListener(type, eventHandle, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + type, eventHandle);
}
}
}
if (special.add) {
special.add.call(elem, handleObj);
if (!handleObj.handler.guid) {
handleObj.handler.guid = handler.guid;
}
}
// Add the function to the element's handler list
handlers.push(handleObj);
// Keep track of which events have been used, for event optimization
jQuery.event.global[ type ] = true;
}
// Nullify elem to prevent memory leaks in IE
elem = null;
}
注意，有各種聰明的事情那兒的情況，使這個作品不管是什麼。
動畫是這樣工作的：
animate: function(prop, speed, easing, callback) {
var optall = jQuery.speed(speed, easing, callback);
if (jQuery.isEmptyObject(prop)) {
return this.each(optall.complete, [ false ]);
}
// Do not change referenced properties as per-property easing will be lost
prop = jQuery.extend({}, prop);
return this[ optall.queue === false ? "each" : "queue" ](function() {
// XXX 'this' does not always have a nodeName when running the
// test suite
if (optall.queue === false) {
jQuery._mark(this);
}
var opt = jQuery.extend({}, optall),
isElement = this.nodeType === 1,
hidden = isElement && jQuery(this).is(":hidden"),
name, val, p,
display, e,
parts, start, end, unit;
// will store per property easing and be used to determine when an animation is complete
opt.animatedProperties = {};
for (p in prop) {
// property name normalization
name = jQuery.camelCase(p);
if (p !== name) {
prop[ name ] = prop[ p ];
delete prop[ p ];
}
val = prop[ name ];
// easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default)
if (jQuery.isArray(val)) {
opt.animatedProperties[ name ] = val[ 1 ];
val = prop[ name ] = val[ 0 ];
} else {
opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing';
}
if (val === "hide" && hidden || val === "show" && !hidden) {
return opt.complete.call(this);
}
if (isElement && (name === "height" || name === "width")) {
// Make sure that nothing sneaks out
// Record all 3 overflow attributes because IE does not
// change the overflow attribute when overflowX and
// overflowY are set to the same value
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
// Set display property to inline-block for height/width
// animations on inline elements that are having width/height
// animated
if (jQuery.css(this, "display") === "inline" &&
jQuery.css(this, "float") === "none") {
if (!jQuery.support.inlineBlockNeedsLayout) {
this.style.display = "inline-block";
} else {
display = defaultDisplay(this.nodeName);
// inline-level elements accept inline-block;
// block-level elements need to be inline with layout
if (display === "inline") {
this.style.display = "inline-block";
} else {
this.style.display = "inline";
this.style.zoom = 1;
}
}
}
}
}
if (opt.overflow != null) {
this.style.overflow = "hidden";
}
for (p in prop) {
e = new jQuery.fx(this, opt, p);
val = prop[ p ];
if (rfxtypes.test(val)) {
e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();
} else {
parts = rfxnum.exec(val);
start = e.cur();
if (parts) {
end = parseFloat(parts[2]);
unit = parts[3] || (jQuery.cssNumber[ p ] ? "" : "px");
// We need to compute starting value
if (unit !== "px") {
jQuery.style(this, p, (end || 1) + unit);
start = ((end || 1)/e.cur()) * start;
jQuery.style(this, p, start + unit);
}
// If a +=/-= token was provided, we're doing a relative animation
if (parts[1]) {
end = ((parts[ 1 ] === "-=" ? -1 : 1) * end) + start;
}
e.custom(start, end, unit);
} else {
e.custom(start, val, "");
}
}
}
// For JS strict compliance
return true;
});
}
再次，很多聰明的，以確保這樣做你的期望。
在現實生活中，帶有事件監聽器的getElementById，然後重複使用元素上的setStyle來獲取動畫的循環將起作用。
這不像是說「有STL的C++等價物」嗎？我的意思是，jQuery-is-JavaScript，它只是另一個庫。 – CanSpice
我想你已經回答了你自己的問題。 7行jQuery vs什麼？誰知道。 :) – BNL
不要粗魯，但如果你不知道JavaScript（DOM API），那麼你怎麼知道jQuery更容易？我的意思是因爲你正在給一個演示文稿和所有... – user113716