Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (35) – Ausführliche Erklärung der Filter in jQuery-HTML-Tutorial-php.cn

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (35) – Ausführliche Erklärung der Filter in jQuery

黄舟

Freigeben： 2017-02-04 14:47:28

Original

1323 Leute haben es durchsucht

1. Grundlegender Filterselektor
: erster
:letzter
:not(selektor): Andere Knoten als der mit dem Selektor übereinstimmende Knoten
:gerade: gerade Zahl
:ungerade: ungerade Zahl
:eq(index)
:gt(index): Größer als er

:lt(index): Kleiner als er

<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>

Nach dem Login kopieren

2 Selector
:contains(text)
:empty: Ein Knoten ohne untergeordnete Knoten oder ein Knoten mit leerem Textinhalt
:has(selector)
:parent: Ein Knoten, der einen übergeordneten Knoten enthält

<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>

Nach dem Login kopieren

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (35) – Ausführliche Erklärung der Filter in jQuery

Eigentlich geht es mir nicht darum, den gesamten Bildschirm rot zu machen. Wenn ich mir den Code unten ansehe, habe ich ein p

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

Nach dem Login kopieren

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (35) – Ausführliche Erklärung der Filter in jQuery

vor „contains(hell0)“ eingefügt. Sie können sehen, dass es zwar nicht im Vollbildmodus angezeigt wird, es aber nicht der Fall ist Ergebnis, das ich möchte. Wie kann ich nur den Hintergrund unter „Hallo“ in Rot verwandeln? Sie können dies tun

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

Nach dem Login kopieren

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (35) – Ausführliche Erklärung der Filter in jQuery

3. Sichtbarkeitsfilterauswahl
:hidden
Suchen Sie nach Eingabetyp="hidden" und 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();  
    });  
});

Nach dem Login kopieren

4. Filterselektor
(1) Attributfilterselektor [Attribut]
[Attribut=Wert]
[Attribut!=Wert]

<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>

Nach dem Login kopieren

( 2), Filterauswahl für untergeordnete Elemente: Gibt alle übereinstimmenden untergeordneten Knoten unter dem übergeordneten Knoten zurück
:nth-child(index/even/odd)
n beginnt bei 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>

Nach dem Login kopieren

(3) , Filterauswahl für Formularobjektattribute
:aktiviert
:deaktiviert //Das Texteingabefeld kann nicht eingegeben werden
:markiert//Ausgewählter Knoten
:ausgewählt

Formularauswahl
:input $(':input'); gibt alle Eingaben zurück
:text
:password
:checkbox
:radio
:submit
:image
:reset
:button

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (35) – detaillierte Erläuterung der Filter in jQuery. Weitere verwandte Inhalte finden Sie unter PHP Chinese Net (www.php. cn)!