jQuery

👣 개요

jQuery는 문서 객체 모델(DOM) 조작, 이벤트 핸들링, 애니메이션 효과, Ajax 기능 등을
포함한 다양한 유틸리티를 제공한다.
이로 인해 웹 개발자들은 복잡한 자바스크립트 코드를 더 간단하고 간결하게 작성할 수 있으며,
크로스 브라우징 이슈를 보다 쉽게 해결할 수 있다.

jQuery는 다음과 같은 장점을 가지고 있다.

1. 크로스 브라우징 이슈 해결
    jQuery는 크로스 브라우징 이슈를 추상화하여 동일한 코드가 다양한 브라우저에서 작동하도록 보장한다.
2. 쉬운 DOM 조작
   jQuery는 간단한 선택자를 이용하여 HTML 문서의 요소들을 쉽게 선택하고 조작할 수 있도록 도와준다.
3. 이벤트 처리의 단순화
   jQuery는 이벤트 핸들링을 간소화하여 특정 이벤트에 대한 처리를 쉽게 할 수 있다.
4. 애니메이션 효과
   jQuery는 웹 요소들의 애니메이션 효과를 쉽게 추가하거나 제어할 수 있도록 도와준다.
5. Ajax의 간편화
   jQuery는 Ajax를 사용한 비동기 통신을 더욱 쉽게 구현할 수 있게 해준다.

👣 크로스 브라우징 이슈

웹 페이지 또는 웹 애플리케이션이 여러 웹 브라우저에서 동일하게 동작하지 않는 문제를 의미한다.
서로 다른 브라우저들은 자바스크립트 엔진, HTML 렌더링 방식, CSS 지원 등에 차이가 있기 때문에
동일한 코드가 각 브라우저에서 모두 일관되게 작동하는 것이 어려울 수 있다.

예를 들어, 다음 코드는 브라우저에 따라 다른 문법을 가지고 있다.

<!-- HTML -->
<input type="text" id="myInput" value="Initial Value">

// JavaScript
const inputElement = document.getElementById('myInput');

// 값 설정 방법 (차이점)
//// 크롬과 최신 브라우저:
inputElement.value = 'New Value';

//// 파이어폭스:
inputElement.setAttribute('value', 'New Value');

위와 같이 각 브라우저마다 다른 문법을 가지고 있기 때문에 브라우저 독립적인 문법이 필요하다.

👣 사용 방법

jQuery는 Bootstrap 처럼 CDN을 이용할 수 있다.
[CDN은 웹에서 스크립트 또는 라이브러리 파일을 더 빠르게 제공하기 위해 전 세계에 분산된 서버]
아래 코드를 head 태그 내부 혹은 body 태그 맨 끝에 위치시키면 사용할 수 있다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

👣 주요 문법

DOM 요소 선택 - [$( 'CSS 선택자' )]
DOM 요소는 'CSS 선택자'를 이용해서 선택할 수 있다.
아래는 제시된 HTML 요소를 선택하는 다양한 방법이다.

// HTML: <div id="myDiv">Hello, jQuery!</div>
const myDiv = $('#myDiv'); // ID 선택자
const paragraphs = $('p'); // 태그 선택자
const myClassElements = $('.myClass'); // 클래스 선택자
const allElements = $('*'); // 모든 요소 선택

이벤트 핸들링 - [.on( 'Callback 함수' )]
메서드를 사용해서 이벤트 등록.

// HTML: <button id="myButton">Click Me</button>
$('#myButton').on('click', function() {
  alert('Button clicked!');
});

DOM 조작 - [.text, .append, .css]
DOM 요소를 조작함.

// HTML: <div id="myDiv">Hello</div>
const myDiv = $('#myDiv');
myDiv.text('Hello, jQuery!'); // 텍스트 변경
myDiv.append('<p>How are you?</p>'); // 요소 추가
myDiv.css('color', 'blue'); // 스타일 변경

요소 순회 - [.each( 'Callback 함수' )]
선택한 요소들에 대해 반복 작업 가능.

// HTML: <ul id="myList"><li>Item 1</li><li>Item 2</li></ul>
$('#myList li').each(function(index) {
  console.log('Index ' + index + ': ' + $(this).text());
});

ajax 요청 - [$.ajax(  )]
서버와의 통신을 쉽게 가능하게 함.

$.ajax({
  url: 'URL',                // 요청을 보낼 서버의 URL
  method: 'GET',             // 요청 방식 (GET, POST, PUT, DELETE 등)
  dataType: 'json',          // 응답 데이터 타입 (json, xml, html, text 등)
  data: { key1: 'value1' },  // 서버에 전송할 데이터 (JSON 형식)
  success: function(data) {  // 요청이 성공했을 때 호출되는 콜백 함수
    // 서버 응답을 처리하는 로직
  },
  error: function(xhr, status, error) { // 요청이 실패했을 때 호출되는 콜백 함수
    // 에러 처리 로직
  }
});

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('Received data:', data);
  },
  error: function(xhr, status, error) {
    console.error('Error occurred:', error);
  }
});

애니메이션 - [.animate( 'CSS 관련 Object', '소요 시간' )]
애니메이션 효과도 추가할 수 있다.
파라미터로 들어가는 CSS 값으로 서서히 변해간다.

// HTML: <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
$('#myDiv').animate({
  width: '200px',
  height: '200px',
  backgroundColor: 'blue'
}, 1000); // 1초 동안 애니메이션 실행

페이지 시작 시, 초기화 - [$(document).ready(function ())]
페이지가 처음으로 생성될 때, 초기화를 위한 코드

$(document).ready(function() {
    fetch("http://...")
    .then(res => res.json())
    .then(data => {
        console.log(data)
    })
})

 

👣 CSS 선택자

CSS 선택자