jQuery

Les différents types de sélecteurs

Sélecteurs simples

<script type="text/javascript">
	$('*');
	$('p');
	$('img');
</script>

Sélecteurs d'attributs

<script type="text/javascript">
	$('p[name]');					// Tous les paragraphes ayant un attribut name
	$('*[name]');					// Toutes les balises ayant un attribut name
	$('p[name="Bernie Anglade"]');	// Tous les paragraphes ayant un attribut name="Bernie Anglade" (valeur exacte)
	$('p[name=Bernie]');			// Tous les paragraphes ayant un attribut name="Bernie" (valeur exacte)
	$('p[name~="Bernie"]');		// Tous les paragraphes ayant un attribut name contenant la valeur Bernie délimitée par des espaces
	$('p[name][job]');				// Tous les paragraphes ayant un attribut name et un attribut job
	$('p[name^="Ber"]');			// Tous les paragraphes ayant un attribut name dont la valeur commence par Ber
	$('p[name$="nie"]');			// Tous les paragraphes ayant un attribut name dont la valeur se termine par ion
	$('p[name*="erni"');			// Tous les paragraphes ayant un attribut name dont la valeur contient erni
</script>

Sélecteurs de classe

<script type="text/javascript">
	$('p[class~="rotation"');		// Tous les paragraphes ayant la classe CSS rotation
	$('p.rotation');				// Équivalent
	$('p.translation.rotation');	// Tous les paragraphes ayant les classes CSS translation et rotation
	$('*.rotation');				// Tous les éléments ayant la classe CSS rotation
	$('.rotation');				// Équivalent
</script>

Sélecteurs d'identifiant

<script type="text/javascript">
	$('p[id="idpara1"]');		// Tous les paragraphes ayant un attribut id possédant la valeur idpara1
	$('p[id=idpara1]');		// Équivalent
	$('p#idpara1');			// Le premier paragraphe ayant un attribut id possédant la valeur idpara1
	$('*[id=idpara1]');		// Tous les éléments ayant un attribut id possédant la valeur idpara1
	$('*#idpara1');			//  Le premier élément ayant un attribut id possédant la valeur idpara1
	$('#idpara1');				// Équivalent
</script>

Les pseudo-classes

Pseudo-classes générales

<script type="text/javascript">
	$('*:first-child');				// Premier élément de l'élément père
	$('*:last-child');					// Dernier élément de l'élément père
	$('*:nth-child(an+b)');			// (an+b)ième enfant de l'élément père
	$('*:nth-child(2n)');				// Éléments pair
	$('*:nth-child(even)');			// Éléments pair
	$('*:nth-child(2n+1)');			// Éléments impair
	$('*:nth-child(odd)');				// Éléments impair
	$('*:nth-child(0n+5)');			// Cinquième élément
	$('*:nth-child(-1n+5)');			// Cinq premiers éléments
	$('*:only-child');					// Élément unique
	$('*:first-child:last-child');		// Élément unique
	$('*:not(:last-child)');			// Tous les éléments sauf le dernier
	$('*:empty');						// Éléments vides
	$('*:eq(n)');						// (n)iéme élément
	$('*:gt(n)');						// A partir du (n)ième élément exclu
	$('*:lt(n)');						// Du premier au (n)ième élément exclu
	$('*:first');						// Premier élément
	$('*:last');						// Dernier élément
	$('*:parent');						// Éléments non vide
	$('*:contains("Bernie")');			// Éléments contenant Bernie
	$('*:contains(Bernie)');			// Éléments contenant Bernie
	$('*:has(b)');						// Éléments contenant la balise <b></b>
	$('p:has(b:contains("Bernie"))');	// Tous les paragraphes contenant le texte Bernie mis en gras
	$('*:hidden');						// Éléments cachés
	$('*:visible');					// Éléments visibles
	$('*:header');						// Titres (h1 à h6)
	$('*:animated');					// Éléments animés
</script>

Pseudo-classes liées aux formulaires

<script type="text/javascript">
	:input			// <input>,<textarea>,<select>,<button>
	:text			// <input type="text">
	:password		// <input type="password">
	:radio			// <input type="radio">
	:checkbox		// <input type="checkbox">
	:submit		// <input type="submit">
	:image			// <input type="image">
	:reset			// <input type="reset">
	:button		// <input type="button">
	:file			// <input type="file">
	:disabled		// <input type="text" disabled="disabled" />
	:enabled		// disabled="disabled" non présent
	:checked		// <input type="checkbox" checked="checked" />
	:selected		// <option selected="selected"></option>
</script>

Les combinateurs

Combinateurs de descendance

<script type="text/javascript">
	$('div h1');			// h1 ayant un élément div parent
	$('div h1.red');		// h1 de classe CSS red ayant un élément div parent
	$('div * h1');			// h1 ayant un élément div parent, mais pas en fils direct
	$('div > h1);			// h1 fils direct d'une élément div
</script>

Combinateurs d'adjacense

<script type="text/javascript">
	$('h1 + h2');				// h2 suivant directement un élément h1
	$('h1 ~ h2');				// h2 suivant un élément h1
</script>

Les sélecteurs multiples

<script type="text/javascript">
	$('selecteur1, selecteur2, selecteur3, ...');
	$('p, img, span');		// Sélectionne les éléments p, img et span
</script>

Les différentes formes de la fonction jQuery()

$(selector, context)

<script type="text/javascript">
	$("p:even", document.getElementById("myId"));		// La recherche s'effectue à partir de l'élément context
</script>

$(element)

<script type="text/javascript">
	$(document.getElementById("myId"));
</script>

$(elements)

<script type="text/javascript">
	$([document.getElementById("myId1"), document.getElementById("myId2")]);
</script>

$(jQueryObject)

<script type="text/javascript">
	var obj1 = $("p");
	var obj2 = $(obj1);
	obj2.css ({ "background-color" : "black", color : "white" });
</script>

$(html)

<script type="text/javascript">
	var obj1 = $("<p>para1</p><p>para2</p>");
	obj1.appendTo ("body"); // insérer les éléments HTML en fin de <body>
</script>

Les méthodes d'accès au DOM

Supprimer des éléments dans la liste

<script type="text/javascript">
	// filter (selecteur)
	$("p").filter (":contains(2)").css ("display","none");		// Sélectionne les paragraphes contenant "2"

	// filter (callback)
	$("p").filter (function (index) {
		if (index > 0) return true;							// Sélectionne uniquement les éléments à true
	}).css ("display","none");

	// not (elements)
	$(document.getElementById("p2")).not (p).css ("display","none");	// Exclu p2 de la liste des paragraphes sélectionnés

	// has (selecteur)
	$("div").has ("p:contains(4)").css ("display","none");		// Conserve seulement les divs contenant un paragraphe incluant le texte 4

	// slice (startIndex, endIndex)
	$("p").slice (2, 4).css ("display","none");			// Sélectionne les paragraphes ayant l'indice 2 exclu à 4

	// eq (index)
	$("p").eq (2).css ("display","none");					// Conserve uniquement l'élément situé à l'index 2

	first ()
	$("p").first ().css ("display","none");				// Conserve uniquement le premier élément

	last ()
	$("p").last ().css ("display","none");					// Conserve uniquement le dernier élément
</script>

Requêtes serveur avec Ajax

Options disponibles

<script type="text/javascript">
	// Configuration générale de la requête
	options.url					// URL du programme sur le serveur qui traite le requête
	options.data				// Objet ou chaîne de caractères transmis au serveur
	options.context				// Object considéré comme this dans les fonctions de callback
	options.type				// Mode de transmission des paramètres "post" ou "get"
	options.dataType			// Type souhaité des données retournées par le serveur "text", "xml", "html", "script", ou "json"

	// Fonctions de callback permettant un traitement
	options.beforeSend			// Appelée avant que la requête Ajax ne soit effectuée
	options.dataFilter			// Appelée lorsque la requête Ajax a réussi
	options.success				// Appelée lorsque la requête Ajax a réussi
	options.error				// Appelée lorsque la requête Ajax produit une erreur
	options.complete			// Appelée à la fin de la requête Ajax

	// Paramétrage du serveur
	options.username			// Nom d'utilisateurs à indiquer si le serveur nécessite une autorisation
	options.password			// Mot de passe associé
	options.timeout				// Délai maximum en ms avant d'échouer la requête et d'appeler options.error
</script>

Séquence d'appel des fonctions de callback

<script type="text/javascript">
	var txt = "";

	$.ajax ({
		url: "action.php",				// URL de la page de traitement sur le serveur
		succes: function () {
			txt += "success \n";
		},
		error: function () {			// Fonction appellée lorsque la requête Ajax a produit une erreur
			txt += "error \n";
		},
		beforeSend: function () {		// Fonction appellée avant que la requête Ajax ne soit effectuée
			txt += "beforeSend \n";
		},
		dataFilter: function () {		// Fonction appellée lorsque la requête Ajax a réussi
			txt += "dataFilter \n";
		},
		complete: function () {			// Fonction appellée à la fin de la requête Ajax (réussi ou non)
			txt += "complete \n";

			alert (txt);
		}
	});
</script>

<?php
	echo $txt = utf8_encode("<p>Réponse du serveur</p>");
?>

Traiter la réponse du serveur

<script type="text/javascript">
	var txt = "";

	$.ajax ({
		url: "action.php",						// URL de la page de traitement sur le serveur
		complete: function (xhr, result) {		// Fonction appellée à la fin de la requête Ajax (réussi ou non)
			if (result != "success") return;
			var response = xhr.responseText;
			$("body").html (response);
		}
	});
</script>

<?php
	echo $txt = utf8_encode("<p>Réponse du serveur</p>");
?>

Transmettre des paramètres au serveur

<input type="text" id="idtext">
<input type="button" id="idbutton" value="valider">

<script type="text/javascript">
	$("#idbutton").click (function (event) {
		var value = $("#idtext").val ();
		var data = { send : value };

		$.ajax ({
			url: "action.php",
			data: data,
			complete: function (xhr, result) {
				if (result != "success") return;
				var response = xhr.responseText;
				$("body").append (response);
			}
		});
	});
</script>

<?php
	$send = utf8_decode ($_REQUEST["send"]);

	$txt = "<p>Le texte envoyé est: $send</p>";
	echo $txt = utf8_encode($txt);
?>

Évenements Ajax

<script type="text/javascript">
	$("body").ajaxStart (function() {			// Appellé lorsqu'une requête Ajax est envoyée, si aucune autre n'est en cours
		$(this).append (<p>ajaxStart</p>);
	});

	$("body").ajaxStop (function() {			// Appellé lorsque la dernière requête Ajax est terminée
		$(this).append (<p>ajaxStop</p>);
	});

	$("body").ajaxComplete (function() {		// Appellé lorsqu'une requête Ajax est terminé (succès ou non)
		$(this).append (<p>ajaxComplete</p>);
	});

	$("body").ajaxSend (function() {			// Appellé lorsqu'une requête Ajax est envoyée, même si une autre est déja en cours
		$(this).append (<p>ajaxSend</p>);
	});

	$("body").ajaxSuccess (function() {			// Appellé lorsqu'une requête Ajax s'est terminé avec succès
		$(this).append (<p>ajaxSuccess</p>);
	});

	$("body").ajaxError (function() {			// Appellé lorsqu'une requête Ajax s'est terminé par une erreur
		$(this).append (<p>ajaxError</p>);
	});
</script>

Formulaires

Désactiver l'envoi

<script type="text/javascript">
    $('#formulaire').on('submit', function(e) {
        e.preventDefault();
    });
</script>

Soumettre un formulaire

<script type="text/javascript">
    $('#formulaire').on('submit', function(e) {
        document.nom_du_formulaire.submit();
    });
</script>

Divers

Tester l'existence d'un élément

<script type="text/javascript">
	var element = $("#id");
	if(element.length){
		//L'élément existe
	} else {
		//L'élément n'existe pas
	}

	var element = $("#id").first();
	var element = $("#id").last();
	var element = $("#id").eq(0);
</script>

DataTable

How to redraw DataTable with new data

$('#upload-new-data').on('click', function () {
   datatable.clear().draw();
   datatable.rows.add(NewlyCreatedData); // Add new data
   datatable.columns.adjust().draw(); // Redraw the DataTable
});