jQuery est une bibliothèque JavaScript rapide et concise créée par John Resig en 2006 avec une belle devise - Écrivez moins, faites plus. jQuery simplifie la traversée des documents HTML, la gestion des événements, l'animation et les interactions Ajax pour un développement Web rapide. jQuery est une boîte à outils JavaScript conçue pour simplifier diverses tâches en écrivant moins de code.
Voici la liste des fonctionnalités principales importantes prises en charge par jQuery -
DOM manipulation - Le jQuery a facilité la sélection des éléments DOM, les parcourir et la modification de leur contenu à l'aide du moteur de sélection open source multi-navigateurs appelé Sizzle.
Event handling - Le jQuery offre un moyen élégant de capturer une grande variété d'événements, comme un utilisateur cliquant sur un lien, sans avoir besoin d'encombrer le code HTML lui-même avec des gestionnaires d'événements.
AJAX Support - Le jQuery vous aide beaucoup à développer un site réactif et riche en fonctionnalités en utilisant la technologie AJAX.
Animations - Le jQuery est livré avec de nombreux effets d'animation intégrés que vous pouvez utiliser dans vos sites Web.
Lightweight - La jQuery est une bibliothèque très légère - environ 19 Ko en taille (Minifiée et gzippée).
Cross Browser Support - Le jQuery prend en charge plusieurs navigateurs et fonctionne bien dans IE 6.0+, FF 2.0+, Safari 3.0+, Chrome et Opera 9.0+.
Latest Technology - Le jQuery prend en charge les sélecteurs CSS3 et la syntaxe XPath de base.
Utilisez la fonction $ (document) .ready (). Tout ce qu'il contient se chargera dès que le DOM sera chargé et avant que le contenu de la page ne soit chargé.
JavaScript prend très bien en charge le concept Object. Vous pouvez créer un objet en utilisant le littéral objet comme suit -
var emp = {
name: "Zara",
age: 10
};Vous pouvez écrire et lire les propriétés d'un objet en utilisant la notation par points comme suit -
// Getting object properties
emp.name // ==> Zara
emp.age // ==> 10
// Setting object properties
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20Vous pouvez définir des tableaux en utilisant le littéral de tableau comme suit -
var x = [];
var y = [1, 2, 3, 4, 5];Un tableau a une propriété de longueur qui est utile pour l'itération. Nous pouvons lire les éléments d'un tableau comme suit -
var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
// Do something with x[i]
}Une fonction nommée a un nom lorsqu'elle est définie. Une fonction nommée peut être définie à l'aide du mot-clé de fonction comme suit -
function named(){
// do some stuff here
}Une fonction en JavaScript peut être nommée ou anonyme.
Une fonction anonyme peut être définie de la même manière qu'une fonction normale mais elle n'aurait pas de nom.
Oui! Une fonction anonyme peut être affectée à une variable.
Oui! Une fonction anonyme peut être transmise comme argument à une autre fonction.
Les arguments de variable JavaScript représentent les arguments passés à une fonction.
En utilisant l'opérateur typeof, nous pouvons obtenir le type d'arguments passés à une fonction. Par exemple -
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3En utilisant la propriété arguments.length, nous pouvons obtenir le nombre total d'arguments passés à une fonction. Par exemple -
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3L'objet arguments a une propriété callee, qui fait référence à la fonction dans laquelle vous êtes. Par exemple -
function func() {
return arguments.callee;
}
func(); // ==> funcJavaScript célèbre mot-clé qui fait toujours référence au contexte actuel.
La portée d'une variable est la région de votre programme dans laquelle elle est définie. La variable JavaScript n'aura que deux portées.
Global Variables - Une variable globale a une portée globale, ce qui signifie qu'elle est visible partout dans votre code JavaScript.
Local Variables- Une variable locale ne sera visible que dans une fonction où elle est définie. Les paramètres de fonction sont toujours locaux à cette fonction.
Une variable locale est prioritaire sur une variable globale du même nom.
Un rappel est une simple fonction JavaScript transmise à une méthode en tant qu'argument ou option. Certains rappels ne sont que des événements, appelés pour donner à l'utilisateur une chance de réagir lorsqu'un certain état est déclenché.
Les fermetures sont créées chaque fois qu'une variable définie en dehors de la portée actuelle est accessible depuis une certaine portée interne.
L'exemple suivant montre comment le compteur de variables est visible dans les fonctions de création, d'incrémentation et d'impression, mais pas en dehors d'elles -
function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1La méthode charAt () renvoie le caractère à l'index spécifié.
La méthode concat () renvoie le caractère à l'index spécifié.
La méthode forEach () appelle une fonction pour chaque élément du tableau.
La méthode indexOf () renvoie l'index dans l'objet String appelant de la première occurrence de la valeur spécifiée, ou −1 s'il n'est pas trouvé.
La méthode length () renvoie la longueur de la chaîne.
La méthode pop () supprime le dernier élément d'un tableau et renvoie cet élément.
La méthode push () ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.
reverse () méthode inverse l'ordre des éléments d'un tableau - le premier devient le dernier et le dernier devient le premier.
La méthode sort () trie les éléments d'un tableau.
La méthode substr () renvoie les caractères d'une chaîne commençant à l'emplacement spécifié jusqu'au nombre de caractères spécifié.
La méthode toLowerCase () renvoie la valeur de la chaîne appelante convertie en minuscules.
La méthode toUpperCase () renvoie la valeur de la chaîne appelante convertie en majuscules.
toString () renvoie la représentation sous forme de chaîne de la valeur du nombre.
Un sélecteur jQuery est une fonction qui utilise des expressions pour trouver les éléments correspondants d'un DOM en fonction des critères donnés. Vous pouvez simplement dire que les sélecteurs sont utilisés pour sélectionner un ou plusieurs éléments HTML à l'aide de jQuery. Une fois qu'un élément est sélectionné, nous pouvons effectuer diverses opérations sur cet élément sélectionné. Les sélecteurs jQuery commencent par le signe dollar et les parenthèses - $ ().
La fonction d'usine $ () est un synonyme de la fonction jQuery (). Donc, si vous utilisez une autre bibliothèque JavaScript où $ sign est en conflit avec quelque chose d'autre, vous pouvez remplacer $ sign par le nom jQuery et vous pouvez utiliser la fonction jQuery () au lieu de $ ().
$ ('tag-name') sélectionne tous les éléments de type tag-name dans le document. Par exemple, $ ('p') sélectionne tous les paragraphes <p> dans le document.
$ ('# some-id') sélectionne l'élément unique dans le document qui a un ID de some-id.
$ ('. some-class') sélectionne tous les éléments du document qui ont une classe de some-class.
$ ('*') sélectionne tous les éléments disponibles dans un DOM.
$ ('E, F, G') sélectionne les résultats combinés de tous les sélecteurs spécifiés E, F ou G où les sélecteurs peuvent être n'importe quel sélecteur jQuery valide.
La méthode attr () peut être utilisée pour récupérer la valeur d'un attribut à partir du premier élément de l'ensemble correspondant.
La méthode attr (nom, valeur) peut être utilisée pour définir l'attribut nommé sur tous les éléments de l'ensemble encapsulé à l'aide de la valeur transmise.
La méthode addClass (classes) peut être utilisée pour appliquer des feuilles de style définies sur tous les éléments correspondants. Vous pouvez spécifier plusieurs classes séparées par un espace.
La méthode removeAttr (name) peut être utilisée pour supprimer un attribut de chacun des éléments correspondants.
La méthode hasClass (class) retourne true si la classe spécifiée est présente sur au moins l'un des éléments correspondants.
La méthode removeClass (class) supprime tout ou la ou les classes spécifiées de l'ensemble des éléments correspondants.
La méthode toggleClass (class) ajoute la classe spécifiée si elle n'est pas présente, supprime la classe spécifiée si elle est présente.
La méthode html () récupère le contenu html (innerHTML) du premier élément correspondant.
La méthode html (val) définit le contenu html de chaque élément correspondant.
La méthode text () obtient le contenu textuel combiné de tous les éléments correspondants.
Le texte (val) définit le contenu du texte de tous les éléments correspondants.
La méthode val () obtient la valeur d'entrée du premier élément correspondant.
La méthode val (val) définit l'attribut value de chaque élément correspondant s'il est appelé sur <input> mais s'il est appelé sur <select> avec la valeur <option> passée, l'option transmise serait sélectionnée, si elle est appelée sur case à cocher ou case radio, alors toutes les cases à cocher et radiobox correspondants seraient cochés.
La méthode filter (selector) peut être utilisée pour filtrer tous les éléments de l'ensemble des éléments correspondants qui ne correspondent pas au (x) sélecteur (s) spécifié (s). Le sélecteur peut être écrit en utilisant n'importe quelle syntaxe de sélecteur.
La méthode eq (index) réduit l'ensemble des éléments correspondants à un seul élément.
La méthode is (selector) vérifie la sélection actuelle par rapport à une expression et renvoie true, si au moins un élément de la sélection correspond au sélecteur donné.
La méthode not (selector) supprime les éléments correspondant au sélecteur spécifié de l'ensemble des éléments correspondants.
La méthode slice (sélecteur) sélectionne un sous-ensemble des éléments correspondants.
La méthode add (selector) ajoute plus d'éléments, mis en correspondance par le sélecteur donné, à l'ensemble des éléments correspondants.
La méthode andSelf () ajoute la sélection précédente à la sélection actuelle.
La méthode children ([selector]) obtient un ensemble d'éléments contenant tous les enfants immédiats uniques de chacun des ensembles d'éléments correspondants.
La méthode la plus proche (sélecteur) obtient un ensemble d'éléments contenant l'élément parent le plus proche qui correspond au sélecteur spécifié, l'élément de départ inclus.
La méthode contents () trouve tous les nœuds enfants à l'intérieur des éléments correspondants (y compris les nœuds de texte), ou le document de contenu, si l'élément est une iframe.
La méthode end () rétablit l'opération «destructrice» la plus récente, en changeant l'ensemble des éléments correspondants à son état précédent.
La méthode find (selector) recherche les éléments descendants qui correspondent aux sélecteurs spécifiés.
Le suivant ([sélecteur]) obtient un ensemble d'éléments contenant les frères et sœurs suivants uniques de chacun des ensembles d'éléments donnés.
NextAll ([selector]) trouve tous les éléments frères après l'élément courant.
La méthode offsetParent () renvoie une collection jQuery avec le parent positionné du premier élément correspondant.
La méthode parent ([selector]) obtient le parent direct d'un élément. S'il est appelé sur un ensemble d'éléments, parent renvoie un ensemble de leurs éléments parents directs uniques.
La méthode parents ([selector]) obtient un ensemble d'éléments contenant les ancêtres uniques de l'ensemble d'éléments correspondant (à l'exception de l'élément racine).
La méthode prev ([selector]) obtient un ensemble d'éléments contenant les frères et sœurs précédents uniques de chacun des ensembles d'éléments correspondants.
La méthode prevAll ([selector]) recherche tous les éléments frères devant l'élément courant.
La méthode siblings ([selector]) obtient un ensemble d'éléments contenant tous les frères uniques de chacun des ensembles d'éléments correspondants.
La méthode css (name) renvoie une propriété de style sur le premier élément correspondant.
La méthode css (nom, valeur) définit une propriété de style unique sur une valeur sur tous les éléments correspondants.
La méthode height (val) définit la hauteur CSS de chaque élément correspondant.
La méthode height () obtient le pixel actuel calculé, la hauteur du premier élément correspondant.
La méthode innerHeight () obtient la hauteur intérieure (exclut la bordure et inclut le remplissage) pour le premier élément correspondant.
La méthode innerWidth () obtient la largeur intérieure (exclut la bordure et inclut le remplissage) pour le premier élément correspondant.
La méthode offset () obtient le décalage actuel du premier élément correspondant, en pixels, par rapport au document.
La méthode offsetParent () renvoie une collection jQuery avec le parent positionné du premier élément correspondant.
La méthode externalHeight ([margin]) obtient la hauteur extérieure (inclut la bordure et le remplissage par défaut) pour le premier élément correspondant.
La méthode externalWidth ([margin]) obtient la largeur extérieure (inclut la bordure et le remplissage par défaut) pour le premier élément correspondant.
La méthode position () obtient la position supérieure et gauche d'un élément par rapport à son parent offset.
La méthode width (val) définit la largeur CSS de chaque élément correspondant.
La méthode width () obtient la largeur actuelle, en pixels, calculée du premier élément correspondant.
La méthode empty () supprime tous les nœuds enfants de l'ensemble des éléments correspondants.
La méthode remove (expr) supprime tous les éléments correspondants du DOM.
La méthode preventDefault () de l'objet Event empêche le navigateur d'exécuter l'action par défaut.
La méthode isDefaultPrevented () de l'objet Event retourne si event.preventDefault () a été appelée sur cet objet événement.
La méthode stopPropagation () de l'objet Event arrête la diffusion d'un événement vers les éléments parents, empêchant ainsi les gestionnaires parents d'être avertis de l'événement.
La méthode isPropagationStopped () de l'objet Event retourne si event.stopPropagation () a été appelée sur cet objet événement.
La méthode stopImmediatePropagation () de l'objet Event arrête l'exécution du reste des gestionnaires.
La méthode isImmediatePropagationStopped () de l'objet Event retourne si event.stopImmediatePropagation () a été appelée sur cet objet événement.
La fonction bind (type, [data], fn) lie un gestionnaire à un ou plusieurs événements (comme click) pour chaque élément correspondant. Peut également lier des événements personnalisés.
La fonction ready (fn) lie une fonction à exécuter chaque fois que le DOM est prêt à être parcouru et manipulé.
La méthode load (url, [data], [callback]) charge le HTML à partir d'un fichier distant et l'injecte dans le DOM.
La méthode ajaxComplete (callback) peut être utilisée pour enregistrer un rappel à exécuter chaque fois qu'une requête AJAX se termine.