JSB Library

$

Outil principal du langage. Ce couteau suisse est à la fois le constructeur, sélecteur et support de la bibliothèque.

Utilisation en sélecteur :

$('#monid .maclass, p a.autreclasse')

Ceci va sélectionner les balises de classe "maclasse" contenu dans la balise d'id "monid" et les balise <a> de classe "autreclasse" contenues dans des balises <p>.

Le tout est retournée sous forme de variable objet (de classe $$) contenant l'attribut elts qui lui-même contient un array listant tous les éléments sélectionnés.

Plus de détails sur la page Sélection.

Utilisation en constructeur :

$($('#element'),
$($('div.maclasse',{style:'background:yellow;'}),
'Mon texte'
)
);

En considérant le code HTML suivant :

<div id="element">
<div>Premier div</div>
<div>Second div</div>
</div>
<div>
<input type="button" value="Ajouter un div de classe maclasse" />
</div>
<script type="text/javascript">
$('input').click(function (){
$($('#element'),
$($('div.maclasse',{style:'background:yellow;'}),
'Mon texte'
)
);
});
</script>

Alors lors du clic sur le bouton, une div de classe "maclasse", de fond jaune et contenant "Mon texte" sera ajouté au bloc #element. Testez :

Premier div

Second div

Plus de détails sur la page Construction.

Enfin, l'outil $ permet de retarder l'exécution d'un code jusqu'à ce que le document soit prêt :

// Le code ici s'exécutera dès que le script est chargé
$(function (){
// Le code ici s'exécutera une fois la page chargée
});

Ceci est utile par exemple si votre script se trouve dans la balise <head> de votre document et qu'il fait appel à des éléments de la page qui ne sont donc pas encore chargés lorsque le script est lu.

N'oubliez pas cependant que pour charger le contenu plus vite, il est recommandé de placer vos balises <script> avant la fermeture </body>.