jQuery 사용법

by


jQuery 란 무엇입니까?

안녕하세요!
jQuery는 많은 웹 개발자가 사용하는 가장 인기 있는 JavaScript 라이브러리 중 하나입니다.

이 기사에서는 jQuery를 사용하는 방법을 배웁니다.

1. jQuery 라이브러리 가져오기

jQuery 라이브러리는 다음과 같이 가져올 수 있습니다.

'추천 관련글, 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

에 위의 코드를 삽입하면 됩니다.

탭 내부. 위의 코드는 jQuery 공식 웹 사이트에서 호스팅되는 최신 버전의 jQuery 라이브러리를 로드합니다.

2. 문서 개체 선택

jQuery를 사용하면 CSS 선택기를 사용하여 문서 개체를 선택할 수 있습니다.

이벤트를 조작하거나 선택한 문서 개체에 이벤트를 추가할 수 있습니다.

$(document).ready(function() {
  // 문서 객체 선택하기
  $('p').click(function() {
    // 클릭 이벤트 추가하기
    $(this).hide();
  });
});

위의 코드는 문서가 준비되었을 때 선택합니다.

레이블($(document).ready()) 및 클릭 이벤트($(‘p’))를 추가했습니다.

클릭 이벤트가 발생할 때 문서 객체($(this))를 숨깁니다(.hide()).

3. 문서 개체 조작

선택한 문서 개체에 대해 다양한 작업을 수행할 수 있습니다.

$(document).ready(function() {
  // 문서 객체 선택하기
  $('p').click(function() {
    // 문서 객체 조작하기
    $(this).css('color', 'red');
    $(this).slideUp();
  });
});

위의 코드는 문서가 준비되었을 때 선택합니다.

label ($(‘p’)) ($(document).ready()) 및 클릭 이벤트를 추가했습니다.

클릭 이벤트 발생 시 문서 객체($(this))의 텍스트 색상(.css(‘color’, ‘red’))을 red($(this)).css(‘color’, ‘red’로 변경 ‘ ) ) 슬라이드 업($(this).slideUp()).

4. Ajax 요청 보내기

jQuery를 사용하면 Ajax 요청을 보내고 응답을 처리할 수 있습니다.

$(document).ready(function() {
  // Ajax 요청 보내기
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'GET',
    success: function(response) {
      // 응답 처리하기
      $('p').text(response.title);
    }
  });
});

위의 코드는 문서가 준비되면($(document).ready()) Ajax 요청을 보내고 응답이 성공하면(success: function(response)),

response.title의 레이블 텍스트 print($(‘p’).text(답변.제목)). 이때 Ajax 요청을 보낼 URL과 HTTP 메소드는 각각 url과 method 옵션에 지정한다.

5. 이벤트 처리

jQuery를 사용하면 다양한 이벤트를 처리할 수 있습니다.

$(document).ready(function() {
  // 이벤트 처리하기
  $('button').click(function() {
    $('p').toggle();
  });
});

위의 코드는 문서가 준비되었을 때 선택합니다.