Méthode jQuery() - noyau jQuery
Exemple
Trouver tous les éléments p qui sont des éléments enfants de l'élément div, puis définir sa propriété de bordure :
$("div > p").css("border", "1px solid gray");
Définition et utilisation
La méthode jQuery() accepte une chaîne de caractères qui contient un sélecteur CSS pour correspondre à un ensemble d'éléments.
La fonction jQuery() a trois syntaxes :
Syntaxe 1
Accepte une chaîne de caractères qui contient un sélecteur CSS pour correspondre à un ensemble d'éléments :
jQuery(selector, [context]
Syntaxe 2
Créer des éléments DOM en utilisant une chaîne de caractères HTML originale :
jQuery(html,ownerDocument]
Syntaxe 3
Lié une fonction à exécuter après que le document DOM soit chargé :
jQuery( callback )
jQuery( selector, [ context ] )
Cette syntaxe a plusieurs utilisations :
Utilisation 1 : Définir l'environnement du sélecteur
Syntaxe
jQuery(selector, [context]
Par défaut, le sélecteur recherche le DOM à partir de la racine du document. Cependant, vous pouvez définir un paramètre context optionnel pour $().
Par exemple, si nous voulons chercher un élément dans un callback, nous pouvons limiter la recherche suivante :
Exemple
$("div.foo").click(function() {
$("span", this).addClass("bar");
);
Puisque nous avons limité le sélecteur span à cet environnement this, seuls les span de l'élément cliqué recevront la classe ajoutée.
En interne, l'environnement de sélecteur est mis en œuvre par la méthode .find(), donc $("span", this) est équivalent à $(this).find("span").
Toutes les fonctionnalités centrales de jQuery sont mises en œuvre par cette fonction. Tout dans jQuery est basé sur cette fonction, ou utilise cette fonction de manière ou autre. L'utilisation la plus basique de cette fonction consiste à lui passer une expression (généralement composée d'un sélecteur CSS), puis à rechercher tous les éléments correspondants selon cette expression.
Par défaut, si le paramètre context n'est pas spécifié, $() cherche des éléments DOM dans le document HTML courant ; si le paramètre context est spécifié, comme un ensemble d'éléments DOM ou un objet jQuery, les éléments seront recherchés dans ce contexte. Depuis jQuery 1.3.2, l'ordre des éléments retournés est équivalent à l'ordre d'apparition dans le contexte.
Utilisation 2 : Utiliser un élément DOM
Syntaxe
jQuery(element)
Cette fonction nous permet de créer un objet jQuery en utilisant un élément DOM trouvé de manière autre. Une utilisation courante de cette fonction est d'appeler une méthode jQuery sur un élément qui a été passé au callback fonction via le mot-clé this :
Exemple
$("div.foo".click(function() {
$(this).slideUp();
);
Dans cet exemple, une animation de glissement est utilisée pour cacher l'élément lorsque celui-ci est cliqué. Comme le gestionnaire d'événement accepte l'élément cliqué sous la forme d'un élément DOM pur dans le mot-clé this, il est nécessaire de l'envelopper par un objet jQuery avant de l'appeler.
Cette fonction peut également accepter des documents XML et des objets Window (bien qu'ils ne soient pas des éléments DOM) comme paramètres valides.
Lorsque des données XML sont retournées par une appelle Ajax, nous pouvons utiliser la fonction $() pour envelopper ces données via un objet jQuery. Une fois cela fait, nous pouvons utiliser .find() et d'autres méthodes de parcourir le DOM pour récupérer des éléments individuels dans la structure XML.
Utilisation 3 : Cloner un objet jQuery
Syntaxe
jQuery(objet jQuery)
Lorsque l'on passe un objet jQuery sous forme de paramètre à la fonction $(), une copie de cet objet est créée. Comme l'objet initial, le nouveau jQuery object pointe vers le même élément DOM.
Utilisation 4 : retourner un ensemble vide
Syntaxe
jQuery()
Pour jQuery 1.4, l'appel de la méthode jQuery() sans paramètres retourne un ensemble jQuery vide. Dans les versions précédentes de jQuery, cela retourne un ensemble contenant le nœud document.
jQuery( html, [ ownerDocument ] )
Cette syntaxe a plusieurs utilisations :
Utilisation 1 : création d'un nouvel élément
Syntaxe
jQuery(html,ownerDocument]
Vous pouvez passer une chaîne de caractères HTML écrite à la main, ou une chaîne créée par certains moteurs de templates ou plugins, ou une chaîne chargée via AJAX. Cependant, il y a des limitations lors de la création d'éléments input, voir l'exemple deuxièmement.
Bien sûr, cette chaîne peut contenir des barres obliques (par exemple, une adresse d'image), ainsi que des barres obliques inversées. Lorsque vous créez un seul élément, utilisez des balises fermées ou le format XHTML. Par exemple, pour créer un span, vous pouvez utiliser $("<span/>") ou $("<span></span>"), mais il n'est pas recommandé d'utiliser $("<span>")). Dans jQuery, cette syntaxe est équivalente à $(document.createElement("span"))).
Si vous passez une chaîne de caractères en tant que paramètre à $(), jQuery vérifie si la chaîne est un HTML (par exemple, si certains endroits de la chaîne contiennent des balises). Si ce n'est pas le cas, la chaîne est interprétée comme une expression de sélecteur, voir l'explication ci-dessus. Mais si la chaîne est un fragment HTML, jQuery essaie de créer un élément DOM décrit par ce fragment HTML. Ensuite, il crée et retourne un objet jQuery qui fait référence à ces éléments DOM :
Exemple
$("<p id="test">Mon <em>texte</em> nouveau</p>").appendTo("body");
Si le fragment HTML est plus complexe que le simple balise sans attribut, comme dans l'exemple ci-dessus, le processus réel de création de l'élément est réalisé par le mécanisme innerHTML du navigateur. En d'autres termes, jQuery crée un nouvel élément <div>, puis définit l'attribut innerHTML de l'élément pour le fragment HTML fourni. Lorsque le paramètre est une simple balise, par exemple $("<img />") ou $("<a></a>"), jQuery crée l'élément à l'aide de la fonction createElement() native JavaScript.
Pour assurer la compatibilité plate-forme, la structure des fragments doit être bien structurée. Les balises qui peuvent contenir d'autres éléments doivent apparaître en paires (avec des balises de fermeture) :
$("<a href="http://jquery.com"></a>");
Cependant, jQuery permet également une syntaxe de balise similaire à XML :
$("<a/>");
Les balises qui ne peuvent pas contenir d'autres éléments peuvent être fermées ou non :
$("<img />");
$("<input>");
Utilisation 2 : Définir les attributs et les événements
Syntaxe
jQuery(html,props)
Pour jQuery 1.4, nous pouvons passer une carte d'attributs en tant que second paramètre. Ce paramètre accepte un ensemble supérieur d'attributs qui peuvent être passés à la méthode .attr(). De plus, vous pouvez passer n'importe quel type d'événement et appeler les méthodes suivantes de jQuery : val, css, html, text, data, width, height, ou offset.
Notez que Internet Explorer ne permet pas de créer un élément input et de changer son type ; vous devez utiliser par exemple "<input type="checkbox" />" pour définir le type.
Exemple
Crée un élément <input>, en définissant également l'attribut type, les valeurs des attributs, ainsi que certains événements.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Permet de lier une fonction à exécuter après que le document DOM soit chargé.
L'action de cette fonction est similaire à $(document).ready(), mais lors de l'utilisation de cette fonction, il est nécessaire de wrapping toutes les autres opérations $() nécessaires pour l'exécution après le chargement du DOM dans celle-ci. Bien que techniquement lié, ce type de liaison est rarement utilisé.
Exemple
Lorsque le chargement du DOM est terminé, exécutez les fonctions suivantes :
$(function(){
// Prêt du document
);
