Tweet
Le web est en plaine évolution vers le 2.0, les nouvelles technologies tel l’AJAX ou le CSS3 nous facilitent toujours plus la tâche !
Parmi elles, jQuery; une merveilleuse librairie qui nous fera coder avec plaisir !
jQuery ! Vous avez sûrement tous déjà utilisé une librairie JavaScript (Prototype, mootools…), et bien, jQuery en est une ! selon moi c’est la meilleure car ça rend le code lisible et logique !
Combien de temps vous avez perdu pour rendre votre code compatible tous navigateurs ?
Combien de temps vous avez perdu pour débugger votre code ?
Donc, le rôle d’une librairie JS est de vous faire gagner du temps ! (et donc du Loullou
)
Commencez par télécharger la dernière version de jQuery, puis dans votre page html, insérez cette ligne dans le <head>
Pour vous montrer son efficacité, prenez par exemple ces quelques lignes de code :
Supposons que vous vouliez utiliser JavaScript pour changer la couleur de fond du premier élément de liste d’éléments <li> dans la liste non-ordonnée ci-dessus. Utilisation pure JavaScript, votre code devrait ressembler à quelque chose comme ça:
Je trouve que c’est long et pas beau à écrire !
Avec jQuery, vous ferez ça en une ligne, admirez le résultat !
Je vais pas vous écrire toute la doc, mais je vous donne les liens
Documentation jQuery (Fr)
Documentation jQuery (En)
Sur ce, je vous quitte, et je vous laisse découvrir la magie de jQuery !
Parmi elles, jQuery; une merveilleuse librairie qui nous fera coder avec plaisir !
jQuoi ?
jQuery ! Vous avez sûrement tous déjà utilisé une librairie JavaScript (Prototype, mootools…), et bien, jQuery en est une ! selon moi c’est la meilleure car ça rend le code lisible et logique !
Pourquoi une librairie JavaScript ?
Combien de temps vous avez perdu pour rendre votre code compatible tous navigateurs ?
Combien de temps vous avez perdu pour débugger votre code ?
Donc, le rôle d’une librairie JS est de vous faire gagner du temps ! (et donc du Loullou
)Comment obtenir jQuery ?
Commencez par télécharger la dernière version de jQuery, puis dans votre page html, insérez cette ligne dans le <head>
Code:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
Un exemple !
Pour vous montrer son efficacité, prenez par exemple ces quelques lignes de code :
Code:
<ul> <li>texte ici</li> <li>texte ici</li> <li>texte ici</li> <li>texte ici</li> <li>texte ici</li> </ul>
Code:
var myList = document.getElementsByTagName("ul");
for(var i = 0; i < myList.length; i++) {
if (myList[i].className === "list") {
myList[i].childNodes[0].style.backgroundColor = "blue";
}
}
Avec jQuery, vous ferez ça en une ligne, admirez le résultat !
Code:
$("ul.list li:first-child").css("background-color, "blue");
Documentation jQuery (Fr)
Documentation jQuery (En)
Sur ce, je vous quitte, et je vous laisse découvrir la magie de jQuery !
Commentaire