jQuery 선택자 및 기본 문법

🧑‍💻 선택자 및 기본 문법

이번 강좌에서는 jQuery의 핵심 기능 중 하나인 선택자(Selectors)와 기본 문법에 대해 알아보겠습니다. jQuery에서 선택자는 HTML 요소를 쉽게 찾고 조작할 수 있도록 도와줍니다. CSS 선택자와 비슷한 문법을 사용하여 원하는 요소를 선택할 수 있으며, 선택한 요소에 다양한 작업을 적용할 수 있습니다.

📌 jQuery 선택자란?

jQuery의 선택자는 문서의 특정 요소를 쉽게 선택할 수 있도록 도와주는 메서드입니다. jQuery 선택자는 주로 CSS 선택자와 비슷한 문법을 따르지만, jQuery의 특성을 활용하여 더 많은 기능을 제공합니다. 선택자를 통해 원하는 요소를 쉽게 선택하고, 해당 요소에 스타일을 변경하거나 이벤트를 추가할 수 있습니다.

✅ 기본 선택자

• 전체 선택자 : $(selector) - HTML 문서 내 모든 요소를 선택합니다.
• 아이디 선택자 : $('#id') - 지정된 ID를 가진 요소를 선택합니다.
• 클래스 선택자 : $('.class') - 지정된 클래스를 가진 모든 요소를 선택합니다.
• 요소 선택자 : $(element) - 지정된 HTML 태그를 가진 요소를 선택합니다.

예를 들어, 아래와 같이 선택자를 사용할 수 있습니다:

<!-- 아이디 선택자 -->
$('#myId')

<!-- 클래스 선택자 -->
$('.myClass')

<!-- 요소 선택자 -->
$('div')

✅ 선택자 예제

이제 간단한 예제를 통해 jQuery 선택자를 사용하여 요소를 선택하고, 해당 요소에 작업을 적용하는 방법을 살펴보겠습니다.

<p id="text">이 텍스트는 jQuery로 조작할 수 있습니다.</p>
<button id="changeTextButton">텍스트 변경</button>

이 텍스트는 jQuery로 조작할 수 있습니다.

텍스트 변경

<script>
  $(document).ready(function() {
    $('#changeTextButton').click(function() {
      $('#text').text('텍스트가 변경되었습니다!');
    });
  });
</script>

위 예제에서 `$('#changeTextButton')`는 버튼을 선택하고, 버튼을 클릭하면 `$('#text')`로 선택한 텍스트를 변경합니다. jQuery에서 `#id` 형태로 아이디를 지정하여 요소를 선택하는 방식입니다.

📌 기본 문법

jQuery의 기본 문법은 다음과 같은 형식을 따릅니다. jQuery는 `$()` 형태로 시작하며, 이를 통해 HTML 요소를 선택하고, 다양한 작업을 수행할 수 있습니다.

✅ 기본 구조

$(selector).action();
  

- selector : 선택할 HTML 요소를 지정합니다.

- action : 선택한 요소에 대해 수행할 작업을 지정합니다.

예를 들어, 아래의 코드는 HTML 요소를 선택하고, 그 요소에 스타일을 적용하는 방법을 보여줍니다:

$('p').css('color', 'blue'); // 모든

요소의 텍스트 색을 파란색으로 변경

위 코드는 모든 <p> 요소를 선택하여 텍스트 색을 파란색으로 변경합니다.

✅ 자주 사용하는 jQuery 메서드

• .css(property, value) : 선택한 요소에 CSS 스타일을 적용합니다.
• .html(content) : 선택한 요소의 HTML 내용을 변경하거나 가져옵니다.
• .text(content) : 선택한 요소의 텍스트 내용을 변경하거나 가져옵니다.
• .click(function) : 클릭 이벤트를 처리합니다.
• .fadeIn(), .fadeOut() : 애니메이션 효과를 적용합니다.

📌 선택자 활용 예제

이제 몇 가지 선택자와 기본 문법을 활용하여 실제 예제를 만들어 보겠습니다.

<!-- HTML -->
<button class="btn">버튼 1</button>
<button class="btn">버튼 2</button>
<button class="btn">버튼 3</button>


  $(document).ready(function() {
    $('.btn').click(function() {
      $(this).css('background-color', 'red');
    });
  });

이 예제에서는 `.btn` 클래스를 가진 모든 버튼을 선택하고, 버튼을 클릭할 때마다 클릭한 버튼의 배경색을 빨간색으로 변경하는 방법을 보여줍니다. `$(this)`는 현재 클릭된 버튼을 참조합니다.

📌 결론

jQuery의 선택자와 기본 문법을 이해하는 것은 웹 개발에서 매우 중요합니다. 선택자를 사용하여 원하는 요소를 정확히 찾고, 다양한 작업을 쉽게 처리할 수 있습니다. 선택자와 기본 문법을 잘 활용하면, JavaScript를 사용할 때 코드가 간결해지고 효율성이 높아집니다.