[jQuery] SELECTOR

jQuery에서 가장 흔하게(?) 많이 사용하는 기능 중에 하나 바로 셀렉터라고 해도 과언이 아니죠.

그 중에서도 기초가 되는 몇 가지만 뽑아서 정의해 보겠습니다.

1. 요소 선택기 (태그 선택기)

   html 안에 있는 모든 P태그를 찾습니다.

$("P")

2. ID 선택기

  <input type="text" id="abc1" name="abc"/>

  <input type="text" id="abc2" name="abc"/>

  이와 같은 name이 같은 요소가 존재한다면 id attribute를 추가하여 유일한 ID값을 지정 후

  아래와 같이 아이디 앞에 #을 추가하여 사용합니다.

$("#abc1")

3. .class 선택기

  <input type="text" id="abc1" name="abc" class="text_box"/>

  CSS의 class값을 지정한 element만 찾고 싶다면 아래 같이 class명 앞에 .(마침표)를 추가하여 사용합니다.

$(".text_box");

4. 전체 선택기

  html상에서 전체 요소를 찾기는 경우는 극히 드물다고 보는데 아무쪼록 전체 선택 기능도 있습니다.

$("*")

   테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_all2

>

5. 본 html 요소 선택기

  흔히 많이 쓰는 요소라고 생각됩니다.

  예를 들어 버튼에 클릭 이벤트를 주고 그 버튼을 클릭했을 때 이벤트가 발생한 버튼에 어떤 효과를 줄 때 많이 사용합니다.

  어떤 특정 값을 ajax 처리하여 저장한 후 해당 버튼을 숨기거나 비활성화 처리할 때처럼 말이죠.

$(this) $("button").click(function(){    $(this).hide(); });

  테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_this

  

6. 요소 + 클래스명

   예를들어 p태그 중에 intro라는 클래스로 정의한 것만 찾고 싶을 때는

   아래처럼 "요소명.클래스명"이라고 정의하여 사용합니다.

$("p.intro")

   테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_pclass

7. 첫 번째 요소

  p태그들 중에 첫번째로 나오는 p태그를 찾을 때는 아래와 같이 정의합니다.

$("p:first")

  테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_pfirst

8. 자식들 중 첫 번째 요소

  여러 개의 ul태그들이 또 각각의 li들이 존재한다고 했을 때, 첫번째 li만 찾는 경우는 아래와 같이 정의합니다.

  쉽게 말해서 할머니(html)가 증손자를 찾는 경우겠네요. 자식들(ul)의 자식들인 손자(li)들 중에 증손 하나만 해당됩니다.

$("ul li:first")

  테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_ullifirst

9. 자식들 중 첫번째 요소들

  위에 8번 예제에서는 증손만 찾는다면, 이번에는 자식들의 첫째들을 한번에 찾는 경우입니다.

$("ul li:first-child")

  테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_ullifirstchild

10. 속성

  예를 들어 a태그인 속성인 href속성을 찾고자 할 때는 속성이름 양쪽에 중괄호([, ])를 감싸줍니다.

$("[href]")

  테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_hrefattr

11. 컨포넌트 타입

   html의 컨포넌트들에 input타입이 button인 것을 찾고자 할 때는 아래와 같이 정의합니다.

$(":button")

   button부터해서 :text, :password, :radio, :checkbox 등 많은 컨포넌트 타입을 셀렉트할 수 있습니다.

   종류 참고 URL : https://api.jquery.com/category/selectors/form-selectors/

   테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_button2

12. 홀수, 짝수 요소

  요소들 중에 홀수 또는 짝수 순서에 해당하는 요소들을 선택할 수 있습니다.

  흔히 게시판 목록에 홀수나 짝수 열 배경색을 구분해줄 때 사용한다고 보시면 됩니다.

$("tr:odd") $("tr:even")

   테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_odd

                         https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_even

참조 사이트)  https://www.w3schools.com