목차

jQuery Selectors

  • description : jQuery Selectors
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-15


jQuery 셀렉터(selectors)는 jQuery 라이브러이의 가장 중요한 부분들 중 하나입니다.

jQuery Selectors

jQuery 셀렉터를 사용하면 HTML 요소를 선택하고 조작할 수 있습니다.

jQuery 셀렉터는 이름, id, 클래스, 유형(types), 속성(attributes), 속성 값 등을 기반으로 HTML 요소를 “찾기(즉, 선택)“에 사용됩니다.
기존의 CSS 셀렉터를 기반으로 하고, 추가로 사용자 지정 셀텍터가 있습니다.

jQuery의 모든 셀렉터는 달러 기호와 괄호 $()로 시작합니다.

The element Selector

jQuery 요소 셀렉터는 요소 이름을 기반으로 요소를 선택합니다.

다음과 같이 페이지에서 모든 <p> 요소를 선택할 수 있습니다.

$("p")

예제

사용자가 버튼을 클릭하면, 모든 <p> 요소들이 숨겨집니다.

$(document).ready(function() {
  $("button").click(function() {
    $("p").hide();
  });
});

The #id Selector

jQuery #id 셀렉터는 HTML 태그의 id 속성을 사용하여 특정 요소를 찾습니다.

id는 페이지 내에서 유일해야 해서, 단 하나의 유일한 요소를 찾으려면 #id 셀렉터를 사용해야 합니다.

특정 id를 가진 요소를 찾으려면, 해시 문자와 HTML 요소의 id를 차례로 작성하십시오.

$("#test")

예제

사용자가 버튼을 클릴하면, id=“test”를 가진 요소는 숨겨집니다.

$(document).ready(function() {
  $("button").click(function() {
    $("#test").hide();
  });
});

The .class Selector

jQuery .class 셀렉터는 특정 클래스를 가진 요소를 찾습니다.

특정 클래스를 가진 요소를 찾으려면, 마침표 문자(period character)를 먼저 쓴 이후 클래스 이름을 작성하십시오.

$(".test")

예제

사용자가 버튼을 클릭하면 class = “test”를 가진 요소가 숨겨집니다.

$(document).ready(function() {
  $("button").click(function() {
    $(".test").hide();
  });
});

More Examples of jQuery Selectors

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로 이동하십시오.

Functions In a Separate File

웹 사이트에 많은 페이지가 포함되어 있고, 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>