jQuery 셀렉터 기초 몇가지 (jQuery selector)

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

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

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

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

$ ( "P")

2. ID 선택기

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

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

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

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

$ ( "# abc1")

3. .class 선택기

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

  CSS의 클래스 값을 사용하는 요소 만 찾고 아래에서 클래스 명 앞에. (마침표)를 추가하여 사용합니다.

$ ( ". text_box");

4. 전체 선택기

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

$ ( "*")

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

>

5. 본 html 요소 선택기

  많이 많이 쓰는 요소라고 생각합니다.

  예를 들어 버튼에 클릭 이벤트를주고 그 버튼을 클릭했을 때 이벤트가 버튼을 사용합니다.

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

$ (이것) $ ( "버튼") .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 : 처음")

  테스트 해보기 :  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 : 첫 자녀")

  테스트 해보기 :  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의 컨포넌트들에 입력 타입 타입이 있고 같이 정의합니다.

$ ( ": 버튼")

   버튼부터해서 : 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