jQuery 연결 방식과 선택자에 대해

안녕하세요. 오늘은 jQuery 연결 방식과 선택자에 대해 정리하겠습니다.

먼저 jQuery를 CDN 방식으로 연결한 후 기본 형식과 다양한 선택자들을 사용하는 방법에 대해 알아보겠습니다.

jQuery CDN 방식 연결

jQuery를 CDN(Content Delivery Network)을 통해 연결하려면 다음과 같이 HTML 문서에 <script> 태그를 추가합니다.

<!-- jQuery CDN을 사용하여 jQuery 연결 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

위의 코드는 Google CDN을 사용하여 jQuery 버전 3.6.0을 연결하는 예시입니다. 이제 jQuery를 사용할 준비가 되었습니다.

jQuery 기본 형식

jQuery는 기본적으로 $() 함수를 사용하여 DOM 요소를 선택하고 조작합니다. 선택자를 $() 함수에 전달하여 원하는 요소를 선택할 수 있습니다.

$(document).ready(function() {
    // jQuery 코드 작성 영역
});

위의 코드는 문서가 준비되면 jQuery 코드를 실행하기 위한 구문입니다.

jQuery 선택자

기본 선택자

• 요소 선택자: 특정 HTML 요소를 선택합니다.

  $('p') // 모든 <p> 요소를 선택
  

• 클래스 선택자: 특정 클래스를 가진 요소를 선택합니다.

  $('.myClass') // 클래스가 'myClass'인 요소를 선택
  

• ID 선택자: 특정 ID를 가진 요소를 선택합니다.

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

속성 선택자

• 속성 존재 선택자: 특정 속성을 가진 요소를 선택합니다.

  $('[data-name]') // data-name 속성을 가진 요소를 선택
  

• 속성 값 선택자: 특정 속성과 값을 가진 요소를 선택합니다.

  $('[data-role="button"]') // data-role 속성 값이 'button'인 요소를 선택
  

필터 선택자

• 자식 필터 선택자: 특정 자식 요소를 선택합니다.

  $('ul > li') // <ul>의 직계 자식 <li> 요소를 선택
  

• 콘텐츠 필터 선택자: 특정 콘텐츠를 가진 요소를 선택합니다.

  $('div:contains("Hello")') // "Hello"를 포함한 <div> 요소를 선택
  

• 폼 필터 선택자: 폼 요소를 선택합니다.

  $('input:radio') // 라디오 버튼 요소를 선택
  

• 가시성 필터 선택자: 화면에 표시되는 요소를 선택합니다.

  $('div:hidden') // 숨겨진 <div> 요소를 선택
  

탐색 선택자

• 기본 탐색 선택자: DOM 요소를 탐색하여 선택합니다.

  $('li:first') // 첫 번째 <li> 요소를 선택
  

• 기타 탐색 선택자: 다양한 탐색 방법을 제공합니다.

  $('li').eq(2) // 인덱스 2에 해당하는 <li> 요소를 선택
  

위의 선택자들은 jQuery에서 제공하는 일부 기본적인 선택자 예시입니다. 더 많은 선택자와 사용 방법은 를 참고하시기 바랍니다.

이제 jQuery를 CDN 방식으로 연결하고 다양한 선택자를 사용하여 DOM 요소를 선택하고 조작할 수 있는 기본적인 방법을 익혔습니다. 오늘도 필자의 부족한 글을 읽어주셔서 감사합니다.