jQueryの9大セレクタ

9つのセレクタは、要素ノードを検索するために使用されます.JQueryは九中タイプのセレクタを提供してくれました.
1.基本セレクタclassとラベル名はDOM要素を検索します(ウェブページではidは1回しか使用できませんが、classでは繰り返し使用が許可されます).ウェブページでidが1回しか使用できないということは、1つのウェブページのidが繰り返してはいけない、つまり一意性を持っていることを意味します.

1、#id     
  : $("#myDiv");                   
  :         html  id="myDiv"

2、Element 
  : $("div")              
  : element        ”  ”,  element    html         ,  div, 
input, a  .

3、class          
  : $(".myClass")               
  :          html   class="myClass"       (     html   
class           )

4、*          
  : $("*")               
  :       ,           

5、selector1, selector2, selectorN      
  : $("div,span,p.myClass")             
  :                     .            ,          
       。  p.myClass       
p class="myClass"

2.階層セレクタ子孫要素、子要素、隣接要素、兄弟要素など、DOM要素間の階層関係で特定の要素を取得するには、階層セレクタを使用します.

1 、ancestor descendant
  : $("form input") ;            
  :                  .    "arent > child"   。
       ，             。

2、parent > child
  : $("form > input") ;             
  :                。  :            
      ，      ，          。

3、prev + next
  : $("label + input") ;            
  :         prev      next   

4、prev ~ siblings
  : $("form ~ input") ;             
  :    prev         siblings   .  :        ,        ,  JQuery siblings       prev     ,         .
  :  ("prev ~ div")         "# prev"         ;   jQuery      siblings()        ,             

3.フィルタセレクタ必要なDOM要素は、特定のフィルタルールによってフィルタされ、セレクタは「:」で始まります. 異なるフィルタルールに従って、フィルタセレクタは、基本フィルタ、コンテンツフィルタ、可視フィルタ、属性フィルタ、サブ要素フィルタ、フォームオブジェクト属性フィルタセレクタに分けることができます.
<1>ベースフィルタセレクタ

1、:first
  : $("tr:first") ;                  
  :           

2、:last
  : $("tr:last")            
  :            .  :first    .

3、:not(selector)
  : $("input:not(:checked)")            
  :                .     ” ”,         input( input 
type=”checkbox”).

4、:even
  : $("tr:even")            
  :              ， 0    .js      0     .     table   ,    0    ,  table     tr    0.

5、:odd
  : $("tr:odd")          
  :              , :even  ,  0     

6、:eq(index)
  : $("tr:eq(0)")             
  :             .eq(0)       tr  .         ,       

7、:gt(index)
  : $("tr:gt(0)")             
  :               

8、:lt(index)
  : $("tr:lt(2)")               
  :               

9、:header(    )
  : $(":header").css("background", "#EEE")             
  :     h1, h2, h3       .         h1,h2       

10、:animated(    )            
  :                 

<2>コンテンツフィルタセレクタ

1、:contains(text)
  : $("div:contains('John')")             
  :            .         ，         dom     ,    
    ,          ” ”                 。

2、:empty
  : $("td:empty")            
  :                   。

3、:has(selector)
  :  $("div:has('.mini')")         
  :                 。

4、:parent
  : $("td:parent")            
  :               .  :   ":parent”,   ".parent”!       ”:empty”     。

<3>可視度フィルタセレクタ 可視度フィルタセレクタは、要素の可視状態と非可視状態に基づいて対応する要素を選択します.

1、:hidden
  : $(”tr:hidden”)           
  :           ，input     type     “hidden”         。
   css display:none input type="hidden"       .  ,           
 ":",   "."   ","   。
2、:visible
  : $("tr:visible")           
  :          

<4>属性フィルタセレクタ属性フィルタセレクタのフィルタルールは、要素の属性によって対応する要素を取得することである.

1、[attribute]
  : $("div[id]") ;           
  :            。          ”id”   div  。

2、[attribute=value]
  : $("input[name='newsletter']").attr("checked", true);             
  :                 .         name     newsletter   input   。

3、[attribute!=value]$("div[title!='test']").css("background","yellow");
  : $(”input[name!='newsletter']“).attr("checked", true);            

  :             ，             。
       :not       :not([attr=value]),                   ,   [attr]:not([attr=value])。     :not      。

4、[attribute^=value]
  : $(”input[name^=‘news’]“)            
  :                  .,                   。

5、[attribute$=value]
  : $("input[name$='letter']")            
  :                  。

6、[attribute*=value]
  : $("input[name*='man']")            
  :                  。

7、[attributeFilter1][attributeFilter2][attributeFilterN]
  : $("input[id][name$='man']")           
  :        ,             .      ,               
 .              id   ,     name      man      。

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

1、:nth-child(index/even/odd/equation)$("div[class=one] :nth-child(2)").css("background","yellow");
  : $("ul li:nth-child(2)")            
  :          N       .              (Basic Filters)  
eq()     ,           0  ,    1  。

2、:first-child$("div[class=one] :first-child")
  : $("ul li:first-child")              
  :         。':first'        ,                   。             。

3、:last-child
  : $("ul li:last-child")               
  :          .':last'       ,                   。

 4、: only-child
   : $("ul li:only-child")             
   :                  ,      。            ,       。    :             !

<6>フォームオブジェクト属性フィルタセレクタ
 このセレクタは、主に選択したフォーム要素をフィルタします.

1、:enabled
  : $("input:enabled")             
  :         。       input    disabled="disabled" input。  
disabled,    enabled。

2、:disabled
  : $("input:disabled")             
  :          。    enable     。

3、:checked
  : $("input:checked")            
  :             (   、    ，   select  option)。         。

4、:selected
  : $(”select option:selected”)            
  :        option  .$("select>option:selected")

<7>フォームセレクタ

1、:input
  : $(":input") ;            
  :     input, textarea, select   button   。

2、:text
  : $(":text") ;           
  :           。

3、:password
  : $(":password") ;          
  :        。

4、:radio
  : $(":radio") ;          
  :         。

5、:checkbox
  : $(":checkbox") ;          
  :        。

6、:submit
  : $(":submit") ;            
  :         .

7、:image
  : $(":image")            
  :        。

8、:reset
  : $(":reset") ;           
  :         。

9、:button
  : $(":button") ;           
  :       .          button。

10、:file
  : $(":file") ;           
  :        。

11、:hidden
  : $("input:hidden") ;          
  :          ，  type hidden   .             ,    input  hidden ,  style hidden      。

注意:inputでhidden値を選択する方法は前述の例ですが、「:hidden」を直接使用すると、幅や高さが0の非表示要素を含むページ内のすべての非表示要素に一致します.
元の記事のリンク先:https://blog.csdn.net/pseudonym_/article/details/76093261#commentBox