옆집동생

제이쿼리 선택자

• element Selector

  • $(document).ready(function(){
        $("button").click(function(){
            $("p").hide();
        });
    });

• #id Selector

  • $(document).ready(function(){
        $("button").click(function(){
            $("#test").hide();
        });
    });

• .class Selector

  • $(document).ready(function(){
        $("button").click(function(){
            $(".test").hide();
        });
    });

More jQuery Selectors

• $("*")  Selects all elements    
  $(this) Selects the current HTML element    
  $("p.intro")    Selects all <p> elements with class="intro" 
  $("p:first")    Selects the first <p> element   
  $("ul li:first")    Selects the first <li> element of the first <ul>    
  $("ul li:first-child")  Selects the first <li> element of every <ul>    
  $("[href]") Selects all elements with an href attribute 
  $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"    
  $("a[target!='_blank']")    Selects all <a> elements with a target attribute value NOT equal to "_blank"    
  $(":button")    Selects all <button> elements and <input> elements of type="button" 
  $("tr:even")    Selects all even <tr> elements  
  $("tr:odd") Selects all odd <tr> elements

노드찾기

• - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자")

• - 클래스 이름으로 노드 찾기 : $(".클래스이름")

• - ID로 노드 찾기 : $("선택자")

• - 속성으로 노드 찾기 : $("[속성이름=값]")

• - 찾은 요소 개수 구하기 : .size() , .length

• - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){});

• - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

• - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자")

자식 노드 찾기

• 전체 자식 노드 찾기

  • -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents()

  • -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

• n번째 자식 노드 접근

  • -- $("선택자").children().eq(N)

  • -- $("선택자").children(":eq(N)")

• 첫번째 자식 노드 접근

  • -- $("선택자").children().first()

  • -- $("선택자").children(":first")

  • -- $("선택자").children().eq(0)

  • -- $("선택자").children(":eq(0)")

• 마지막 자식 노드 접근

  • -- $("선택자").children().last()

  • -- $("선택자").children(":last")

부모 노드 찾기

• - 바로 위의 부모 : $("선택자").parent()

• - 모든 부모 찾기

  • -- $("선택자").parents() 모든 부모

• - 모든 부모 중 선택자에 해당하는 부모 찾기

  • -- $("선택자").parents("선택자")

형제 노드 찾기

• - 이전 형제 노드 찾기

  • -- $("선택자").prev()

  • -- $("선택자").prevAll("선택자");

• - 다음 형제 노드 찾기

  • -- $("선택자").next()

  • -- $("선택자").nextAll("선택자");

노드 생성,추가,이동,삭제

• 생성

  • $("노드")

  • $("선택자").html("<노드>...")

  • $("노드").clone()

• 추가

  • $기준노드.append($추가노드)

  • $추가노드.appendTo($기준노드)

  • $기준노드.prepend($추가노드)

  • $추가노드.prependTo($기준노드)

  • $추가노드.insertBefore($기준노드)

  • $기준노드.before($추가노드)

  • $추가노드.insertAfter($기준노드)

  • $기준노드.after($추가노드)

• 삭제

  • $("선택자").remove()

• 이동

  • $기준노드.append($이동노드)

  • $이동노드.appendTo($기준노드)

  • $이동노드.insertBefore($기준노드)

  • $기준노드.before($이동노드)

  • $이동노드.insertAfter($기준노드)

  • $기준노드.after($이동노드)

텍스트 노드 다루기

• 텍스트 노드 생성 : $("텍스트")

• 텍스트 노드 추가 : $기준노드.append("텍스트")

• 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

기본 CSS 셀렉터 사용하기

• a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

• #exID - exID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터.

• .exClass - exClass를 클래스로 가지는 엘리먼트와 일치하는 셀렉터.

• a#exID.exClass - 아이디가 exID 이고, 클래스가 exClass인 링크와 일치하는 셀렉터.

• p a.exClass - <p> 엘리먼트 내에 클래스가 exClass인 모든 링크와 일치하는 셀렉터.

• 아래 코드와 같이 쓰임

• $("p a.exClass")

• 자식 셀렉터(child selector) : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

• 예제) ul.myList > li > a

• 설명) myList 클래스를 지닌 <ul> 엘리먼트의 바로 아래 자식 리스트 앨리먼트인 <li>에서

• 바로 아래 자식 링크만 선택한다.

• [ 어트리뷰트 셀렉터 ]

• a[href^=http://] - href의 값이 http://로 시작하는 모든 링크를 의미. 캐럿문자(^)는 값의 시작 부분이 일치하는지를 뜻함

• form[method] - 명시적으로 method 어트리뷰트를 가지는 <form> 엘리먼트

• input[type=text] - type이 text인 모든 input 엘리먼트

• div[title^=my] - title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

• a[href$=.pdf] - PDF 파일을 참조하는 모든 링크

• a[href*=jquery.com] - jQuery 사이트를 참조하는 모든 <a> 엘리먼트. *는 어트리뷰트의 값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라는 셀렉터.

• li:has(a) - <a> 엘리먼트를 포함하는 모든 <li> 엘리먼트

• li a - <li>엘리먼트 바로 아래 자식의 모든 <a> 엘리먼트

기본 CSS 셀렉터

• 모든 엘리먼트와 일치

• E - 태그명이 E인 모든 엘리먼트와 일치

• E F - E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

• E>F - E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치

• E+F - E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

• E~F - E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

• E:has(F) - 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

• E.C - 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.

• E#I - 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.

• E[A] - 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

• E[A=V] - 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

• E[A^=V] - 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

• E[A$=V] - 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

• E[A*=V] - 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

위치 셀렉터

• a:first - 페이지에서 첫 번째 <a> 엘리먼트

• p:odd - 모든 홀수 번째 문단 <p> 엘리먼트

• p:even - 모든 짝수 번째 문단 <p> 엘리먼트

• li:last-child - 부모 엘리먼트의 마지막 자식 엘리먼트

• :first - 페이지에서 처음으로 일치하는 엘리먼트

• :last - 페이지에서 마지막으로 일치하는 엘리먼트

• :first-child - 첫 번째 자식 엘리먼트

• :last-child - 마지막 자식 엘리먼트

• :only-child - 형제가 없는 모든 엘리먼트를 반환한다

• :nth-child(n) - n번째 자식 엘리먼트

• :nth-child(even:odd) - 짝수 또는 홀수 자식 엘리먼트

• :nth-child(Xn+Y) - 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능.

• li:nth-child(3n)은 3의 배수 번째 아이템을 반환

• li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환

• :even - 페이지 전체의 짝수 번째 엘리먼트

• :odd - 페이지 전체의 홀수 번째 엘리먼트

• :eq(n) - n번째로 일치하는 엘리먼트

• :gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.

• :lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

• n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.

• jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.

정의 셀렉터

• :animated - 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

• :button - 모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )

• :checkbox - 체크박스 엘리먼트만 선택

• :checked - 선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)

• :contains(foo) - 텍스트 foo를 포함하는 엘리먼트만 선택

• :disabled - 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)

• :enabled - 인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)

• :file - 모든 파일 엘리먼트를 선택 ( input[type=file] )

• :header - 헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택

• :hidden - 감춰진 엘리먼트만 선택

• :image - 폼 이미지를 선택 ( input[type=image] )

• :input - 폼 엘리먼트만 선택 ( input, select, textarea, button )

• :not(filter) - 필터의 값을 반대로 변경 ( 1.3 버전에서는 변경됨 )

• :parent - 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택

• :password - 패스워드 엘리먼트만 선택 ( input[type=password] )

• :radio - 라디오 버튼 엘리먼트만 선택 ( input[type=radio] )

• :reset - 리셋 버튼 선택 ( input[type=reset] 이나 button[type=reset] )

• :selected - 선택된 엘리먼트만 선택

• :submit - 전송 버튼을 선택 ( button[type=submit] 이나 input[type=submit] )

• :text - 텍스트 엘리먼트만 선택 ( input[type=text] )

• :visible - 보이는 엘리먼트만 선택

• :checkbox:checked:enabled - 활성화되고 선택된 체크박스만 선택

• :not 필터

• - 필터 결과가 반대로 나오게 함.

• - CSS 필터에서 지원

• - jQuery 정의 셀렉터에서도 동작

• - 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다.

• - 모두 콜론 문자(:)나 대괄호 문자([)로 시작.

• input:not(:checkbox) - 체크박스가 아닌 <input> 엘리먼트 선택

• 필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

• 찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.