본문 바로가기
제이쿼리

기본 선택자

devjones 2020. 9. 30. 18:08

제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다.

구분 종류 사용법 설명
직접 선택자 전체 선택자 $("*") 모든 요소를 선택한다.
아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택한다.
클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요소를 선택한다.
요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택한다.
그룹 선택자 $("선택 1, 선택2, 선택3 ... 선택 n") 선택 1, 선택2, 선택3 ... 선택 n에 지정된 요소들을 한 번에 선택한다.
종속 선택자 $("p.txt_1")
$("p#txt_1")		 <p> 요소 중 class 값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택한다.
인접 관계 선택자 부모 요소 선택자 $("요소 선택").parent() 선택한 요소의 부모 요소를 선택한다.
상위 요소 선택자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택한다.
가장 가까운 상위 요소 선택자 $("요소 선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운<div>만 선택한다.
하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택한다.
자식 요소 선택자 $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다.
자식 요소들 선택자 $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택한다.
형(이전) 요소 선택자 $("요소 선택").prev() 선택한 요소의 바로 이전 요소를 선택한다.
형(이전) 요소들 선택자 $("요소 선택").prevAll() 선택한 요소의 이전 요소 모두를 선택한다.
지정 형(이전) 요소들 선택자 $("요소 선택").prevUntil("요소명") 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택한다.
동생(다음) 요소 선택자 $("요소 선택").next()
$("요소 선택+다음 요소")		 선택한 요소의 다음 요소를 선택한다.
동생(다음) 요소들 선택자 $("요소 선택").nextAll() 선택한 요소의 다음 요소 모두를 선택한다.
지정 동생(다음) 요소들 선택자 $("요소 선택").nextUntil("h2") 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택한다.
전체 형제 요소 선택자 $(".box_1").siblings() class 값이 box_1인 요소의 형제 요소 전체를 선택한다.

 

직접 선택자

직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다. 직접 선택자의 종류로는 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자가 있다.

 

1. 전체 선택자

전체(Universal) 요소를 선택할 때 사용한다. 즉, 이 선택자를 사용하면 현재 HTML의 모든 태그를 선택한다.

 

전체 선택자의 기본형 : $("*")

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script type="text/javascript">

$(function() {
    $("*").css("border", "1px solid blue");
});

</script>

<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>

</body>
</html>

결과

2. 아이디 선택자

아이디 선택자는 아이디 속성에 지정한 값을 포함하는 요소를 선택한다.

 

아이디 선택자의 기본형 : $("#아이디명")

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script type="text/javascript">

$(function() {
    $("#tit").css("background-color", "#ff0").css("border", "2px solid #f00");
});

</script>

<h1>제이쿼리</h1>

<h2 id="tit">선택자</h2>

<h3>직접 선택자</h3>
    
</body>
</html>

결과

 

3. 클래스 선택자

클래스 선택자는 클래스 속성에지정한 값을 포함하는 요소를 선택한다.

 

클래스 선택자의 기본형 : $(".클래스명")

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>

$(function() {
    $(".tit").css("background-color", "#ff0").css("border", "2px dashed #f00");
})

</script>


<h1>제이쿼리</h1>

<h2 class="tit">선택자</h2>

<h3>직접 선택자</h3>

</body>
</html>

결과

 

4. 요소명 선택자

지정한 요소명(Tag Name)과 일치하는 요소를 모두 선택한다.

 

요소명 선택자의 기본형 : $("요소명")

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>

$(function() {
    $("h2").css("background-color", "#0ff").css("border", "2px dashed #f00");
});

</script>

<h1>제이쿼리</h1>

<h2>선택자</h2>

<h3>직접 선택자</h3>

</body>
</html>

결과

5. 그룹 선택자

그룹 선택자는 한 번에 여러 개의 요소를 선택할 때 사용한다.

 

그룹 선택자의 기본형 : $("요소 선택 1, 요소 선택 2, 요소 선택 3, ..., 요소 선택 n");

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>

$(function() {
    $("#tit3, h1").css("background-color", "0ff").css("border", "2px dashed #f00");
})

</script>

<h1>제이쿼리</h1>

<h2>선택자</h2>

<h3 id="tit3">직접 선택자</h3>

<h3>인접 선택자</h3>

</body>
</html>

결과

 

6. 종속 선택자

종속 선택자는 선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용한다.

 

종속 선택자의 기본형 : $("요소명#id 값"), $("요소명.class 값")

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<script>

$(function() {
    $("h1.tit").css("background-color", "#0ff").css("border", "2px dashed #f00");
})

</script>

<h1 class="tit">제이쿼리</h1>

<h2>선택자</h2>

<h3 class="tit">직접 선택자</h3>

</body>
</html>

결과

 

'제이쿼리' 카테고리의 다른 글

[제이쿼리] 형(이전) / 동생(다음) 요소 선택자  (0) 2020.10.04
인접 관계 선택자  (0) 2020.10.01
this와 $(this)의 차이점  (0) 2020.09.20
.wrap  (0) 2020.09.20
제이쿼리 커스텀 태그와 .data  (0) 2020.09.20

'제이쿼리' Related Articles

티스토리툴바