comment jQuery repose sur une seule fonction ?

jQuery repose sur une seule fonction, c’en est d’ailleurs effrayant de simplicité : $(). C’est tout.
Mmm… d’accord, je vais développer un peu.

Selon les paramètres que l’on va lui passer, cette fonction va réagir de différentes manières. Voici les types de paramètres que l’on peut lui passer :

Une fonction

Dans ce cas, jQuery va charger cette fonction lorsque la page sera chargée par le navigateur.
Mais pourquoi ne pas utiliser le classique window.onload = function(){} ?
Principalement parce que window.onload attend que la page et les éléments qu’elle contient soient complètement chargés, ce qui peut être très long.
Pour reprendre le processus :

1. Le fichier html est téléchargé.
2. Il est lu par le navigateur.
3. Le navigateur commence à télécharger les éléments auxquels le fichier html fait référence (images, css…).
4. Le code situé dans $(function(){}) est exécuté dès que possible.
5. Lorsque tout est téléchargé, le code situé dans window.onload = function(){} est exécuté, en dernier.

Théoriquement, ce code devrait même être exécuté avant l’affichage, mais en réalité le navigateur peut commencer à afficher la page avant qu’elle ne soit complètement téléchargée.
De plus, les téléchargements ne se font pas un par un, car le navigateur n’attend pas qu’une image arrive pour en télécharger une autre, heureusement !
Voilà qui facilite le côté non-intrusif du Javascript :
Si un élément ne doit apparaître qu’au survol de la souris, par exemple, il faut bien que cet élément soit visible lorsque Javascript n’est pas activé : il peut alors simplement être placé dans le code de la page, et dissimulé en Javascript au chargement, pour réapparaître au survol, en une animation à couper le souffle !
On peut l’utiliser en stockant la fonction dans une variable pour la passer ensuite à jQuery :

var ma_fonction = function(){
 // Tout ce qui est ici sera exécuté au chargement du DOM.
};
$(ma_fonction);

Ou, plus directement, en passant simplement une fonction anonyme à jQuery :

$(function(){
 // Tout ce qui est ici sera exécuté au chargement du DOM.
});

Un élément, ou un tableau d’éléments DOM

Vous vous en doutiez, jQuery, cet insolent, n’est pas qu’un « super loader ».
En lui passant des éléments du DOM, la fonction $() va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on va pouvoir user et abuser de toute la puissance de jQuery.
Un peu comme une grosse boîte magique, dans laquelle on va mettre tout ça.

Il est possible de passer un élément, ou un tableau d’éléments à jQuery.
Il va sans dire que le code suivant doit être placé dans le « chargeur » jQuery, vu juste au-dessus, pour être exécuté :

var mon_element = document.getElementById("id_de_mon_element_html");
var mon_objet_jquery = $(mon_element);

Une chaine de caractères

Notre formidable sens de la déduction nous a immédiatement permis de comprendre la raison du « j ». Mais pourquoi « Query » ?
En passant une chaine de catactères à la fonction $(), nous allons lui demander de nous retourner un objet jQuery rempli d’éléments, sans même avoir à sélectionner préalablement les objets DOM.
- Sorcellerie !
Ecoutez, calmez vous et posez cette fourche, sinon nous allons avoir du mal à avancer.
Plusieurs possibilités vous permettront de sélectionner les éléments désirés : les sélecteurs CSS de niveaux 1 à 3, XPath, ainsi que quelques sélecteurs jQuery.

Les sélecteurs CSS

J’imagine que si vous lisez ceci, vous avez au moins une vague connaissance du langage CSS, et c’est merveilleux !
Prenons cette structure HTML :

<div id="fixe">
<h2>Je suis un titre, j'ai de l'importance.</h2>
<p class="ique">Ca va les chevilles là-haut ?</p>
<p>Lorem ipsum sont des mots qui vont très bien ensemble, très bien ensemble.</p>
</div>

Nous voulons sélectionner le premier élément <p>.
Voici différentes possibilités :

// Sélection des éléments ayant pour classe "ique", dans l'élément ayant pour id "fixe"
var mon_objet_jquery = $("#fixe .ique");      

// Sélection du premier élément <p> de l'élément <div>.
var mon_objet_jquery = $("div p:first-child");      

// Sélection des éléments <p>, enfants directs d'un élement <div> et ayant pour classe "ique".
var mon_objet_jquery = $("div > p.ique");

Le langage CSS offre suffisamment de flexibilité pour permettre une sélection fine et souple.
Que se passe-t-il dans la boîte ? Comme vous vous en doutiez, ces sélecteurs CSS n’ont aucun rapport avec l’interprétation CSS de votre navigateur.
jQuery va lire cette phrase et la transformer en sélection DOM, mixer cette joyeuse troupe d’une façon dont vous n’aurez absolument pas à vous préoccuper, pour vous retourner précisément le résultat de votre requête, et le tout soigneusement emballé dans un objet jQuery, poil au nombril.
Imaginez le cas suivant : vous souhaitez sélectionner tous les éléments p ayant pour classe « ique ».
On peut alors utiliser la méthode getElementsByTagName("p"), qui va nous retourner un tableau d’éléments p.
Nous pourrons ensuite trier ce tableau à l’aide d’une boucle, pour ne garder que ceux ayant pour classe « ique ». On imagine sans peine les quelques lignes nécessaires à une sélection pourtant triviale.