jQuery 선택기 전체

자세히 보기
Dom 프로그래밍에서 우리는 유한한 함수를 사용하여 id나 TagName에 따라 Dom 대상을 가져올 수 있습니다.그러나 jQuery에서는 완전히 다르다. jQuery는 페이지에 있는 대상을 가져오고, 대상을 jQuery 패키지 형식으로 되돌려주는 데 매우 강력한 선택기를 제공한다.본고는 주로 자주 사용하는 jQuery 선택기를 소개하고 분류한다.jQuery 선택기는 크게 4가지로 나눌 수 있는데 그것이 바로 기본 선택기, 차원 선택기, 필터 선택기, 폼 선택기이다.그 중에서 필터 선택기는 단순 필터 선택기, 내용 필터 선택기, 가시성 필터 선택기, 속성 필터 선택기, 하위 요소 필터 선택기, 폼 대상 속성 필터 선택기로 나눌 수 있다.
 
기본 선택기:

$("#myELement") //  id   myElement   ，id              id  myElement           
$("div") //     div    ，  div    
$(".myClass") //    myClass  css     
$("*") //           ，                 ：  $("#myELement,div,.myclass")

 
계단식 선택기:

$("form input") //     form    input   $("#main > *")，  id  main       
$("label + input") //     label      input               label         input     input    
$("#prev ~ div") //              id prev                  div  

 
기본 필터 선택기:

$("tr:first") //    tr       $("tr:last")，    tr       
$("input:not(:checked) + span") //   ：checked        input  
$("tr:even") //     tr    0，2，4... ...   （  ：              ，      0  ）
$("tr:odd") //     tr    1，3，5... ...   
$("td:eq(2)") //     td      2   td    
$("td:gt(4)") //  td       4   td  
$("td:ll(4)") //  td       4    td   $(":header") $("div:animated")

 
컨텐츠 필터 선택기:

$("div:contains('John')") //    div   John     
$("td:empty") //       （        ） td     
$("div:has(p)") //      p   div  
$("td:parent") //      td         

 
시각 형상 필터 선택기:

$("div:hidden") //      hidden div  
$("div:visible") //         div  

 
속성 필터 선택기:

$("div[id]") //      id   div  
$("input[name='newsletter']") //     name    'newsletter' input  
$("input[name!='newsletter']") //     name     'newsletter' input  
$("input[name^='news']") //     name   'news'   input  
$("input[name$='news']") //     name   'news'   input  
$("input[name*='man']") //     name    'news' input  
$("input[id][name$='man']") //              ，            id         man     

 
하위 요소 필터 선택기:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") //     div            
$("div span:last-child") //     div            
$("div button:only-child") //     div                   

 
양식 요소 선택기:

$(":input") //           ，  input, textarea, select   button
$(":text") //     text input  
$(":password") //     password input  
$(":radio") //     radio input  
$(":checkbox") //     checkbox input  
$(":submit") //     submit input  
$(":image") //     image input  
$(":reset") //     reset input  
$(":button") //     button input  
$(":file") //     file input  
$(":hidden") //       hidden input         

 
양식 요소 필터 선택기:

$(":enabled") //             
$(":disabled") //              
$(":checked") //      checked     
$("select option:selected") //      select       selected