jQuery의 강점 중 하나는 확장성이다.

기본 기능 외에도 다양한 기능을 플러그인 형태로 추가할 수 있다.

1. 제이쿼리 플러그인

플러그인은 jQuery 기능을 확장해주는 외부 라이브러리다.

• 슬라이드
• 달력
• 모달
• 애니메이션
• 쿠키 관리

등을 쉽게 구현할 수 있다.

플러그인은 jQuery 문법 체계를 그대로 따른다.

$("#slider").bxSlider();

2. 제이쿼리 UI 플러그인

1) 제이쿼리 UI 플러그인이란?

jQuery UI는 UI 관련 기능을 제공하는 공식 플러그인 모음이다.

① CDN 연동

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

② 주요 기능

• Draggable(드래그)
• Droppable(드롭)
• Datepicker(달력)
• Dialog(팝업창)
• Accordion(아코디언)
• Tabs(탭)

ex.

$("#date").datepicker();

3. bxSlider 플러그인

bxSlider는 이미지 슬라이드 구현 플러그인이다.

• 배너 슬라이드
• 자동 재생
• 좌우 이동
• 반응형 지원

기본 사용

<link rel="stylesheet" href="jquery.bxslider.css">
<script src="jquery.bxslider.min.js"></script>

$(function() {
  $(".slider").bxSlider({
    auto: true,
    pause: 3000,
    speed: 500
  });
});

옵션 예시

4. jQuery-cookie 플러그인

쿠키를 쉽게 관리하기 위한 플러그인이다.

1) 쿠키 저장

$.cookie("username", "John", { expires: 7 });

2) 쿠키 읽기

$.cookie("username");

3) 쿠키 삭제

$.removeCookie("username");

5. 플러그인 직접 제작하기

jQuery는 직접 플러그인을 제작할 수 있다.

1) $.fn.extend() 메서드

$.fn은 jQuery의 프로토타입 객체다.

여기에 메서드를 추가하면 플러그인이 된다.,

① 기본 구조

$.fn.extend({
  highlight: function(color) {
    return this.css("background", color);
  }
});

사용

$(".box").highlight("yellow");

② 내부 동작 원리

• this → 선택된 요소 집합
• return this → 메서드 체이닝 가능

③ 체이닝 유지 예시

$.fn.extend({
  borderRed: function() {
    this.css("border", "2px solid red");
    return this;
  }
});

$(".box").borderRed().fadeOut();

웹 페이지는 새로고침 없이 서버와 데이터를 주고받을 수 있다.

이 방식이 바로 AJAX다.

1. AJAX

1) AJAX란?

AJAX(Asynchronous JavaScript And XML)는 페이지를 새로고침하지 않고 서버와 데이터를 주고 받는 기술이다.

기존 방식

• 요청 → 전체 페이지 새로고침 → 응답

AJAX 방식

• 요청 → 데이터만 응답 → 화면 일부만 변경

즉, 비동기 통신 방식이다.

2. AJAX 관련 메서드

jQuery는 AJAX를 간단하게 사용할 수 있는 메서드를 제공한다.

1) AJAX 관련 메서드들

① $.ajax()

가장 기본이 되는 메서드

$.ajax({
  url: "data.json",
  type: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("에러 발생");
  }
});

옵션 설명

② $.get()

$.get("data.json", function(data) {
  console.log(data);
});

GET 요청 전용

③ $.post()

$.post("server.php", { name: "John" }, function(data) {
  console.log(data);
});

POST 요청 전용

④ $.getJSON()

$.getJSON("data.json", function(data) {
  console.log(data);
});

JSON 데이터 전용

3. AJAX로 JSON 데이터 바인딩하기

JSON은 가장 많이 사용하는 데이터 형식이다.

[
  {"name": "Tom", "age": 20},
  {"name": "Jane", "age": 25}
]

바인딩 예시

$.getJSON("data.json", function(data) {
  let output = "";

  $.each(data, function(index, item) {
    output += "<p>" + item.name + " - " + item.age + "</p>";
  });

  $("#result").html(output);
});

• $.each() → 반복 처리
• html() → 화면 출력

4. AJAX로 XML 데이터 바인딩하기

XML도 지원 가능하다.

<people>
  <person>
    <name>Tom</name>
    <age>20</age>
  </person>
</people>

XML 바인딩 예시

$.ajax({
  url: "data.xml",
  dataType: "xml",
  success: function(data) {
    $(data).find("person").each(function() {
      let name = $(this).find("name").text();
      let age = $(this).find("age").text();
      $("#result").append("<p>" + name + " - " + age + "</p>");
    });
  }
});

5. 자바스크립트의 보안 정책과 외부 데이터 바인딩

브라우저에는 Same-Origin-Policy(동일 출처 정책)가 있다.

즉,

• 다른 도메인
• 다른 포트
• 다른 프로토콜

에서 직접 데이터를 요청하면 차단된다.

① CORS(Cross-Origin Resource Sharing)

서버에서 허용해야 외부 요청이 가능하다.

응답 헤더에 아래 코드 명시

Access-Control-Allow-Origin: *

또는 특정 도메인 지정

② JSONP(구버전 방식)

CORS 이전에는 JSONP를 사용했다.

$.ajax({
  url: "https://example.com/data",
  dataType: "jsonp"
});

현재는 거의 사용되지 않는다.

jQuery는 요소의 표시/숨김, 이동, 크기 반경 등을 간단한 메서드로 처리할 수 있도록 지원한다.

1. 효과 및 애니메이션 메서드

1) 효과 메서드

요소를 단순히 보이거나 숨기는 기능이다.

① show() / hide()

$("#box").hide();
$("#box").show();

시간 지정 가능

$("#box").hide(1000);

② toggle()

보이기/숨기기를 전환한다.

$("#box").toggle();

③ fade 효과

$("#menu").slideToggle(500);

2) 애니메이션 메서드

① animate()

CSS 속성을 점진적으로 변경한다.

$("#box").animate({
  width: "200px",
  height: "200px",
  opacity: 0.5
}, 1000);

형식

.animate(속성, 시간, 가속도, 콜백 함수)

② 가속도 옵션

• "linear"
• "swing" (기본)

③ 콜백 함수

애니메이션 종료 후 실행된다.

$("#box").animate({left: "200px"}, 1000, function() {
  alert("완료");
});

2. 애니메이션 효과 제어 메서드

1) 애니메이션 효과 제어 메서드란?

실행 중인 애니메이션을 제어하는 기능이다.

① stop()

현재 실행 중인 애니메이션을 중지한다.

$("#box").stop();

옵션

.stop(애니메이션 큐 삭제, 현재 애니메이션 완료 여부)

ex.

.stop(true, true);

• true → 대기 중 애니메이션 제거
• true → 현재 애니메이션 즉시 완료

② delay()

애니메이션의 실행을 지연한다.

$("#box").delay(500).fadeOut();

③ finish()

대기 중인 애니메이션을 포함하여 즉시 종료한다.

$("#box").finish();

④ clearQueue()

대기열에 있는 애니메이션을 제거한다.

$("#box").clearQueue();

웹 페이지는 사용자와의 상호작용을 기반으로 동작한다.

클릭, 입력, 마우스 이동 등 이러한 동작을 이벤트(Event)라고 한다.

jQuery는 이벤트 처리를 간결하게 작성할 수 있도록 도와준다.

1. 이벤트 등록 메서드

1) 이벤트 등록 메서드란?

특정 요소에 이벤트가 발생했을 때 실행할 함수를 연결하는 것

기본 구조

$("선택자").이벤트명(function() {
  실행코드;
});

2) 이벤트 등록 방식

① 직접 등록 방식

$("#btn").click(function() {
  alert("클릭됨");
});

② on() 메서드 방식(권장)

$("#btn").on("click", function() {
  alert("클릭됨");
});

on()은

• 동적 요소 대응 가능
• 여러 이벤트 등록 가능

3) 마우스 이벤트

ex.

$(".box").mouseenter(function() {
  $(this).css("background", "red");
});

4) 이벤트 객체와 종류

이벤트가 발생하면 이벤트 객체(Event Object)가 생성된다.

$("#btn").click(function(e) {
  console.log(e.type);
});

주요 속성

5) 포커스 이벤트

입력 요소에 사용한다.

$("input").focus(function() {
  $(this).css("border", "2px solid blue");
});

6) 키보드로 마우스 이벤트 대응하기

키 입력을 통해 클릭과 같은 효과를 구현한다.

$(document).keydown(function(e) {
  if (e.key === "Enter") {
    $("#btn").click();
  }
});

7) 키보드 이벤트

$("input").keyup(function() {
  console.log($(this).val());
});

8) 이벤트가 발생한 요소 추적하기

this 또는 e.target 사용

$("li").click(function() {
  console.log($(this).text());
});

this는 이벤트가 발생한 요소를 가리킨다.

2. 그룹 이벤트 등록 및 삭제

1) 그룹 이벤트 등록 메서드

여러 이벤트를 동시에 등록

$("#btn").on("mouseenter mouseleave", function() {
  $(this).toggleClass("active");
});

또는 객체 형태

$("#btn").on({
  mouseenter: function() {
    $(this).css("color", "red");
  },
  mouseleave: function() {
    $(this).css("color", "black");
  }
});

2) 이벤트 제거 메서드

off()

$("#btn").off("click");

특정 이벤트 제거

one()

한 번만 실행된다.

$("#btn").one("click", function() {
  alert("한 번만 실행");
});

1. 제이쿼리 기본 다지기

1) 제이쿼리(jQuery)란?

jQuery는 JavaScript 라이브러리다.

DOM 조작, 이벤트 처리, 애니메이션, AJAX 등을 간결하게 작성할 수 있도록 도와준다.

📌 기존 JavaScript

document.getElementById("title").style.color = "red";

📌jQuery

$("#title").css("color", "red");

코드를 단순화하고 브라우저 호환 문제를 해결해준다.

2) 제이쿼리 라이브러리 연동하기

CDN 방식

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

로컬 파일 방식

<script src="js/jquery.min.js"></script>

기본 구조

$(document).ready(function() {
  // 실행 코드
});

또는 축약형

$(function() {
  // 실행 코드
});

DOM 로드 완료 후 실행된다.

2. 선택자

jQuery의 핵심은 선택자다.

1) 선택자란?

HTML 요소를 선택하는 방법

$("선택자")

2) 기본 선택자

ex.

$("p")
$("#header")
$(".box")

3) 직접 선택자

4) 인접 관계 선택자

$("div + p")

div 바로 다음 p 선택

3. 제이쿼리 탐색 선택자

선택한 요소를 기준으로 다시 탐색하는 기능이다.

1) 탐색 선택자

2) 위치 탐색 선택자

ex.

$("li:eq(2)")

3) jQuery 배열 관련 메서드

$("li").each(function(index) {
	console.log(index);
});

4) 속성 탐색 선택자

$("input[type = 'text']")
$("a[herf]")

5) 컨텐츠 탐색 선택자

6) 유용한 메서드

4. 객체 조작

1) 객체 조작 메서드

2) 속성 조작 메서드

$("#img").attr("src", "image.jpg");

3) 수치 조작 메서드

4) 객체 편집 메서드

$(".box").addClass("active");