▶ JavaScript vs jQuery

JavaScript jQuery Selectors

JavaScript jQuery Selectors: jQuery에서 요소 선택하기

jQuery는 JavaScript 라이브러리로, DOM 조작을 간편하게 해주는 다양한 기능을 제공합니다. 그중 **선택자(selectors)**는 HTML 문서에서 특정 요소를 선택하여 조작하는 데 사용됩니다. 이 가이드는 jQuery 선택자의 종류, 사용법 및 예제에 대해 설명합니다.

1. jQuery 선택자란?

jQuery 선택자는 HTML 요소를 선택하여 해당 요소에 대해 조작을 수행할 수 있게 해주는 기능입니다. jQuery는 CSS 선택자와 유사한 문법을 사용하여 요소를 선택합니다.

1.1. 기본 사용법

jQuery에서 선택자는 $ 기호를 사용하여 시작합니다. 기본적인 선택자는 다음과 같은 형태입니다:

$(selector);

selector: 선택하려는 HTML 요소를 지정하는 문자열.

2. jQuery 선택자의 종류

jQuery 선택자는 다양한 형태로 사용할 수 있으며, 그 중 일부는 다음과 같습니다.

2.1. 기본 선택자

태그 선택자: 특정 태그 이름을 가진 모든 요소 선택.
```
$('p'); // 모든 <p> 요소 선택
```

ID 선택자: 특정 ID를 가진 요소 선택.

$('#myId'); // ID가 "myId"인 요소 선택

클래스 선택자: 특정 클래스를 가진 모든 요소 선택.
```
$('.myClass'); // 클래스가 "myClass"인 모든 요소 선택
```

2.2. 속성 선택자

속성 선택자: 특정 속성을 가진 요소 선택.

$('[type="text"]'); // type 속성이 "text"인 모든 요소 선택

2.3. 조합 선택자

자식 선택자: 특정 요소의 자식 요소 선택.

$('ul > li'); // 모든 <ul>의 직접적인 <li> 자식 요소 선택

후손 선택자: 특정 요소의 모든 후손 요소 선택.
```
$('div p'); // 모든 <div> 내의 <p> 요소 선택
```

형제 선택자: 특정 요소의 형제 요소 선택.

$('#myId + p'); // ID가 "myId"인 요소의 다음 형제 <p> 요소 선택

2.4. 필터 선택자

첫 번째 요소 선택: 첫 번째 요소를 선택합니다.
```
$('li:first'); // 첫 번째 <li> 요소 선택
```
마지막 요소 선택: 마지막 요소를 선택합니다.
```
$('li:last'); // 마지막 <li> 요소 선택
```
특정 인덱스의 요소 선택: 특정 인덱스의 요소를 선택합니다.
```
$('li:eq(2)'); // 세 번째 <li> 요소 선택 (0부터 시작)
```
일치하는 요소 필터링: 특정 조건에 맞는 요소만 선택합니다.
```
$('input:checked'); // 체크된 모든 <input> 요소 선택
```

3. jQuery 선택자 예제

3.1. HTML 코드 예제

아래는 jQuery 선택자를 사용하는 예제 HTML 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Selectors Example</title>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <script>
        $(document).ready(function() {
            // ID 선택자
            $('#myButton').click(function() {
                alert('Button clicked!');
            });

            // 클래스 선택자
            $('.myClass').css('color', 'blue'); // 모든 클래스를 파란색으로 변경

            // 자식 선택자
            $('ul > li').css('font-weight', 'bold'); // 모든 <ul>의 직접 자식 <li> 요소를 굵게 표시
        });
    </script>
</head>
<body>
    <h1>jQuery Selectors Example</h1>
    <button id="myButton">Click Me</button>
    <ul>
        <li class="myClass">Item 1</li>
        <li class="myClass">Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

위의 코드는 ID 선택자와 클래스 선택자를 사용하여 버튼 클릭 이벤트와 요소 스타일을 조작하는 방법을 보여줍니다.

4. 요약

JavaScriptON jQuery Selectors는 jQuery에서 HTML 요소를 선택하고 조작하는 데 필수적인 기능입니다. 다양한 선택자 타입을 사용하여 필요한 요소를 쉽게 선택할 수 있으며, 이를 통해 웹 페이지의 동적인 조작이 가능합니다.

기본 선택자: 태그, ID, 클래스 선택.
속성 선택자: 특정 속성을 가진 요소 선택.
조합 선택자: 자식, 후손, 형제 요소 선택.
필터 선택자: 첫 번째, 마지막, 특정 인덱스의 요소 선택.

jQuery 선택자를 활용하여 효율적으로 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript