Prototype’s selector returns DOM elements.
$("element_id");
// return: <div id="element_id"></div>
jQuery’s selector returns an object which may contain 0+n DOM elements.
jQuery("#element_id"); // or $("#element_id");
// return: [div#element_id]
The equivalent is:
jQuery("#element_id")[0];
// return: <div id="element_id"></div>
Prototype has a bind function.
function.bind(context);
jQuery binds with a proxy.
jQuery.proxy(function, context);
Prototype adds an each
method to Array
.
Array.each(function(item) {
// ...
});
jQuery can iterate over arrays.
jQuery.each(Array, function(item) {
// ...
});
But usually you want to iterate over the results of a jQuery selector:
jQuery("#element_id").each(function(index, element) {
// ...
});
Prototype adds the observe method to DOM elements
$("element_id").observe("click", function(event){
// ...
});
jQuery has the on
method (:warning: bind
is deprecated in jQuery) .
jQuery("#element_id").on("click", function(jQueryEvent){
// ...
});
…or the shorthand click (and others).
jQuery("#element_id").click(function(jQueryEvent){
// ...
});
The jQueryEvent
object is not the same as a regular event
object, but target()
both work the same.
Initializing on DOM ready is done with Prototype’s observe method as:
document.observe("dom:loaded", function() {
// ...
});
In jQuery:
jQuery(function(){
// ...
});
Prototype has .value
.
$("#element_id").value; // get value
$("#element_id").value = "Hello world"; // set value
jQuery has .val
.
jQuery("#element_id").val(); // get value
jQuery("#element_id").val("Hello world"); // set value