JQueryセレクタ【二】

7246 ワード

jqueryセレクタ

可視性セレクタ
注意:次のコードのconsole.log()は火狐ブラウザまたはGoogleブラウザで実行されます.ブラウザのコンソールで実行結果を確認してください.不便な点はお許しください.

<body>
    <input type="hidden" name="name" value=" " />
    <input type="text" name="name" value=" " />
    <div id="divNone" style="display: none;">
    </div>
    <div id="divBlock" style="display: block;">
    </div>
    <div id="divHidden" style="visibility: hidden;">
    </div>
    <div id="divVisible" style="visibility: visible;">
    </div>
</body>

:hidden非表示要素をすべて選択

            //          
            console.log($(":hidden"));
            //$(":hidden")          。  <input type= "hidden"/>，<div style= "display:none">   。
            //      <input>  ，    $("input:hidden")
            console.log($("input:hidden"));

:visible表示されているすべての要素を選択

            //         
            //  visibility: hidden opacity: 0       ，            
            console.log($(":visible"));
            //$("div:visible")       <div>  
            console.log($("div:visible"));

属性フィルタセレクタ

<body>
    <div id="divOne" class="divClass">
        <span id="spanOne" class="spanClass"></span> 
        <span id="spanTwo" class="spanClass"></span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree" class="divClass spanClass">
    </div>
    <div class="spanClass divClass"></div>
    <span id="spanFore"></span>
    <span id="spanFive" class="spanClass"></span>
</body>

[attribute]この属性を持つ要素を選択

            //$("div[id]")      id <div>  
            //[div#divOne.divClass, div#divTwo, div#divThree.divClass]
            console.log($("div[id]"));

[attribute=value]属性の値がvalueの要素を選択

            //$("div[id=divTwo]")    id divTwo <div>  
            //[div#divTwo]
            console.log($("div[id=divTwo]"));

[attribute!=value]属性の値がvalueに等しくない要素を選択

            //$("div[id!=divTwo]")    id divTwo <div>  
            //  ：  id          
            //[div#divOne.divClass, div#divThree.divClass, div.spanClass]
            console.log($("div[id!=divTwo]"));

[attribute^=value]属性の値をvalueで開始する要素を選択

             //$("div[class^=divClass]")    class divClass   <div>  
            //[div#divOne.divClass, div#divThree.divClass]
            console.log($("div[class^=divClass]"));

[attribute$=value]属性の値を選択してvalueで終わる要素

             //$("div[class^=divClass]")    class divClass   <div>  
            //[div#divOne.divClass, div.spanClass]
            console.log($("div[class$=divClass]"));

[attribute*=value]選択した属性の値にvalueの要素が含まれます

            //$("div[class*=spanClass]")    class  spanClass <div>  
            //[div#divThree.divClass, div.spanClass]
            console.log($("div[class*=spanClass]"));

[selector 1][selector 2][selector 3]は、複数の条件を満たす複合属性セレクタに属性セレクタで結合される.選択ごとに範囲を縮小

             //$("div[id][class$=divClass]")      id，    class divClass   <div>  
            //[div#divOne.divClass]
            console.log($("div[id][class$=divClass]"));

サブエレメントフィルタセレクタ

<body>
    <div id="divOne">
        <span id="spanOne"></span>
        <span id="spanTwo"></span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree">
    </div>
    <span id="spanFore"></span>
    <span id="spanFive"></span>
</body>

:nth-child(index/even/odd)各親要素のindex番目のサブ要素またはパリティ要素を選択します(indexは1から計算します)

            //$("div span:nth-child(2)");    <div>  2 <span>  
            //[span#spanTwo]
            console.log($("div span:nth-child(2)"));
            //$("div span:nth-child(odd)");    <div>     <span>  
            //[span#spanOne, span#spanThree]
            console.log($("div span:nth-child(odd)"));

:first-child各親要素の最初のサブ要素を選択

             //$("div span:first-child");    <div>    <span>  
            //[span#spanOne, span#spanThree]
            console.log($("div span:first-child"));

:last-child各親要素の最後のサブ要素を選択

            //$("div span:last-child");    <div>     <span>  
            //[span#spanTwo, span#spanThree]
            console.log($("div span:last-child"));

:only-child親要素の中で唯一の子要素である場合、一致します.親要素に他の要素が含まれている場合は、構成されません.

            //$("div span:only-child") <div>          <span>  
            //[span#spanThree]
            console.log($("div span:only-child"));

フォーム要素セレクタ
簡単なので例をあげません
セレクタ
説明
例
:input
すべての、<textarea>、、<textarea>、要素を選択
:selected
選択したすべてのオプション要素を選択(ドロップダウンリスト)
$(「select:selected」)選択したすべてのオプション要素を選択

Linuxシステムプログラミング:クライアント-サーバがFIFOで通信する

OgnlException: target is null for setProperty