제이쿼리(jQuery) 기초 맛보기

 

 

 

제이쿼리(jQuery)는 HTML 문서 객체를 제어하는 자바스크립트 라이브러리 중 하나로 매우 강력하고 유용한 기능들을 제공합니다. 이번 글에서는 제이쿼리의 기초적인 사용 방법과 주요 기능들에 대해 자세하게 알아보겠습니다.

 

 

 

 

목차

 

 

제이쿼리 시작하기

제이쿼리를 사용하려면 먼저 HTML 문서에 적용할 제이쿼리 라이브러리 파일을 불러와야 합니다. 일반적으로는 CDN을 이용하여 불러옵니다. 이제 제이쿼리를 사용해서 HTML 요소를 조작하고 이벤트 처리를 할 수 있습니다.

 

HTML 요소 선택

제이쿼리를 사용하여 HTML 요소를 선택할 때는 CSS 선택자(selector)를 사용합니다. 제이쿼리는 모든 HTML 요소 노드를 다룰 수 있으며, 선택한 요소에 대해 다양한 조작을 할 수 있습니다. 선택 방법은 아래와 같습니다.

$(selector)

• $ 기호로 시작합니다.
• selector로 선택자를 입력합니다.

 

다음과 같은 HTML 요소가 있다고 가정해 봅시다.

<div id="test">Hello, world!</div>

 

ID 선택자 #를 사용하여 제이쿼리로 이 요소를 선택할 수 있습니다.

$("#test")

$("#test").text("Hello, jQuery!"); // text() 메서드를 이용하여 내부 텍스트를 변경

 

이벤트 처리

제이쿼리를 사용하여 HTML 요소에서 발생하는 이벤트를 처리할 때는 .on() 메서드를 사용합니다. .on() 메서드는 다음과 같은 형식으로 사용할 수 있습니다.

$(selector).on(event, function() {
  // 실행될 코드
});

• event에는 이벤트 이름을 입력합니다. ex) click, focus, submit 등
• function() 안에는 이벤트가 발생했을 때 실행될 코드를 작성합니다.

 

이번엔 다음과 같은 HTML 요소가 있다고 가정할게요.

<button id="myButton">Click me</button>
<div id="output"></div>

 

버튼을 클릭했을 때, 위의 output 요소에 "버튼이 클릭되었습니다!"라는 텍스트를 적어보겠습니다.

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

 

 

 

주요 기능

제이쿼리는 HTML 요소의 속성이나 CSS 스타일을 자유롭게 변경할 수 있는 기능 외에도 다양한 기능을 제공합니다. 이제 다음 기능들에 대해서 알아보겠습니다.

 

HTML 조작

제이쿼리를 사용하여 HTML 요소의 내용(content), 속성(attribute), 스타일(style) 등을 변경할 수 있습니다.

• .html(): 내부 HTML을 조작
• .text(): 내부 텍스트를 조작
• .attr(): 요소의 속성을 변경
• .css(): 스타일을 변경

 

이펙트 구현

제이쿼리를 사용하여 웹 페이지에 이펙트를 구현할 수 있습니다.

• .show(): 요소를 나타냄
• .hide(): 요소를 숨김
• .toggle(): 요소를 보이고 숨김을 반복
• .fadeIn(): 요소를 서서히 나타냄
• .fadeOut(): 요소를 서서히 사라지게 함
• .slideUp(): 요소를 위쪽으로 밀어 올리면서 숨김
• .slideDown(): 요소를 아래쪽으로 당겨 내리면서 보여줌
• .slideToggle(): 요소를 위쪽, 아래쪽으로 반복해서 보이고 숨김
• .animate(): CSS 속성을 서서히 변경하여 애니메이션을 구현

$("#myBtn").on("click", function() {
  $("#box").fadeIn(1000);
});

 

이벤트 처리

제이쿼리를 사용하여 이벤트 처리를 할 수 있습니다.

• .on(): 이벤트 리스너를 추가
• .off(): 이벤트 리스너를 제거

$("#myBtn").on({
  mouseenter: function() {
    $(this).addClass("active");
  },
  mouseleave: function() {
    $(this).removeClass("active");
  }
});

 

 

마무리

오늘은 제이쿼리(jQuery) 주요 기능에 대해 알아보았습니다. HTML 요소를 선택하고 이벤트 처리를 쉽게 구현할 수 있으며, 내용 조작, 스타일 변경, 이펙트 구현 등 다양한 기능을 제공합니다. 이번 내용에서는 기초만 다뤘지만 엄청 강력한 라이브러리들이 더 존재합니다. 앞으로도 계속 다뤄보겠습니다! 감사합니다!