[jQuery] jQuery 파헤치기

 

 

jQuery에 대해서 이어서 알아보자

 

 

---

 

 

 

728x90

 

 

 

1. 선택자(Selector)

선택자는 HTML 요소를 찾아서 조작할 수 있게 해주는 중요한 부분이다.

jQuery에서는 CSS 선택자와 비슷한 방식으로 요소를 선택할 수 있다.

 

 

예시

 

ID 선택자: $("#id")
해당 ID를 가진 요소를 선택.

$("#myDiv")  // <div id="myDiv">...</div> 선택

 

 

 

 

 

클래스 선택자: $(".class")
해당 클래스를 가진 모든 요소를 선택.

$(".myClass")  // <div class="myClass">...</div> 선택

 

 

 

태그 선택자: $("tag")
해당 태그를 가진 모든 요소를 선택.

$("p")  // 모든 <p> 태그 선택

 

 

 

자식 선택자: $("parent child")
부모 요소 아래에 있는 특정 자식 요소를 선택.

$("ul li")  // 모든 <ul> 내부의 <li> 요소 선택

 

 

 

 

속성 선택자: $("tag[attr=value]")
특정 속성을 가진 요소를 선택.

$("a[href='https://example.com']")  // href 속성이 'https://example.com'인 <a> 태그 선택

 

 

 

 

 

 

 

---

 

2. DOM 조작

jQuery로 선택한 HTML 요소를 쉽게 수정할 수 있다.

텍스트, HTML 내용, 스타일 등 다양한 속성을 조작할 수 있다.

 

예시

텍스트 수정: .text()

$("#title").text("새로운 제목");  // id가 'title'인 요소의 텍스트를 변경

 

 

 

 

HTML 내용 수정: .html()

$("#content").html("<p>새로운 콘텐츠</p>");  // id가 'content'인 요소의 HTML 내용을 변경

 

 

 

 

 

속성 수정: .attr()

$("#link").attr("href", "https://newurl.com");  // id가 'link'인 요소의 href 속성 수정

 

 

 

 

스타일 수정: .css()

$("p").css("color", "blue");  // 모든 <p> 태그의 글자색을 파란색으로 변경

 

 

 

 

 

클래스 추가/제거: .addClass(), .removeClass()

$("#btn").addClass("active");  // 버튼에 'active' 클래스를 추가
$("#btn").removeClass("active");  // 버튼에서 'active' 클래스를 제거

 

 

 

 

 

요소 추가/삭제: .append(), .prepend(), .remove()

$("#list").append("<li>새 항목</li>");  // #list에 새로운 <li> 항목 추가
$("#item").remove();  // #item 요소를 제거

 

 

 

 

 

 

 

 

 

3. 이벤트 처리

jQuery는 다양한 이벤트를 쉽게 처리할 수 있게 도와준다.

클릭, 마우스 오버, 키보드 입력 등 여러 이벤트에 반응할 수 있다.

 

 

예시

 

클릭 이벤트: .click()

$("#button").click(function() {
  alert("버튼이 클릭됨!");
});

 

 

 

 

마우스 오버/아웃 이벤트: .mouseenter(), .mouseleave()

$("#box").mouseenter(function() {
  $(this).css("background-color", "yellow");
}).mouseleave(function() {
  $(this).css("background-color", "white");
});

 

 

입력 이벤트: .keyup(), .keydown()

$("#inputField").keyup(function() {
  console.log($(this).val());  // 입력된 값이 콘솔에 출력
});

 

 

 

 

이벤트 위임
동적으로 추가된 요소에도 이벤트를 적용할 수 있도록 도와줌.

$("#parent").on("click", ".child", function() {
  alert("자식 요소 클릭됨!");
});

 

 

 

 

 

4. AJAX (비동기 통신)

jQuery로 서버와 비동기적으로 데이터를 주고받을 수 있다.

페이지를 새로 고침하지 않고도 데이터를 가져오거나 보낼 수 있다.

 

 

GET 요청: .get()

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

 

 

 

POST 요청: .post()

$.post("/submit", { name: "John", age: 30 }, function(response) {
  console.log(response);
});

 

 

전체 AJAX: .ajax()

$.ajax({
  url: "/data",
  method: "GET",
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.error(error);
  }
});

 

 

 

 

 

 

5. 애니메이션 효과

jQuery는 간단한 애니메이션을 쉽게 구현할 수 있도록 도와줌. 요소를 천천히 숨기거나 나타내는 등의 효과를 제공.

 

페이드 인/아웃: .fadeIn(), .fadeOut()

$("#box").fadeIn();  // 요소를 서서히 나타나게 함
$("#box").fadeOut();  // 요소를 서서히 숨김

 

 

슬라이드 다운/업: .slideDown(), .slideUp()

$("#box").slideDown();  // 요소가 위에서 아래로 펼쳐짐
$("#box").slideUp();    // 요소가 위로 숨겨짐

 

 

애니메이션: .animate()

$("#box").animate({ height: "100px", width: "100px" }, 1000);  // 1초 동안 크기를 변경

 

 

 

 

 

 

6. 체이닝(Chaining)

 

jQuery는 메서드를 체이닝할 수 있다. 하나의 선택자에서 여러 가지 작업을 한 번에 할 수 있다.

$("#myDiv")
  .css("color", "red")  // 색상 변경
  .slideUp()            // 슬라이드 업
  .fadeIn();            // 페이드 인

 

 

 

 

 

끝