Introduction
La principale différence entre jQuery et Prototype est que jQuery n’étend ni le JavaScript, ni le DOM: jQuery est un simple wrapper autour des éléments du DOM. Les méthodes sont donc disponibles sur les objets/collections jQuery et non sur les éléments du DOM.

$('.maClasse').each(function()
{
    // $() nous avons à faire à l'objet jQuery ici
    $(this).addClass('selected');
 
    // this est l'objet DOM (non étendu)
    this.addClass('selected'); // error: addClass() is not a function
}

Prototype, à l’inverse, étend le DOM (notamment l’objet Element) avec ses propres méthodes. De même, l’objet Array se voit étendu. Outre le côté implémentation galère: chaque navigateur change à chaque mise à jour, implémentant de nouvelles méthodes: que se passe-t’il lorsque le navigateur implémente la méthode document.getElementByClassName() ensuite étendue par le framework ? Une grosse collision Une fois le framework fixé, il faut aussi fixer tout le code utilisant cette méthode…

var monDiv = new Element('div');
monDiv.addClassName('selected');  // fonctionne, puisque l'objet Element a été étendu par Prototype

Il semblerait donc que l’approche utilisée par jQuery soit bien meilleure. Il est à noter que la version 2.0 de Prototype n’étendra d’ailleurs pas le DOM comme cela avait été le cas jusqu’à maintenant: Ajaxian: prototype 2.0 will not extend the dom.
1. le sélecteur $
$ est surement la première chose que l’on découvre en se lançant dans jQuery, et la fonctionne existe aussi dans Prototype, mais les deux fonctionnent différemment. Dans jQuery, $ fait office de sélecteur universel:

var $maCollection = $('.maClass');
var $mesInput = $('form input');
var $monSubmit = $('#monSubmit');

Avec Prototype, $ est en fait un raccourci vers document.getElementById(). Pour obtenir un sélecteur universel comme sur jQuery il faudra utiliser le $$:
deviendra:

var $maCollection = $$('.maClass');
var $mesInput = $$('form input');
var $monSubmit = $$('#monSubmit');

Note: l’appel d’une méthode sur une collection d’éléments jQuery appellera automatiquement la méthode sur chaque élément. Par exemple $(’.maClasse’).addClass(’selected’) appliquera la classe selected à chaque élément. A l’inverse, Prototype étendant le DOM, les méthodes sont accessibles sur chaque élément et non pas sur la collection d’éléments: $$(’.maClass’).addClassName(’selected’) ne fonctionnera pas. Il faudrait parcourir la collection avec each().

2. document.ready()
Le JavaScript a accès au DOM avant même qu’il soit finit d’être chargé. Pour être sûr qu’il le soit, et que nos modifications puissent donc fonctionner, jQuery fournit la méthode $(document).ready(), automatiquement appelée lorsque le DOM est prêt:

$(document).ready(function()
{
   alert('prêt !');
});

L’équivalent Prototype (1.6) serait:

document.observe('contentloaded', function()
{
   alert('prêt !');
});

3. itération
jQuery utilise la méthode each() pour itérer sur une collection d’éléments. A l’intérieur de la fonction each, this correspond à l’objet DOM (non étendu), et $(this) permet d’accéder à l’objet jQuery. Enfin, each passe l’index de l’élément en cours à la fonction callback (optionnel):

$('.maClasse').each(function(i)
{
   $(this).addClass('selected');
});

Prototype fournit une méthode each() équivalente, à la différence prêt que le this n’est pas assigné, comme par magie dans jQuery (beaucoup de choses se font par magie dans jQuery ) à l’objet courant. Dans Prototype la fonction callback se voit passer comme paramètres l’élément courant, et l’index:

$$('.maClasse').each(function(elt, i)
{
   elt.addClassName('selected');
});

4. modification de contenu
Pour modifier le contenu d’un élément avec jQuery, il existe principalement deux manières. On veut écraser tout le contenu d’un élément:

<p id="monParagraphe">
   Ancien contenu.
</p>

$('#monParagraphe').html('nouveau contenu :)');

Ce qui donnera:

<p id="monParagraphe">
   nouveau contenu :)
</p>

Le code Prototype correspondant serait:

$('monParagraphe').update('nouveau contenu :)');

Pour ajouter un élément, ou du texte à autre élément, jQuery fournit les méthodes: append() et prepend() qui rajoutent respectivement du contenu en fin, et en début d’élément:

<p id="monParagraphe">
   Ancien contenu.
</p>

var $span1 = $('<span/>').html('avant');
var $span2 = $('<span/>').html('apres');
$('#monParagraphe').prepend($span1);
$('#monParagraphe').append($span2);

Ce qui donnera:

<p id="monParagraphe">
   <span>avant</span>
   nouveau contenu :)
   <span>apres</span>
</p>

Prototype fournit une méthode « tout-en-un » insert qui permet de rajouter du contenu en début et fin d’élément en un seul appel. Le code Prototype correspondant serait:

var $span1 = new Element('span').update('avant');
var $span2 = new Element('span').update('apres');
$('monParagraphe').insert({
   top: $span1,
   bottom: $span2
});

5. Modification CSS
Pour modifier l’aspect d’un élément à l’aide des CSS, rien de plus simple avec jQuery: la méthode css() permet de modifier un ou plusieurs attributs CSS:

$('#monParagraphe').css({
  border: '1px solid red',
  'background-color': 'green'
});

Ce qui donnera:

<p id="monParagraphe" style="border:1px solid red; background-color:green;">
   <span>avant</span>
   nouveau contenu :)
   <span>apres</span>
</p>

Note: La méthode CSS reconnait à la fois les noms d’attributs CSS et leur variante Camel Case. Pour modifier le « background-color », on aurait donc aussi pu utiliser: backgroundColor: ‘green’.

Prototype fournit la méthode équivalente setStyle:

$('monParagraphe').setStyle({
  border: '1px solid red',
  backgroundColor: 'green'
});

Note: Prototype ne reconnait que du Camel Case. Il n’est donc pas possible de modifier l’attribut background-color en utilisant: ‘background-color’: ‘green’ et il faut impérativement utiliser du Camel Case comme dans l’exemple précédent.

6. Cacher/Afficher des éléments
Pour cacher ou afficher un élément avec jQuery, rien de plus simple:

$('#monParagraphe').hide();

aura pour effet de cacher le paragraphe:

<p id="monParagraphe" style="display:none;">
  Mon Paragraphe
</p>

Pour réafficher un paragraphe caché (par CSS ou bien par jQuery), il suffit de faire appel à la méthode show():

$('#monParagraphe').show();

Prototype fournit deux méthodes équivalentes: show et hide mais attention ! Prototype n’est pas capable d’afficher un élément qui aurait été caché au niveau CSS (ayant la propriété display settée à none). Exemple:

#monParagraphe{
  display:none;
}

L’appel à show() n’aura aucun effet dans ce cas:

$('#monParagraphe').show();

Il sera nécessaire dans ce cas de modifier directement la propriété CSS display en écrivant par exemple:

$('#monParagraphe').style.display = 'block';

7. Pour aller plus loin
jQuery permet d’assigner des données à chaque élément du DOM à l’aide de la méthode data:

var mesDonnees = {test: 'yep !'};
$('#monParagraphe').data(mesDonnees);

Pour récupérer ces mêmes données, il suffit alors d’appeler data sans paramètre:

var mesDonnees = $('#monParagraphe').data(); // { test: 'yop !' }

Là encore, Prototype fournit les méthodes store et retrieve équivalentes:

$('monParagraphe').store('test', 'yep !'); // { test: 'yop !' }
var test = $('monParagraphe').retrieve('test');  // test == 'yop !'

Quelques liens
Pour finir, et pour en savoir plus, voici quelques liens utiles:

• Documentation officielle de jQuery: api.jquery.com
• Documentation officielle de Prototype: http://api.prototypejs.org/

SleepySun  [ Rock spychiadélique ]
Ambiance: Rock Psychiadélique
Albums: Fever Art
A écouter: Open Eyes

Nouveautés
Comme à chaque version majeure (et on peut se demander comment ils font), les développeurs de ce framework ont de nouveau augmenté les performances de jQuery:

• Réécriture de l’injection HTML: 6x plus rapide!
• Utilisation d’un nouveau sélecteur, plus rapide: sizzle
• Ajout des live events dans le core de jQuery
• Nouvel objet Event
• Réécriture de la méthode offset(), beaucoup plus rapide
• Et bien plus…

Incompatibilités
Malheureusement, certaines fonctionnalités dépréciées depuis un moment ont été retirées de cette version. Les modifications à effectuer pour rendre son code compatible sont plutôt mineures, quand on sait où chercher

1. suppression de @ dans [@attr]
Le plus gros changement est la suppression de @. Une sélection comme:

$('input[@name=toto]')...

deviendra:

$('input[name=toto]')...

2. changements dans la méthode ready()
Auparavant la méthode attendait le chargement de toutes les feuilles de styles. Comme ce n’est plus le cas, tous les fichiers CSS doivent être inclus avant les scripts dans la page.

3. Ordre des sélecteurs « a, b, c »
L’ordre des sélecteurs peut varier. Les navigateurs supportant querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE8+) retourneront les éléments dans l’ordre du document alors que les autres navigateurs les retourneront (pour l’instant) dans l’ordre spécifié. Dans une prochaine version 1.3.x tous les sélecteurs séparés par des virgules seront retournés dans l’ordre du document.
Concrètement, cela signifie que dans l’exemple suivant:
DOM

<div id="c">
	Div c
  </div>
 
  <div id="b">
	Div b
  </div>
 
  <div id="a">
	Div a
  </div>

Code

$(document).ready(function()
{
    $('#a, #b, #c').each(
      function() {
         alert( $(this).attr('id') ); 
      }
   );
});

Les navigateurs supportant querySelectorAll (cf. au dessus), renverront les éléments dans l’ordre du DOM, à savoir:

c b a

Alors que les autres renverront les éléments dans l’ordre spécifié dans le sélecteur, c’est à dire:

a b c

Attention à ne pas se baser sur cet ordre donc !

Nouveautés
Cette nouvelle version de jQuery vient comme d’habitude avec son lot de nouveautés bien pratiques, parmi lesquelles:

1. nouvelle méthode closest( expr )
Cette méthode renvoie le plus proche parent correspondant à l’expression, l’élément de départ compris. Exemple:

DOM

<div class="superParent" id="main">
     <div>
        <ul id="maListe">
			<li id="15">
				<a>clique !</a>
			</li>
        </ul>
    </div>
  </div>

Code

$('a').click(function() {
  alert($(this).closest('li').attr('id'));
  alert($(this).closest('div.superParent').attr('id'));
});

L’exécution du code ci-dessus donnera le résultat suivant:

15
main

2. live events
Auparavant, les événements n’étaient pas mis à jour en temps réel sans passer par un plugin comme livequery et un appel comme celui là:

$('a') 
    .livequery('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

sera tout simplement remplacé par:

$('a') 
    .live('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

3. La méthode is() et selecteur not() supportent maintenant des expressions complexes, comme:

$('a:not(.selected, .highlighted)')...

Quelques liens
Pour finir, et pour en savoir plus, voici quelques liens sur jQuery:

• changelog complet: changelog jQuery 1.3
• Introduction à jQuery
• Documentation officielle: docs.jquery.com

Si vous êtes ici c’est que vous ne connaissez pas jQuery et que vous voulez en savoir plus… Alors fini le blabla
Non, jQuery n’est pas un nouvel applet Java, mais bel et bien un framework Javascript qui permet, entre autres de simplifier l’utilisation de l’ajax, mais aussi de manipuler le DOM de votre document, et tout ceci, très, très simplement!
Comme un exemple vaut souvent mieux qu’un long discours, et que de toutes façons je suis mauvais pour les discours, je vais vous démontrer sa simplicité et sa puissance en quelques exemples…

Commençons par l’exemple le plus simple. Admettons que notre document contienne un élément d’id « truc », et que nous souhaitions injecter une chaîne de caractères « bonjour ! » à l’intérieur:

$("#truc").html("bonjour !");

Au niveau du DOM, avant:

<p id="truc"></p>

…Après:

<p id="truc">bonjour !</p>

Alors, deux choses. L’accesseur « $ » permet d’accéder à un objet jQuery. Ici, d’identifiant « truc ». $( »#truc ») nous renvoie donc un objet (au sens javascript, mais aussi jQuery) qui possède de nombreuses méthodes. La méthode html() permet de modifier le contenu innerHTML de l’objet avec le contenu passé en paramètre. Simple, non ? Maintenant admettons que nous souhaitions modifier la classe utilisée par cet élément. Rien de plus simple en jQuery:

$("#truc").addClass("ma_classe");

Au niveau du DOM, avant:

<p id="truc">bonjour !</p>

…Après:

<p id="truc" class="ma_classe">bonjour !</p>

Comme vous pouvez le voir notre paragraphe possède maintenant la classe « ma_classe ». Simple, non ? Maintenant voyons un peu comment fonctionne l’Ajax… Admettons que nous ayons un script « heure.php » qui nous renvoie l’heure, sous forme de chaîne de caractères… Et que nous souhaitions modifier le contenu de notre paragraphe d’id « truc » avec le résultat de l’appel Ajax de ce script… Rien de plus simple avec jQuery:

function set_time(msg)
{
    $("#truc").html(msg);
}
 
$.post("http://mon_site/heure.php", set_time);

Au niveau du DOM, avant:

<p id="truc"></p>

…Après:

<p id="truc">Mardi 12 Juin - 18:36:45</p>

Alors, qu’est-ce que l’on voit ici ? Nous définissons tout d’abord une fonction javascript set_time() qui prend en paramètre un message msg. C’est en fait la fonction callback qui sera appelée lorsque la requête AJax aura été effectuée. Le paramètre contiendra le message renvoyé par le serveur. Cette fonction, modifie le contenu innerHTML du paragraphe d’id « truc », comme nous l’avons vu précédemment: jusque là rien de nouveau. La ligne suivante fait appel à une méthode de jQuery (d’où le $.), « post » qui effectue une requête asynchrone vers le serveur http://mon_site sur le script heure.php. Lorsque le serveur renvoie son résultat, la fonction set_time() est automatiquement appelée avec en paramètre le résultat de la requête Ajax.
Ici on a choisit de passer le nom d’une fonction javascript comme second paramètre de la méthode post(), mais il tout à fait possible de définir la fonction de manière inline:

$.post("http://mon_site/heure.php", function (msg)
{
    $("#truc").html(msg);
});

Note: le code devient vite illisible et difficile à maintenir lorsque l’on abuse d’appels inline!

Les évènements
Vous avez sans doute déjà bindé (lié) un évènement (par exemple onClick) à une fonction en javascript, par exemple avec la fonction onClick().
Cette méthode permettant de lier un évènement à un objet a plusieurs inconvénients. Le premier est que le code se retrouve mélangé avec le HTML. Le deuxième est que le code est statique: il est définit une bonne fois pour toutes lors de la création/génération de la page.
Et bien avec jQuery, ces deux inconvénients disparaissent puisqu’il est maintenant possible de binder n’importe quel évènement Javascript à n’importe quel élément de notre DOM. Ainsi, en reprenant l’exemple précédent, et en rajoutant un bouton nous obtenons le code suivant:

function set_time(msg)
{
    $("#truc").html(msg);
}
 
function envoi_requete()
{
    $.post("http://mon_site/heure.php", set_time); 
}
 
$("#mon_bouton").click( envoi_requete );

Aussi simplement que l’on modifie le contenu innerHTML d’un objet avec la méthode html(), il est possible de binder un évènement à n’importe quel objet ! La méthode click() permet de binder, comme vous l’aurez deviné, l’évènement « clique » de la souris à n’importe quel objet. Le code précédent va donc appeler la fonction envoi_requete() dès que l’utilisateur cliquera sur le bouton d’id « mon_bouton ». Cette fonction déclenchera la requête Ajax. Une fois cette requête terminée, le résultat sera injecté dans le innerHTML de l’objet d’id « truc ». A noter qu’encore une fois, il est ici tout à fait possible de définir de manière inline la fonction appelée lorsque l’évènement clique est détecté.

Pour finir…
Cette petite introduction à jQuery touche à sa fin. Non pas que je n’ai plus rien à dire: je pourrai parler des possibilités offertes par cette librairie pendant des heures, mais il commence à se faire tard, et le but de cet article était seulement de donner un petit aperçu de cette librairie et des différents domaines qu’elle touche. Avant de finir je vais cependant introduire une dernière fonction très utile et importante, la méthode

$(document).ready()

Elle est appelée une fois le DOM de la page complètement chargé. Lorsque vous utilisez jQuery, il est obligatoire de binder vos différents évènements dans cette fonction, de manière à être sûr que tout fonctionne correctement:

$(document).ready(
function ()
{
   alert('Le DOM est prêt :)'); 
});

Quelques liens

• jQuery.com: Site Officiel
• VisualjQuery: Documentation très bien faite (malheureusement plus mise à jour depuis longtemps)

Ah, et j’oubliais: merci à lolo de m’avoir fait découvrir cette petite perle

Et j’oubliais aussi: rien à voir avec jQuery, mais voilà le petit extrait musical du moment…Until the Morning – Thievery Corporation