[jQuery] 선택자 종류와 간단 예시

Intro

안녕하세요! Plitche(플리체)입니다. :P
jQuery는 HTML 문서의 요소를 선택하고 조작하는 데 사용되는 JavaScript 라이브러리입니다. 선택자는 jQuery를 사용하여 요소를 찾는 데 사용되는 표현식입니다. 다양한 유형의 선택자가 있으며, 각각 특정 요소 또는 그룹을 선택하는 데 사용됩니다.

1. 태그 선택자

• $("tagname"): 특정 HTML 태그를 선택합니다.

$("p") // 모든 <p> 요소를 선택

2. 아이디 선택자

• $("#id"): 특정 id 속성 값을 가진 요소를 선택합니다.

$("#myElement") // id가 "myElement"인 요소를 선택

 

3. 클래스 선택자

• $(".class"): 특정 class 속성 값을 가진 요소를 선택합니다.

$(".myClass") // class가 "myClass"인 요소를 선택

 

4. 속성 선택자

• $("[attribute='value']"): 특정 속성 값을 가진 요소를 선택합니다.

$("[type='text']") // type 속성 값이 "text"인 요소를 선택

5. 자식 선택자

• $("parent > child"): 특정 부모 요소의 직계 자식 요소를 선택합니다.

$("ul > li") // <ul> 요소의 직계 자식인 <li> 요소를 선택

6. 후속 형제 선택자

• $("prev + next"): 특정 요소의 바로 뒤에 있는 형제 요소를 선택합니다.

$("h2 + p") // <h2> 요소 바로 뒤에 있는 <p> 요소를 선택

7. 중복 선택자

• jQuery를 사용하여 중복 선택을 수행하는 방법은 간단합니다. 일반적으로 선택자를 연속해서 사용하여 중복 선택을 수행할 수 있습니다.

$("#myElement .myClass")

위의 코드는 id가 "myElement"인 요소 내부에 있는 class가 "myClass"인 요소를 선택합니다. 이와 같이 선택자를 연속해서 사용하여 중복 선택을 수행할 수 있습니다.

또한, 선택된 요소에 대한 추가적인 필터링이나 조건을 적용하여 중복 선택을 더 세밀하게 제어할 수도 있습니다. 예를 들어, 클래스 선택자와 속성 선택자를 함께 사용하여 특정 클래스를 가지고 있고 특정 속성 값을 가진 요소를 선택하는 코드는 다음과 같습니다:

$(".myClass[type='text']")

위의 코드는 class가 "myClass"이고 type 속성 값이 "text"인 요소를 선택합니다. 이렇게 선택자를 조합하고 조건을 추가하여 중복 선택을 세밀하게 제어할 수 있습니다.

중복 선택을 수행할 때에는 선택자의 순서와 적용되는 요소의 계층 구조를 고려해야 합니다. 원하는 요소를 정확하게 선택하기 위해 선택자를 올바르게 사용하는 것이 중요합니다.