De quels sélecteurs de filtres jQuery dispose-t-il ?

Les sélecteurs de filtre jQuery incluent : ":first", ":last", ":not()", ":even", ":odd", ":eq()", ":gt( ) ", ":lt()", ":header", ":empty", ":has()", ":hidden", etc.

[Recommandations associées : Tutoriel vidéo jQuery]

Sélecteur de filtre jQuery

Filtre ? Il faut absolument ajouter des conditions de filtre. Ajoutez des conditions de filtre via ":", telles que "$("div:first")" pour renvoyer le premier élément div de la collection d'éléments div, et first est la condition de filtre.
Selon différentes règles de filtrage, les sélecteurs de filtres peuvent être divisés en filtrage de base, filtrage de contenu, filtrage de visibilité, filtrage d'attributs, filtrage de sous-éléments et sélecteurs de filtrage d'attributs d'objet de formulaire.

1. Sélecteur de filtre de base

a) « :first », sélectionnez le premier élément, n'oubliez pas qu'il est également placé dans une collection ! Parce que JQuery est une collection d'objets DOM. Par exemple, "$("tr:first")" renvoie le premier élément tr de tous les éléments tr, qui est toujours enregistré dans la collection.

b) « :last », sélectionnez le dernier élément. Par exemple, "$("tr:last")" renvoie le dernier élément tr de tous les éléments tr, qui est toujours enregistré dans la collection.

c) ":not(selector)", supprime tous les éléments correspondant au sélecteur donné. Par exemple, "$("input:not(:checked)")" renvoie tous les éléments d'entrée, mais supprime les éléments sélectionnés (bouton radio, zone de sélection multiple).

d) « :even », sélectionne les éléments pairs parmi tous les éléments. Étant donné que l'objet JQuery est une collection, le nombre pair fait ici référence à l'index de la collection et l'index commence à 0.

e) ":odd", sélectionne les éléments impairs parmi tous les éléments, et l'index commence à 0.

f) « :eq(index) », sélectionne l'élément à l'index spécifié, et l'index commence à 0.

g) « :gt(index) », sélectionne les éléments dont l'index est supérieur à l'index spécifié, et l'index commence à 0.

h) ":lt(index)", sélectionne les éléments dont l'index est inférieur à l'index spécifié, et l'index commence à 0.

i) « :header », sélectionnez tous les éléments d'en-tête, tels que hq, h2, etc.

j) « :animated », sélectionne tous les éléments animés en cours d'exécution.

2. Sélecteur de filtre de contenu

Il opère sur les éléments et le contenu du texte.

a) ":contains(text)", sélectionnez l'élément contenant le contenu du texte.

b) « :empty », sélectionne les éléments vides qui ne contiennent pas d'éléments enfants ni de nœuds de texte.

c) « :has(selector) », sélectionne l'élément contenant l'élément correspondant par le sélecteur.

d) « :parent », sélectionnez les éléments contenant des éléments enfants ou des nœuds de texte. (C'est un nœud parent)

3. Le sélecteur de filtre de visibilité

sélectionne les éléments en fonction de leur statut visible ou invisible.

• « :hidden » sélectionne tous les éléments invisibles.

• ":visible" sélectionne tous les éléments visibles.

Sélecteur visible : masqué inclut non seulement les éléments dont l'attribut de style n'est pas affiché, mais inclut également les champs de texte masqués () et visible : masqué, etc. .éléments.

4. Le sélecteur de filtre d'attribut

sélectionne l'élément correspondant via l'attribut de l'élément.

a) "[attribut]", sélectionnez les éléments avec cet attribut.

b) "[attribute=value]", sélectionnez tous les éléments avec la valeur d'attribut spécifiée.

c) "[attribut !=valeur]", sélectionnez tous les éléments dont la valeur d'attribut n'est pas valeur.

d) "[attribut ^= valeur]", sélectionnez tous les éléments dont la valeur d'attribut commence par valeur.

e) "[attribut $= value]", sélectionnez tous les éléments dont la valeur d'attribut se termine par value.

f) "[attribut *= valeur]", sélectionnez tous les éléments dont la valeur d'attribut contient valeur.

g) "[sélecteur1] [sélecteur2]...[sélecteurN]", un sélecteur composite, sélectionne d'abord [sélecteur1] et renvoie l'ensemble A, l'ensemble A sélectionne ensuite [sélecteur2] et renvoie l'ensemble B, l'ensemble B Ensuite, sélectionnez et renvoyez le résultat défini via [selectorN].

5. Sélecteur de filtre d'élément enfant

Comme vous pouvez le voir d'après le nom, il sélectionne les éléments enfants d'un certain élément.

a) ":nth-child(index/even/odd)", sélectionne l'élément d'index, l'élément d'index pair et l'élément d'index impair.

• ntième enfant (pair/impair) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un nombre pair (impair).

• nth-child(2) : peut sélectionner l'élément avec la valeur d'index 2 sous chaque élément parent.

• nth-child(3n) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un multiple de 3.

• nth-child(3n + 1) : peut sélectionner l'élément dont la valeur d'index est 3n + 1 sous chaque élément parent.

b) « :first-child », sélectionnez le premier élément enfant.

c) « :last-child », sélectionnez le dernier élément enfant.

d) ":only-child", sélectionne le seul élément enfant dont l'élément parent n'a que cet élément enfant.

6. Sélecteur de filtre de formulaire

Sélectionnez le sélecteur de filtre de l'élément de formulaire.

a) ":input", sélectionne tous les éléments , , <select> </p> <p>b) « :text », sélectionnez tous les éléments de la zone de texte. </p> <p>c) « :password », sélectionnez tous les éléments de la boîte de mot de passe. </p> <p>d) « :radio », sélectionnez tous les éléments du bouton radio. </p> <p>e) « :checkbox », sélectionnez tous les éléments de la case à cocher. </p> <p>f) « :submit », sélectionne tous les éléments du bouton de soumission. </p> <p>g) « :image », sélectionne tous les éléments du bouton d'image. </p> <p>h) ":reset", sélectionne tous les éléments du bouton de réinitialisation. </p> <p>i) « :button », sélectionne tous les éléments du bouton. </p> <p>j) « :file », sélectionne tous les éléments du domaine de téléchargement de fichiers. </p> <p>k) « :hidden », sélectionne tous les éléments invisibles. </p> <p><strong>7. Sélecteur de filtre d'attribut d'objet de formulaire </strong></p> <p>Sélecteur de filtre pour sélectionner les attributs d'élément de formulaire. </p> <ul style="list-style-type: disc;"> <li><p>":enabled" sélectionne tous les éléments disponibles. </p></li> <li><p>":disabled" sélectionne tous les éléments désactivés. </p></li> <li><p>« :checked » sélectionne tous les éléments sélectionnés, tels que les boutons radio et les cases à cocher. </p></li> <li><p>« :selected » sélectionne tous les éléments sélectionnés, tels que les zones de liste déroulante et les zones de liste. </p></li> </ul> <p>Pour plus de connaissances liées à la programmation, veuillez visiter : <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程学习">Apprendre la programmation</a> ! ! </p><p>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!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">jquery</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">checkbox</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">选择器</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">tr</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Comment installer React dans le code" href="https://m.php.cn/fr/faq/463664.html">Comment installer React dans le code</a></span><span>Article suivant：<a class="dBlack" title="Comment installer React dans le code" href="https://m.php.cn/fr/faq/463692.html">Comment installer React dans le code</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/459010.html" title="jQuery implémente l'affichage, le masquage et le remplissage de texte div" class="aBlack">jQuery implémente l'affichage, le masquage et le remplissage de texte div</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/463507.html" title="Présentation de quatre types de méthodes de détection js et de méthodes d'outils écrites sur la base de jquery" class="aBlack">Présentation de quatre types de méthodes de détection js et de méthodes d'outils écrites sur la base de jquery</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/463558.html" title="Qu'est-ce que jQuery PrimeUI ?" class="aBlack">Qu'est-ce que jQuery PrimeUI ?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/463609.html" title="Une brève discussion sur la méthode d'introduction de jquery dans vue" class="aBlack">Une brève discussion sur la méthode d'introduction de jquery dans vue</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/463635.html" title="Quelle est la différence entre size() et length en jquery ?" class="aBlack">Quelle est la différence entre size() et length en jquery ?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>