Formation Apprendre le JavaScript (ES5) : Découverte de jQuery

Si vous commencez à faire des recherches en ligne sur le JavaScript il y a de fortes chance que vous tombiez sur des questions concernant la librairie jQuery. Cette librairie est extrèmement populaire, au point qu'il est difficile de trouver un plugin qui ne l'utilise pas.

Qu'est ce que jQuery ?

Comme son slogan l'indique jQuery est une librairie qui permet de simplifier l'écriture de code JavaScript gràce à l'utilisation de nombreuses méthodes.

Write less, do more

Par exemple si je souhaite écouter le clic sur plusieurs liens et changer la couleur des liens

var elements = document.querySelectorAll('.tabs a')
for (var i = 0; i < elements.length; i++) {
  var element = elements[i]
  element.addEventListener('click', function (e) {
    e.preventDefault()
    alert('Ne me quitte pas !')
  })
  element.style.color = "#FF0000"
}

En utilisant jQuery ce code peut être simplifié :

$('.tabs a').click(function (e) {
  e.preventDefault()
  alert('Ne me quitte pas !')
}).css('color', '#FF0000')

L'autre point intéréssant concerne la compatibilité des navigateurs (oui Internet Explorer je pense à toi ;)). L'ensemble des méthodes proposées sont testées sur la pluspart des navigateurs modernes. SI vous voulez supporter les dinosaures (Internet explorer 6 à 8) vous pouvez utiliser la version version 1.12.

Vous n'en avez peut être pas besoin

Si vous n'êtes pas intéréssé par la compatibilité avec les anciens navigateurs alors ne vous jettez pas forcément sur cette librairie. En effet, le JavaScript côté navigateur s'est grandement simplifié et dans beaucoup de cas maintenant le code "natif" est aussi court que le code avec jQuery. Par exemple pour ajouter une class à un élément il fallait faire (IE9-) :

var cls = 'active'
var element = document.getElementsByClassName('#menu')
if (element.className.length == 0){
  element.className = cls;
} else if (rows.className.indexOf(cls) < 0) {
  element.className += ' ' + cls;
}

Ce que jQuery simplifie grandement

$('#menu').addClass('active')

Si on décide de ne supporter qu'Internet explorer 10+ on arrive à un code qui est tout aussi simple.

document.querySelector('#menu').classList.add('active')

Donc avant de rajouter 90k de JavaScript dans votre application réfléchissez bien à vos besoins.