jQuery, Selector 이해 및 선택 조작 하기(예제 포함)

jQuery에서 가장 기본적으로 시작해야 하는 것은 바로 Selector입니다. 어떤 웹페이지 요소를 핸들링하기 위해서는 어떤 요소를 선택했는지를 알아야 하기 때문입니다. jQuery의 Selector 기능에 대해서 알고 이해해보는 시간을 가져보도록 하겠습니다.

 

jQuery, Selector 이해 및 선택 조작 하기(예제 포함)

---

jQuery Selector 개념

jQuery Selector는 웹 페이지의 요소를 선택하기 위한 강력한 기능이며 이를 통해서 특정 요소를 빠르게 찾아 조작하거나 스타일을 변경합니다. jQuery Selector는 CSS를 다룰 수 있는 사람에게는 유사하게 동작하기 때문에 쉬울 수 있으며, 복잡한 DOM 구조에서도 원하는 요소를 빠르게 찾을 수 있습니다.

 

Selector 예제

Selector는 다양한 기능들을 제공하지만 대표적으로 몇가지의 예제를 통해서 접근해보도록 하겠습니다.

 

요소(Element) 이름 선택

// 모든 <p> 태그 선택
$("p")

// 모든 <div> 태그 선택
$("div")

// 모든 <h1> 태그 선택
$("h1")

 

클래스(class) 이름 선택

// result_panel 클래스를 가진 요소 선택
$(".result_panel")

// result_panel 클래스를 가진 <p> 태그 선택
$("p.result_panel")

 

 

 

ID 값으로 선택

// chat_panel 아이디를 가진 요소 선택
$("#chat_panel")

// title 아이디를 가진 요소 선택
$("#title")

 

속성 선택

// href 속성값 모두 선택
$("[href]")

// href 특성 값이 ".jpg"로 끝나는 모든 요소
$("[href$='.jpg']")

// 'data-type' 속성 값이 'custom'인 요소 선택
$("[data-type='custom']")

 

자식 및 후손 요소 선택하기 

// id가 'my-container'인 요소의 모든 <p> 자식 태그 선택
$("#my-container > p")

// id가 'my-container'인 요소의 모든 <p> 후손 태그 선택
$("#my-container p")

 

필터를 활용한 선택

// 첫 번째 <p> 태그 선택
$("p:first")

// 홀수 번째 <li> 태그 선택
$("li:odd")

// 빈 <div> 태그 선택
$("div:empty")

 

위와 같이 jQuery Selector를 사용하면 웹 페이지의 요소 및 속성 들의 값을 쉽게 찾고 선택할 수 있게 됩니다. 위의 예제 말고 보다 다양한 Selector 예제를 원하시면 하단 참고자료의 [2]링크에 들어가시면 좀 더 다양한 예제를 보실 수 있으십니다.

 

연관포스팅

 

jQuery란? 기본 개념과 사용법, 코드 예제로 알아보기

 

참고자료

[1] jQuery- Category: Selectors, https://api.jquery.com/category/selectors/

[2] w3schools - jQuery Selectors, https://www.w3schools.com/jquery/jquery_ref_selectors.asp