jQuery는 HTML 문서의 요소를 선택하고 다루는 데 사용되는 강력한 라이브러리입니다. jQuery는 직관적이고 간편한 선택자 문법을 제공하여 웹 개발을 더욱 편리하게 만들어줍니다. 이 블로그 포스팅에서는 다양한 jQuery 선택자 예제를 통해 선택자 문법을 자세히 살펴보겠습니다.
1. 요소 선택자
// 모든 <p> 요소 선택
$("p")
2. 클래스 선택자
// 클래스가 "highlight"인 요소 선택
$(".highlight")
3. 아이디 선택자
// 아이디가 "myElement"인 요소 선택
$("#myElement")
4. 자손 선택자
// <ul> 아래의 모든 <li> 요소 선택
$("ul li")
5. 부모-자식 선택자
// <ul> 바로 아래의 <li> 요소 선택
$("ul > li")
6. 속성 선택자
// type 속성이 "button"인 요소 선택
$("[type='button']")
7. 첫 번째 요소 선택
// 첫 번째 <p> 요소 선택
$("p:first")
8. 마지막 요소 선택
// 마지막 <p> 요소 선택
$("p:last")
9. 짝수 번째 요소 선택
// 짝수 번째 <tr> 요소 선택
$("tr:even")
10. 홀수 번째 요소 선택
// 홀수 번째 <tr> 요소 선택
$("tr:odd")
11. 필터(Filter) 선택자
// 클래스가 "special"인 <p> 요소 선택
$("p").filter(".special")
12. 인접 형제 선택자
// <h2> 다음에 있는 <p> 요소 선택
$("h2 + p")
13. 다음 형제 선택자
// <h2> 다음에 있는 모든 <p> 요소 선택
$("h2 ~ p")
14. 속성 존재 여부 선택자
// href 속성을 가진 모든 <a> 요소 선택
$("a[href]")
15. 속성 시작 선택자
// href 속성 값이 "https://"로 시작하는 요소 선택
$("[href^='https://']")
16. 속성 종료 선택자
// href 속성 값이 ".pdf"로 끝나는 요소 선택
$("[href$='.pdf']")
17. 속성 포함 선택자
// title 속성 값에 "example"이 포함된 요소 선택
$("[title*='example']")
18. 체인 메소드 활용
$("ul")
.addClass("list-style")
.find("li")
.css("color", "blue");
위 예제에서는 체인 메소드를 사용하여 <ul> 요소에 list-style 클래스를 추가하고, 그 하위의 <li> 요소의 글자 색상을 파란색으로 설정합니다.
jQuery의 강력한 선택자 문법과 다양한 메소드를 활용하면 HTML 문서의 요소를 쉽게 선택하고 조작할 수 있습니다. 이러한 선택자를 숙지하면 웹 개발 작업을 효과적으로 수행할 수 있으며, 사용자 경험을 향상시키는 데 도움이 됩니다. jQuery를 활용하여 웹 애플리케이션을 더욱 동적으로 만들어보세요.