ホームページ > 記事 > ウェブフロントエンド > Xiaoqiang の HTML5 モバイル開発への道 (35) - jQuery のフィルターの詳細説明

Xiaoqiang の HTML5 モバイル開発への道 (35) - jQuery のフィルターの詳細説明

黄舟オリジナル: 2017-02-04 14:47:281268ブラウズ

1. 基本フィルターセレクター
:first
:last
:not(selector): selectorで一致したノード以外のノード
:even:偶数
:odd:奇数
:eq(index)
:gt( Index) :彼より大きい

:lt(index) :彼より小さい

<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. コンテンツフィルターセレクター
:contains(text)
:empty: 子ノードのないノード、または空のテキストコンテンツを持つノード
: has( selector)
: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>

Xiaoqiang の HTML5 モバイル開発への道 (35) - jQuery のフィルターの詳細説明

実際、私の目的は画面全体を赤くすることではありません。なぜすべてが赤くなるのでしょうか。以下のコードをもう一度見てください。contains(hell0) の前に p

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

Xiaoqiang の HTML5 モバイル開発への道 (35) - jQuery のフィルターの詳細説明

を追加しました。フルスクリーンではありませんが、背景だけを回転させるにはどうすればよいでしょうか。こんにちは、赤に？これができます

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

Xiaoqiang の HTML5 モバイル開発への道 (35) - jQuery のフィルターの詳細説明

3. 可視性フィルターセレクター
:hidden
input type="hidden" と 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. フィルターセレクター
(1) 属性フィルターセレクター[attribute]
[attribute=value]
[attribute!=value]

<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)、子要素フィルターセレクター: 親ノードの下にある一致する子ノードをすべて返します
:nth-child(index/even/odd)
nは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), フォームオブジェクト属性フィルターセレクター
:enabled
:disabled //テキスト入力ボックスは入力できません
:checked//選択されたノード
:selected

5. フォームセレクター
:input $(' :input'); すべてを返します input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

上記は Xiaoqiang の HTML5 モバイル開発パス (35) ——の詳細な説明です関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Xiaoqiang の HTML5 モバイル開発への道 (34) – jQuery のセレクター次の記事：Xiaoqiang の HTML5 モバイル開発への道 (34) – jQuery のセレクター

続きを見る

Xiaoqiang の HTML5 モバイル開発への道 (35) - jQuery のフィルターの詳細説明

関連記事