[jQuery] jQuery 기본 사용법

728x90

Query는 HTML 문서의 탐색, 조작, 이벤트 처리 등을 간편하게 수행하기 위한 자바스크립트 라이브러리이다.

크로스 브라우저 호환성을 제공하며, DOM 조작과 애니메이션 등을 간소화하여 개발자들이 웹 애플리케이션을 보다 쉽게 개발할 수 있도록 도와준다.

특징

간결한 문법:

간결하고 직관적인 문법을 제공하여 개발자가 복잡한 DOM 조작을 간단하게 수행할 수 있습니다. CSS 선택자를 사용하여 요소를 선택하고, 메소드 체이닝을 통해 다양한 작업을 연속적으로 수행할 수 있습니다.

DOM 조작:

HTML 문서의 요소를 선택하고, 속성을 변경하거나 삽입, 삭제, 이동할 수 있는 다양한 DOM 조작 기능을 제공합니다. 이를 통해 웹 페이지의 동적인 변경이 가능하며, UI 요소의 상호작용을 구현할 수 있습니다.

이벤트 처리:

이벤트 처리를 간편하게 수행할 수 있도록 도와줍니다. 요소에 이벤트 핸들러를 연결하고, 이벤트 발생 시 적절한 동작을 수행할 수 있습니다. 이를 통해 클릭, 호버, 스크롤 등의 다양한 이벤트에 대응할 수 있습니다.

AJAX 기능:

AJAX를 지원하여 비동기적으로 서버와 데이터를 주고받을 수 있습니다. AJAX 요청을 보내고 응답을 처리하는 기능을 간편하게 사용할 수 있어, 동적인 웹 페이지나 웹 애플리케이션의 데이터 처리에 유용합니다.

애니메이션:

애니메이션 효과를 쉽게 추가할 수 있는 기능을 제공합니다. 요소의 페이드 인/아웃, 이동, 크기 조절 등 다양한 애니메이션 효과를 적용할 수 있으며, 시각적인 요소를 더욱 동적으로 만들 수 있습니다.

💡 사용 방법

jQuery 로드

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

요소 선택:

$() 함수를 사용하여 HTML 요소를 선택할 수 있습니다. CSS 선택자를 인자로 전달하여 요소를 선택합니다.

$(document).ready(function() {
  // 문서가 로드되면 실행될 코드
  var element = $("#myElement"); // ID가 "myElement"인 요소 선택
  var elements = $(".myClass"); // 클래스가 "myClass"인 모든 요소 선택
});

이벤트 처리:

on() 함수를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 선택한 요소에서 발생하는 이벤트에 대한 동작을 정의합니다.

$(document).ready(function() {
  $("#myButton").on("click", function() {
    // 버튼이 클릭되었을 때 실행될 코드
    alert("Button clicked!");
  });
});

DOM 조작:

선택한 요소를 조작하거나 속성을 변경할 수 있습니다. 다양한 jQuery 메소드를 사용하여 DOM을 조작할 수 있습니다.

$(document).ready(function() {
  // 텍스트 변경
  $("#myElement").text("New text");

  // 속성 변경
  $("#myImage").attr("src", "new-image.jpg");

  // 클래스 추가/제거
  $("#myElement").addClass("highlight");
  $("#myElement").removeClass("highlight");
});

AJAX 요청:

$.ajax() 함수를 사용하여 비동기적으로 서버와 데이터를 주고받을 수 있습니다.

$(document).ready(function() {
  $.ajax({
    url: "data.php",
    method: "GET",
    success: function(response) {
      // 요청이 성공했을 때 실행될 코드
      console.log(response);
    },
    error: function() {
      // 요청이 실패했을 때 실행될 코드
      alert("Error occurred");
    }
  });
});

https://jquery.com/

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com