Découvrir et premier pas avec jQuery

logo-jquery

Durant mon Bachelor 2 Informatique, j’ai utiliser le framework jQuery. En plus, des cours dispensé au sein de ma formation, j’ai suivi le parcours Maîtriser l’utilisation des librairies jQuery et jQuery UI, disponible sur Linkedin Learning, dont voici le premier cours.

Découvrir jQuery

jQuery est une bibliothèque utilisé dans le développement d’application web. Il est très simple de la mettre en place, soit en utilisant une version locale, soit en utilisant un CDN (un serveur de distribution). Le code de jQuery est disponible en version compressé, c’est un fichier de code dépourvu d’espace, de retour chariot et avec des noms de variables très court afin de rendre le téléchargement et la lecture du fichier plus rapide pour le client.

<script type="text/javascript" src="../Commun/jquery-1.9.1.js"></script> <!-- Chargement de la version locale-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- Chargement de la version distante avec CDN-->

Il est très simple d’invoquer jQuery: on peut soit utiliser $() ou jQuery(). Si la première syntaxe est plus courte, elle n’est pas utilisable lorsque l’on utilise plusieurs bibliothèques, car plusieurs correspondent à cette invocation. On peut modifier le CSS d’un fichier HTML grâce à jQuery Sizzle.

<script>
	$('#b').css("font-style","italic");
        jQuery('#b').css("font-style","italic");
</script>

Premier pas avec les sélecteurs de jQuery

La première étape pour rendre un code performant, lisible et évolutif est de moduler son code. On va donc être amené à écrire notre code JavaScript contenant les appels à jQuery au sein d’un fichier qui sera appelé dans le <head> de notre document HTML. Cependant pour que les modifications s’appliquent, il est nécessaire d’appeler la fonction de modification uniquement lorsque le DOM (Document Object Model) est chargé. Pour cela on dispose de différents techniques:

  • lorsque la fenêtre est chargée avec window.onload = function(){};
  • lorsque le document est prêt (syntaxe longue) avec $(document).ready(function(e) {};
  • lorsque le document est prêt (syntaxe courte) avec $().ready(function(e) {};
  • avec une fonction auto-appelée avec $(function(e) {}
$(document).ready(function(e) {
    $('.a p.a').css("font-style","italic");
}); //Dans la classe a, les élèments p ayant pour attribut la classe a.

$(document).ready(function(e) {
    $('.a p').css("font-style","italic");
}); //Dans la classe a, les élèments p.

$(document).ready(function(e) {
    $('p .a').css("font-style","italic");
}); // Les classes a contenu dans les élèments p.

$(document).ready(function(e) {
    $('.a').css("font-style","italic");
}); // Les classes a.

$(document).ready(function(e) {
    $('p.a').css("font-style","italic");
}); // Les élements p ayant pour attribut la classe a

$(document).ready(function(e) {
    $('p.a', '.a').css("font-style","italic");
}); //Les élèments p ayant pour attribut la classe a dans le contexte d'une classe a.

$(document).ready(function(e) {
    $('p.a', '.a').css("font-style","italic");
}); //Les élèments p ayant pour attribut la classe a dans le contexte de l'élèment où je suis, ici tout document.

$(document).ready(function(e) {
    $('p.a', '.a').css("font-style","italic");
}); //Les élèments p ayant pour attribut la classe a dans le contexte du document.

Naviguer dans les contenus de jQuery

Dans jQuery il est possible de chaîner les propriétés pour effectuer plusieurs action à la suite en une seule commande. Cela permet notamment de faire une seule conversion du côté de jQuery.

$('p.a').css("font-style","italic")
$('p.a').css("font-size","1.2em")
$('p.a').addClass("c");

$('p.a')
    	.css("font-style","italic")
    	.css("font-size","1.2em")
    	.addClass("c");

$('p.a').css("font-style","italic").css("font-size","1.2em").addClass("c");
$('.d')
		.parent() //Récupére le parent de l'élèment.
		.prev() //Récupère l'élèment précédent dans le parent.
		.addClass('c')
$('p','.a')
		.children() //Récupére tous les enfants de l'élèment.
		.addClass('c')

$('.d')
	.siblings() //Récupère tous les élèments du même niveau que l'élèment sauf lui-même.
	.addClass('c')

Avec ce système de hiérarchie, on s’aperçoit que chaque élément peut contenir une liste d’élément, parmi lesquels ont peut se déplacer grâce à des propriétés assez intuitives: first() permet de sélectionner le premier élément, last() le dernier etc

$('p','.a')
    	.slice(1,2) //Sélectionne les élèments à partir de 1 jusqu'à 2 exclu.
    	.addClass('c')
$('p','.a')
    	.slice(-2) // Fonctionne comme précédement mais en partant de la fin de la liste d'élèment
    	.addClass('c')
$('p','.a')
    	.eq(0) //Permet de sélectionner l'élèment à l'index désigné s'il existe
    	.addClass('c')

$('p','.a')
    	.not(':first , :last') // Pas le premier de la liste d'élèment, ni le dernier
    	.addClass('c')

jQuery permet de travailler avec des boucles, notamment grâce à .each(function(index, element){}) qui permet de faire une boucle for...each sur chaque élément trouvé.

$('p','.a').each(function(index, element) {
     alert(index + "  -  " + element) //Affiche index et element dans une pop-up
    $(this).addClass('c') //Ajoute la classe c à l'élèment
    });

Manipuler les contenus de jQuery

On distingue 2 types de contenu: le contenu visible (texte, image, etc) et le contenu non-visible (sémantique, élément de code, etc).

On peut par exemple agir directement sur le contenu des éléments de la page. Par exemple, un titre a pour contenu du texte qui va être modifier grâce à la méthode .text(). Cette méthode renvoie la valeur du texte si il n’y a rien dans les parenthèses, à l’inverse si on passe une string en paramètre, alors on modifie directement le contenu du titre. Pour modifier le contenu d’une textarea ou d’un input on va utiliser la méthode .val() car il s’agit de champ qui ont des valeurs et non du texte.

On peut également manipuler directement le côté HTML d’un élément avec la méthode .html(). Cette fonction permet 3 différentes actions:

  • elle renvoit la valeur de l’HTML si aucun paramètre n’est fourni
  • elle modifie le HTML de l’élément de manière direct
  • elle peut utiliser une fonction anonyme pour modifier la contenu ‘visible’ du HTML d’un élèment
	$('li').html(
		function(index, source){
			//alert(index + '     ' + source)
			return (index + '     ' + source)
		}
	)

Il existe des fonctions de modification du contenu permettant d’insérer du contenu au sein d’un élément, par rapport à un élément, et de remplacer ou de supprimer des éléments.

$('.a').before('<li>Premier</li>') //Ajoute un élèment avant l'élèment sélectionner
$('.a').append(' <em>2ème</em>') //Ajoute à un élèment du contenu
$('<em>2ème</em>').appendTo('.a') // Ajoute du contenu à un élèment
$('ul').wrap('<nav class="b">') //Permet d'encapsuler l'élèment avec une nav
$('.a')
	.replaceWith('<li class="b">Premier</li>') //Remmplace le HTML de l'élèment par le nouveau HTML
$('li:first')	
	.remove() //Supprime l'élèment
$('ul').empty() //Permet de vider le contenu d'un élèment
$('p').each(function(index, element) {
        alert($(this).hasClass('a')) //Renvoi true lorsque l'élèment a une classe, même vide
    });
$('p').toggleClass('a') //Si l'élèment n'a pas la classe on l'ajoute sinon on la retire.

Il existe 2 méthodes pour modifier les attributs d’un élément: attr() et prop(). L’utilisation de l’un et de l’autre est strictement identique. prop() est plus utile pour des éléments contenant des booléens par exemple.

De la même manière, on peut utiliser un certain nombre de propriétés CSS directement par jQuery en particulier les valeurs calculées par le client.

Gérer les évènements de jQuery

Il existe plusieurs famille d’évènements en jQuery:

  • Les évènements du navigateur
  • Les gestionnaires d’évènements
  • Les étapes de chargement du document
  • Les évènements d’objet
  • Les évènements de formulaire
  • Les évènements de clavier
  • Les évènements de souris
$('a').click(function(e){
		alert("c'est cliké...")
	}) //Utilisation de l'évènement click avec une fonction anonyme

$('a').click(action)
function action(){
	alert("c'est cliké...")
}  //Utilisation de l'évènement click avec une fonction définit

$('a').bind("click",function(e){
	alert("oui il y a eu clic")
	$(this).unbind("click")
}) //On lie l'évènement click aux liens et on délie l'évènement à la fin après le click
$('a').click(function(e){
		alert("c'est cliké...")
		return false // Équivaut à la même chose que ce qui suit
		e.preventDefault() //Annule l'action par défaut prévu par le navigateur pour la balise
		e.stopPropagation() //Annule l'action par défaut prévu par le navigateur pour l'ensemble des balises touchés
	})

Les bases de l’animation de jQuery

Il existe 4 formes d’effets gérer par jQuery:

  • les effets basiques (Basic)
  • les effets personnalisés (Custom)
  • les effets d’effacement (Fading)
  • les effets de glisse (Sliding)
$('p').hide('fast')
  	$('h1').click(function(e){
  		$('p').slideToggle('slow') //Permet d'inverser l'état de slide
  	})

$('p').hide('slow') //Permet de cacher l'élément de manière lente
$('p').toggle('slow') //Permet d'inverser l'état show/hide
$('p').fadeToggle('slow') Permet d'inverser l'état de fade
.animate(
	{"top":"2em"}, "slow" //Ajoute une animation
)
.animate(
	{"left":"2em"}, {"queue":false, "duration":"slow"} //Cette animation va s'effectuer en même temps que la précédente car queue est mis à false, par défaut une succession d'animation sont mises dans une queue
)
      $('h1').click(function(e){
      $('p')
        .css("position","relative")
        .animate(
          {"top":"2em","left":"2em"}, "slow"
        )
        .animate(
          {"background-color":"rgba(140,0,0,0.16)"},"slow",function(e){
            alert("coucou")
          } //Utilisation d'une fonction callback qui exécuté lors de l'animation, une fois que celle-ci est lancée dans la queue
        )
    })

Sources

Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *