Maison > Article > interface Web > Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQuery

Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQuery

黄舟original: 2017-02-04 14:47:281301parcourir

1. Sélecteur de filtrage de base
: first
:last
:not(selector) : nœuds autres que le nœud correspondant au sélecteur
:even : nombre pair
:odd : nombre impair
:eq(index)
:gt(index) : Plus grand que lui

:lt(index) : Plus petit que lui

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    //$(&#39;tr:first&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    //$(&#39;tbody tr:first&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    //$(&#39;tbody tr:not(#tr2)&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    //$(&#39;tbody tr:even&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                    $(&#39;tbody tr:eq(2)&#39;).css(&#39;background-color&#39;,&#39;#cccccc&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <table border="1" cellpadding="0" cellspacing="0" width="60%">  
            <thead>  
                <tr>  
                    <td>name</td><td>age</td>  
                </tr>  
            </thead>  
            <tbody>  
                <tr><td>zs</d><td>22</td></tr>  
                <tr id="tr2"><td>ls</d><td>22</td></tr>  
                <tr><td>ww</d><td>22</td></tr>  
                <tr><td>ll</d><td>22</td></tr>  
            </tbody>  
        </table>  
        <input type="button" value="clickMe" id="b1"/>  
    <body>  
</html>

2. Filtrage de contenu Sélecteur
:contains(text)
:empty : un nœud sans nœuds enfants ou un nœud avec un contenu de texte vide
:has(selector)
:parent : un nœud qui contient un nœud parent

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    $(&#39;:contains(hello)&#39;).css(&#39;background&#39;,&#39;red&#39;);  
                    //$(&#39;:empty&#39;).css(&#39;&#39;,&#39;&#39;);  
                    //$(&#39;p :has(p)&#39;).css(&#39;&#39;,&#39;&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <p>  
            <p>hello</p>  
            <p>你好</p>  
            <p>  
                <p>java</p>  
            <p>  
            <input type="button" value="clickMe" id="b1"/>  
        </p>  
    </body>  
  
</html>

Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQuery

En fait, mon but n'est pas de rendre tout l'écran rouge. Pourquoi tout devient-il rouge ? En regardant le code ci-dessous, j'ai ajouté un p

$(&#39;p:contains(hello)&#39;).css(&#39;background&#39;,&#39;red&#39;);

Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQuery

devant contain(hell0). Vous pouvez voir que même s'il n'est pas en plein écran, ce n'est pas le cas. résultat que je veux. Comment puis-je transformer uniquement l'arrière-plan sous bonjour en rouge ? Vous pouvez le faire

$(&#39;p p:contains(hello)&#39;).css(&#39;background&#39;,&#39;red&#39;);

Le chemin de Xiaoqiang vers le développement mobile HTML5 (35) - Explication détaillée des filtres dans jQuery

3. Sélecteur de filtre de visibilité
:hidden
Trouver input type="hidden" et display=none:visible

$(function(){  
    $(&#39;#a1&#39;).click(function(){  
        $(&#39;p:hidden&#39;).css(&#39;display&#39;,&#39;block&#39;);  
        //如过有这个样式则去掉，没有则加上  
        $(&#39;#d1&#39;).toggleClass(&#39;show&#39;);  
    });  
    //每点击一次，执行一个函数，循环执行  
    $(&#39;#a1&#39;).toggle(function(){  
        //$(&#39;#d1&#39;).css(&#39;display&#39;,&#39;block&#39;);  
        $(&#39;#d1&#39;).show(400); //在400毫秒种打开  
        //或者使用slow fast normal三个参数  
        $(&#39;#d1&#39;).show(slow);  
    },function(){  
        //$(&#39;#d1&#39;).css(&#39;display&#39;,&#39;none&#39;);  
        $(&#39;#d1&#39;).hide();  
    });  
});

4. Sélecteur de filtre
(1) Sélecteur de filtre d'attribut [attribut]
[attribut=valeur]
[attribut!=valeur]

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    $(&#39;p[id=p1]&#39;).html(&#39;hello java&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <p id="p1">hello</p>  
        <p>world</p>  
        <input type="button" value="click" id="b1"/>  
    </body>  
</html>

( 2), sélecteur de filtre d'élément enfant : renvoie tous les nœuds enfants correspondants sous le nœud parent
:nth-child(index/even/odd)
n commence à partir de 1

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    $(&#39;ul li:nth-child(1)&#39;).html(&#39;item100&#39;);  
                });  
            });  
        </script>  
    </head>  
    <body>  
            <ul>  
                <li>item1</li>  
                <li>item2</li>  
                <li>item3</li>  
  
            </ul>  
            <ul>  
                <li>item4</li>  
                <li>item5</li>  
                <li>item6</li>  
  
            </ul>  
            <input type="button" value="click" id="b1"/>  
    </body>  
</html>

(3) , Sélecteur de filtre d'attribut d'objet de formulaire
:enabled
:disabled //La zone de saisie de texte ne peut pas être saisie
:checked//Nœud sélectionné
:selected

5. 🎜>:input $(':input'); renvoie toutes les entrées
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

Ce qui précède est le contenu de la route de développement mobile HTML5 de Xiaoqiang (35) - explication détaillée des filtres dans jQuery Pour plus de contenu connexe, veuillez faire attention à PHP Chinese Net (www.php. cn) !

Déclaration：

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

Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQueryArticle suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (34) – Sélecteurs dans jQuery

Articles Liés

Voir plus