24.10.16(jQuery)

jQuery

• JavaScript의 기능을 간단하게 사용할 수 있도록 도와주는 라이브러리
• 웹 개발에서 자주 사용되는 작업들을 더 쉽게 수행할 수 있도록 다양한 기능 제공
• 장점
  • 코드 간결화
    • 복잡한 JavaScript 코드를 더 짧고 간결하게 작성할 수 있다.
  • 브라우저 호환성 해결
    • 다양한 브라우저에서 일관되게 동작되도록 설계되어있어 브라우저 간 호환성 문제 자동으로 처리
  • DOM 조작 및 이벤트 처리
    • HTML 요소에 쉽게 접근하고 조작 가능
    • 이벤트(클릭, 마우스 오버 등)를 처리하기 매우 편리
  • AJAX 지원
    • 서버와 비동기 통신을 할 때 AJAX 기능을 이용하면 코드가 훨씬 단순해짐

기본 사용 방법

$() 함수

• jQuery의 핵심 함수
• HTML 문서 내에서 DOM 요소를 선택하는 데 사용
• jQuery 객체를 생성하는 역할
• 형식 : $(selector)
• 예시

// id가 'myDiv'인 요소 선택
$("#myDiv").css("color", "blue");

// id가 'myDiv'인 요소의 텍스트 색상을 파란색으로 바꿈

$(document).ready() 함수

• HTML 문서가 완전히 로드된 후에 jQuery 코드 실행
• 이를 위해 $(document).ready() 함수 실행
• 이 함수 안에 jQuery 코드를 넣으면 페이지가 모두 로드된 후 실행
• 예시

$(document).ready(function() {
  document.write("문서가 준비되었습니다.");
});

// 문서가 준비된 후 콘솔에 메시지 출력

이벤트 처리

• 다양한 이벤트(클릭, 키 입력, 마우스 이동 등)를 쉽게 처리 가능
• on() 메서드를 통해 이벤트 리스너를 추가하거나, 특정 이벤트에 해당하는 간단한 메서드 사용
• 예시

$("#myButton").click(function() {
  alert("버튼이 클릭되었습니다!");
});

// id가 myButton인 버튼이 클릭되면 알림창 띄움

AJAX 통신

• 간단한 방식으로 AJAX 요청을 보낼 수 있도록 도와줌
• AJAX는 페이지 전체를 새로고침하지 않고도 서버와 통신할 수 있는 기술

$.ajax({
  url: "example.php", // 요청할 URL
  type: "POST", // 요청 방식
  data: { name: "John", age: 30 }, // 서버로 보낼 데이터
  success: function(response) {
    document.write("서버 응답: " + response);
  }
});

// 서버의 example.php에 POST 방식으로 데이터를 보내고, 서버에서 응답이 오면 콘솔에 그 응답 출력

jQuery VS JavaScript

• jQuery는 간단한 문법과 강력한 기능을 제공하는 JavaScript 라이브러리
• JavaScript는 더 세밀하게 웹 페이지를 제어할 수 있는 언어
• jQuery는 DOM 조작과 이벤트 처리를 더 쉽게 해주는 도구이지만 JavaScript로도 같은 작업을 할 수 있음.
• jQuery는 JavaScript를 더 빠르고 간편하게 사용할 수 있게 도와주는 역할