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

Intro
Commencons par un exemple – un paragraphe contenant une simple ligne de texte et une petite image (le carré bleu ci-dessus).

Lignes de positionnement
Voyons sans attendre les 6 lignes primaires utilisées lors de l’alignement vertical.

1. top line – cette ligne se situe au dessus de tout le contenu

2. ligne text-top – cette ligne délimite le sommet du texte (en incluant les accents)

NB: Les lignes “top line” and “text-top” peuvent paraître identiques. Mais ce n’est pas le cas, dans certains cas la top line (marquée en rouge ci-dessous), est plus haute que le contenu texte – et par conséquent, plus haute que la ligne text-top (marquée en vert ci-dessous). L’image suivante, très grande (plus haute que le texte) illustre ce cas particulier:

3. middle line – cette ligne se situe au milieu de la hauteur de la lettre x

4. baseline – c’est la ligne imaginaire sur laquelle reposent toutes les lettres

5. text-bottom line – cette ligne se situe en dessous de tout caractère (en incluant des lettres comme “j”, “y”, “g” etc…)

6. bottom line – cette ligne se situe en dessous de tout le contenu

Alignement vertical par défaut

Par défaut, le bas de l’image s’alignera sur la baseline du paragraphe – à moins que l’image ait une margin-bottom d’appliquée. Dans ce cas, le bas de la marge de l’image s’alignera sur la baseline du paragraphe. Dans l’exemple ci-dessous, l’image a la marge suivante: “margin-bottom: 5px” ce qui fait que le bas de l’image se placera 5 pixels au dessus de la baseline.

Utilisation des CSS pour modifier l’alignement vertical

Il est possible de modifier la position verticale des images par rapport au texte l’entourant en utilisant la propriété CSS vertical-align.

Cette propriété peut prendre les valeurs suivantes: top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage et length.

Top

Le haut de l’image sera aligné avec la top line.

img.class-name { vertical-align: top; }

Text-top

Cela aura pour effet d’aligner le haut de l’image avec la top line.

img.class-name { vertical-align: text-top; }

Middle

Ceci alignera le milieu vertical de l’image avec la baseline plus la moitié de la hauteur de la lettre x du paragraphe.

img.class-name { vertical-align: middle; }

Baseline

Bien que les images soient par défaut alignées par rapport à la baseline, il est possible de spécifier cette option en utilisant les CSS.

img.class-name { vertical-align: baseline; }

Text-bottom

Le bas de l’image sera aligné par rapport à la bottom line.

img.class-name { vertical-align: text-bottom; }

Sub

Ceci alignera le bas de l’image avec la baseline du contenu indicé (qu’il y ait ou non du contenu indicé présent dans le texte).

img.class-name { vertical-align: sub; }

Super

Ceci alignera le bas de l’image avec la basline du contenu exposant (qu’il y ait ou non du contenu exposant présent dans le texte).

img.class-name { vertical-align: super; }

Percentage

Ceci décalera vers le haut (valeur positive) ou vers le bas (valeur négative) l’image par rapport à la baseline de la valeur spécifiée. La valeur ‘0%’ correspond à la baseline inchangée. A noter que le positionnement vertical en pourcentage pourra, une fois n’est pas coutume, varier légèrement selon le navigateur utilisé.

img.class-name { vertical-align: 30%; }

img.class-name { vertical-align: -30%; }

Taille

Ceci décalera vers le haut (valeur positive) ou vers le bas (valeur négative) l’image par rapport à la baseline de la valeur spécifiée. La valeur ‘0px’ correspond à la baseline inchangée.

img.class-name { vertical-align: 2px; }

img.class-name { vertical-align: -2px; }

Voila, j’espère avoir écrit l’article avant que vous n’ayez plus de cheveux

Vous pouvez retrouver l’article original, en Anglais, ici: http://www.maxdesign.com.au/2008/10/05/vertical-align/

Le petit coup de coeur du moment nous vient d’Allemagne et s’appelle Ancient Astronauts, extrait:

Ancient Astronauts [ Funk, Hip-Hop ]
Ambiance: Funk
Albums: We Are To Answer
A écouter: Tout

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