jQuery 셀렉터(selectors)는 jQuery 라이브러이의 가장 중요한 부분들 중 하나입니다.
jQuery 셀렉터를 사용하면 HTML 요소를 선택하고 조작할 수 있습니다.
jQuery 셀렉터는 이름, id, 클래스, 유형(types), 속성(attributes), 속성 값 등을 기반으로 HTML 요소를 “찾기(즉, 선택)“에 사용됩니다.
기존의 CSS 셀렉터를 기반으로 하고, 추가로 사용자 지정 셀텍터가 있습니다.
jQuery의 모든 셀렉터는 달러 기호와 괄호 $()로 시작합니다.
jQuery 요소 셀렉터는 요소 이름을 기반으로 요소를 선택합니다.
다음과 같이 페이지에서 모든 <p> 요소를 선택할 수 있습니다.
$("p")
사용자가 버튼을 클릭하면, 모든 <p> 요소들이 숨겨집니다.
$(document).ready(function() { $("button").click(function() { $("p").hide(); }); });
jQuery #id 셀렉터는 HTML 태그의 id 속성을 사용하여 특정 요소를 찾습니다.
id는 페이지 내에서 유일해야 해서, 단 하나의 유일한 요소를 찾으려면 #id 셀렉터를 사용해야 합니다.
특정 id를 가진 요소를 찾으려면, 해시 문자와 HTML 요소의 id를 차례로 작성하십시오.
$("#test")
사용자가 버튼을 클릴하면, id=“test”를 가진 요소는 숨겨집니다.
$(document).ready(function() { $("button").click(function() { $("#test").hide(); }); });
jQuery .class 셀렉터는 특정 클래스를 가진 요소를 찾습니다.
특정 클래스를 가진 요소를 찾으려면, 마침표 문자(period character)를 먼저 쓴 이후 클래스 이름을 작성하십시오.
$(".test")
사용자가 버튼을 클릭하면 class = “test”를 가진 요소가 숨겨집니다.
$(document).ready(function() { $("button").click(function() { $(".test").hide(); }); });
| Syntax | Description |
|---|---|
| $(“*”) | 모든 요소들을 선택합니다. |
| $(this) | 현재의 HTML 요소를 선택합니다. |
| $(“p.intro”) | class=“intro”를 가진 모든 <p> 요소들을 선택합니다. |
| $(“p:first”) | 첫 번째 <p> 요소를 선택합니다. |
| $(“ul li:first”) | 첫 번째 <ul>의 첫 번째 <li> 요소를 선택합니다. |
| $(“ul li:first-child”) | 모든 <ul>의 첫 번째 <li> 요소를 선택합니다. |
| $(”[href]”) | href 속성을 가진 모든 요소들을 선택합니다. |
| $(“a[target='_blank']”) | “_blank”와 동일한 타겟 속성 값을 가진 모든 <a> 요소들을 선택합니다. |
| $(“a[target!='_blank']”) | “_blank”와 동일하지 않은 타겟 속성 값을 가진 모든 <a> 요소들을 선택합니다. |
| $(“:button”) | 모든 <button> 요소들과 type=button인 <input> 요소들을 선택합니다. |
| $(“tr:even”) | 모든 짝수번째의 <tr> 요소들을 선택합니다. |
| $(“tr:odd”) | 모든 홀수번째의 <tr> 요소들을 선택합니다. |
jQuery 셀렉터 테스터를 사용하여 다양한 셀렉터를 확인하세요.
모든 jQuery 셀렉터를 참조하려면, jQuery Selectors Reference로 이동하십시오.
웹 사이트에 많은 페이지가 포함되어 있고, jQuery 함수를 쉽게 유지 관리하려면,
jQuery 함수를 별도의 .js 파일에 넣을 수 있습니다.
이 튜토리얼에서 jQuery를 시연할 때, 함수는 <head> 섹션에 직접 추가됩니다.
그러나 때로는 다음과 같이 별도의 파일에 배치하는 것이 좋습니다 (.js 파일을 참조하도록 src 속성을 사용합니다):
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>