Résumé de l'utilisation de l'instance de filtre jquery

Dans les applications Web, la plupart des opérations côté client sont basées sur des opérations sur les objets. Pour faire fonctionner un objet, vous devez d'abord obtenir l'objet. jQuery fournit un sélecteur puissant pour nous permettre d'obtenir l'objet. Le sélecteur jQuery est divisé en deux parties : les objets de sélection et les conditions de filtre. La sélection d'un objet indique quel objet doit être obtenu, et la condition de filtrage est de filtrer les objets obtenus et finalement de laisser les objets qui répondent à certaines caractéristiques.

1. Sélectionnez l'objet

1). Basic

·#id correspond à un élément en fonction de l'ID donné. Par exemple : $("#id")
·element correspond à tous les éléments en fonction du nom d'élément donné. Par exemple : $("p")
·.class correspond aux éléments basés sur la classe donnée. Par exemple : $(".style1");
·* correspond à tous les éléments. Par exemple : $("*")
·selector1,selector2,selectorN combinera les éléments correspondant à chaque sélecteur et les renverra ensemble. Par exemple : $("#id,p,.style1")

2).Form

·:button correspond à tous les boutons. Par exemple : $(":button")
·:checkbox correspond à toutes les cases à cocher. Par exemple : $(":checkbox")
·:file correspond à tous les champs du fichier. Par exemple : $(":file")
·:hidden correspond à tous les éléments invisibles ou aux éléments de type masqué. Par exemple : $("input:hidden")
·:image correspond à tous les champs d'image. Par exemple : $(":image")
·:input correspond à tous les éléments d'entrée, de zone de texte, de sélection et de bouton. Par exemple : $(":input")
·:password correspond à toutes les zones de mot de passe. Par exemple : $(":password")
·:radio correspond à tous les boutons radio. Par exemple : $(":radio")
·:reset correspond à tous les boutons de réinitialisation. Par exemple : $(":reset")
·:submit correspond à tous les boutons de soumission. Par exemple : $(":submit")
·:text correspond à toutes les zones de texte sur une seule ligne. Par exemple : $(":text")
·:header correspond aux éléments d'en-tête tels que h1, h2, h3. Par exemple : $(":header").css("background", "#EEE");

2. Conditions de filtre

1). Attribut Filtre

·[attribut*=valeur] Faites correspondre l'attribut donné aux éléments qui contiennent certaines valeurs. Par exemple : $("input[name*='man'")
·[attribute!=value] correspond à tous les éléments qui contiennent l'attribut spécifié, mais l'attribut n'est pas égal à la valeur spécifique. Par exemple : $(input[name!='man');
·[attribute$=value] correspond aux éléments où l'attribut donné se termine par une valeur. Par exemple : $("input[name$='man']")
·[attribute=value] correspond aux éléments dont l'attribut donné est une valeur spécifique. Par exemple : $("input[name='man']");
·[attribute] correspond aux éléments contenant l'attribut donné. Par exemple : $("p[id]")
·[attribute^=value] correspond aux éléments où l'attribut donné commence par une valeur. Par exemple : $("input[name^='man']")
·[selector1][selector2][selectorN] satisfait plusieurs conditions en même temps. Par exemple : $("input[id][name$='man']")
·:hidden correspond à tous les éléments invisibles. Par exemple : $("tr:hidden")
·:visible correspond à tous les éléments visibles. Par exemple : $("tr:visible")
·:checked correspond à tous les éléments sélectionnés (cases à cocher, boutons radio, etc., à l'exclusion des options de sélection). Par exemple : $("input:checked")
·:disabled correspond à tous les éléments désactivés. Par exemple : $("input:disabled")
·:enabled correspond à tous les éléments disponibles. Par exemple : $("input:enabled")
·:selected correspond à tous les éléments d'option sélectionnés. Par exemple : $("select option:selected")

2). Filtrage de contenu

·:contains(text) correspond aux éléments qui contiennent le texte donné. Par exemple : $("p:contains('John')")
·:empty correspond à tous les éléments vides qui ne contiennent pas d'éléments enfants ni de texte. Par exemple : $("td:empty")
·:has(selector) correspond aux éléments contenant l'élément correspondant par le sélecteur. Par exemple : $("p:has(p)");
·:parent correspond aux éléments qui contiennent des éléments enfants ou du texte. Par exemple : $("td:parent")

3). Filtrage hiérarchique

·le descendant ancêtre correspond à tous les éléments descendants sous l'élément ancêtre donné. Par exemple : $("form input")
·parent > correspond à tous les éléments enfants sous l'élément parent donné. Par exemple : $("form > input")
·prev + next correspond à tous les éléments suivants suivant immédiatement l'élément précédent. Par exemple : $("label + input")
·prev ~ siblings correspond à tous les éléments frères et sœurs après l'élément précédent. Par exemple : $("form ~ input")
·:first-child correspond au premier élément enfant. Par exemple : $("ul li:first-child")
·:last-child correspond au dernier élément enfant. Par exemple : $("ul li:last-child")
·:nth-child(index/even/odd/equation) correspond au Nième enfant ou à l'élément impair-pair sous son élément parent. Par exemple : $("ul li:nth-child(2)")
·:only-child Si un élément est le seul élément enfant de l'élément parent, il sera mis en correspondance. Par exemple : $("ul li:only-child")

4). Filtre de méthode

·:animated correspond à tous les éléments qui exécutent des effets d'animation. Par exemple : $("p:animated");
·:eq(index) correspond à un élément avec une valeur d'index donnée. Par exemple : $("tr:eq(1)")
·:even correspond à tous les éléments avec des valeurs d'index paires, en comptant à partir de 0. Par exemple : $("tr:even")
·:first correspond au premier élément trouvé. Par exemple : $("tr:first")
·:gt(index) correspond à tous les éléments supérieurs à la valeur d'index donnée, en comptant à partir de 0. Par exemple : $("tr:gt(0)")
·:last correspond au dernier élément trouvé. Par exemple : $("tr:last")
·:lt(index) correspond à tous les éléments inférieurs à la valeur d'index donnée. Par exemple : $("tr:lt(2)")
·:not(selector) Supprime tous les éléments correspondant au sélecteur donné. Par exemple : $("input:not(:checked)")
·:odd correspond à tous les éléments avec des valeurs d'index impaires, en comptant à partir de 0. Par exemple : $("tr:odd")

Résumé des méthodes de filtrage dans jQuery

1.add()

Utilisé pour lier des ensembles de résultats d'éléments qui correspondent respectivement à deux expressions.

[JavaScript] view plaincopy

1. $("p").add("div"); Autrement dit, recherchez tous les p et div et placez-les dans les éléments correspondants.

[javascript] view plaincopy

1. $("p div");

réalise la même fonction.

2.andself()

Pour les éléments filtrés ou recherchés, ajoutez les éléments précédemment sélectionnés.

[javascript] view plaincopy

1. $("div").find("span").andself().addClass("test"); 3.end()

Retournez à avant la dernière opération "destructrice", c'est-à-dire modifiez la liste des éléments correspondants à l'état correspondant précédent.

L'opération dite « destructive » fait référence à une correspondance plus poussée des éléments jQuery obtenus, tels que find, add, children, not, prev, etc.

4.filter()

Lorsque le paramètre est une ou plusieurs expressions, il est utilisé pour le filtrage.

Lorsque le paramètre est une fonction, l'élément renvoyé comme false est supprimé, sinon il est conservé.

[javascript] view plaincopy

1. $("p").filter(function(){

2. return $("ol",this). length==0;

3. });

obtient les éléments qui ne contiennent pas ol dans

.

5.map()

Convertissez un ensemble d'éléments en d'autres tableaux.

1. $("p").append($("input").map(function(){

2. return $(this).value();

3. }).get().join(","));

Combinez les valeurs de toutes les

balises d'entrée

dans un

connecté par " ," String

et ajouté à l'élément

. 6.children()Obtenir un ensemble d'éléments contenant tous les éléments enfants de chaque élément dans l'ensemble d'éléments correspondant, quels que soient les éléments enfants de l'élément enfant.

7.closest() et parents()

                                                    🎜>

Commencer l'élément correspondant L'élément actuel commence à correspondre L'élément parent commence à correspondre 

Faire correspondre l'élément final

jusqu'à la découverte de l'élément correspondant à l'élément racine Retour Résultat 8.next (), nextAll() et nextUntil()

Le premier obtient un ensemble d'éléments contenant les éléments frères immédiatement suivants de chaque élément dans l'ensemble d'éléments correspondant. Deuxièmement, obtenez tous les éléments frères derrière l'élément correspondant actuel. La troisième consiste à rechercher tous les éléments frères après l'élément actuel jusqu'à ce qu'il rencontre le paramètre transmis. 9.parent()Obtient un ensemble d'éléments contenant l'élément parent unique de tous les éléments correspondants. 10.prev(), prevAll() et prevUntil()

Identique à next, obtenant uniquement l'élément précédent.

11.siblings()

Obtenir l'ensemble de tous les éléments frères de l'élément sélectionné, à l'exclusion de lui-même.

Mais en ajoutant la méthode andself(), vous pouvez vous retrouver ainsi que vos pairs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!