본문 바로가기

Script

JQuery Selectors

select1, select2, select3, ... : 입력받은 순서대로 검색된 element 를 리턴 [입력 값이 같은 element 를 가지고 있을 경우 중복을 허용]
    $("div, span, p.myClass"); - 쓰여진 순서대로 처음것 모두 검색 한 다음 다음 것을 검색해서 리턴

parnet child : 부모를 기준으로 하위의 노드에 존재하는 element 를 검색해서 리턴
    $("div p").css("border","1px solid blue");

parent > child : 부모를 기준으로 인접한 자식 노드에 존재하는 element 중 child 와 일치하는 element 를 리턴
    $("div > p").css("fontSize", "15px");

prev + next : prev 를 기준으로 같은 노드 레벨의 next selector 와 일치하는 element 를 검색
  prev : 기준이 되는 selector
  next : prev 를 기준으로 같은 노드 레벨의 인접한 prev 이후에 위치하는 element 를 검색
    $("div + p"); - div 다음에 p 가 와야 함

prev ~ next : prev 를 기준으로 같은 노드 레벨의 next selector 와 일치하는 element 를 검색
    $("div ~ p");

:first : 조건에 만족하는 첫번재 element
    $("p:first"); - 대상 element 중 첫번째 p
:last : 조건에 만족하는 마지막 element
    $("p:last");

:not(selector); not(selector) 를 제외한 element
    $("p:not(.className)");

:odd : 대상 element 중 홀수번째 해당하는 element 를 리턴[0부터 시작]
:even : 대상 element 중 짝수번째 해당하는 element 를 리턴[0부터 시작]
    $("tr:odd");
    $("td:even");

:eq(index); : index 값에 해당하는 element 를 리턴
    $("td:eq(7)"); - 8번째 td를 찾아 리턴[0부터 시작]

[attribute=value] : 대상 element 에서 속성명과 속성값이 같은 element 를 리턴
   $("input[name='group']");

[attribute != value] : 대상 element 에서 입력 받은 속성명은 일치, 속성값은 다른 element 를 리턴
    $("input[name != ''group]");

[attribute ^= value] : 대상 element 에서 입력 받은 속성명과 같고 입력 받은 속성값으로 시작하는 element 를 리턴
    $("input[name ^= 'group']");

[attribute $= value] : 대상 elemnet 에서 입력 받은 속성명과 같고 입력 받은 속성값으로 끝나는 element 를 리턴
    $("input[name $= 'group']");

[attribute *= value] : 대상 element 에서 입력 받은 속성명과 일치, 입력 받은 속성값을 포함하는 element 를 리턴
    $("input[name *= 'group']");

[selector1][selecttor2][selector3] : 입력 받은 속성 selector 들을 모두 만족하는 element 를 리턴
    $("input[value][name $= 'group']");

:nth-child(index/even/odd/equation) : 대상 element 의 부모 노드를 기준으로 n 번째 child element 를 리턴[index 는 0부터 시작]
    $("td:nth-child(3)"); - td 의 부모 노드인 tr 을 기준으로 4번째 td 를 리턴

:first-child, :last-child : 대상 element 의 부모 노드를 기준으로 첫 번째, 마지막 element 를 리턴
    $("td:first-child"); - 대상 element 의 부모 노드를 기준으로 첫 번째 자식 element 를 리턴
    $("td:last_child"); - 대상 element 의 부모 노드를 기준으로 마지막 번째 자식 element 를 리턴

:only-child : 대상 element 의 부모 노드를 기준으로 하나의 자식 노드만 존재하는 element 를 리턴
    $("td:only-child");

:input : 대상 element 들 중 input, text, texrarea, button 등과 일치하는 form element 들을 리턴
    $(":input").each(function(){ ... });