제이쿼리(jQuery)

 

 

제이쿼리 

 

HTML 문서를 보다 쉽게 다루고 상호작용할 수 있도록 도와주는 JavaScript 라이브러리입니다.

주로 DOM 조작, 이벤트 처리, 애니메이션 등을 간편하게 처리할 수 있도록 해주는 기능을 제공합니다.

 

제이쿼리 장점

 

1. 간편한 DOM 조작: 제이쿼리는 CSS 선택자를 사용하여 DOM 요소를 선택하고 조작하는 간편한 방법을 제공합니다. 이를 통해 HTML 요소의 스타일, 속성, 내용 등을 쉽게 변경할 수 있습니다.
2. 이벤트 처리: 제이쿼리를 사용하면 이벤트 처리를 간편하게 할 수 있습니다. 클릭, 마우스 오버, 키보드 이벤트 등을 쉽게 감지하고 처리할 수 있습니다.
3. 애니메이션: 제이쿼리를 사용하면 간단한 애니메이션을 쉽게 추가할 수 있습니다. 요소의 숨기기/보이기, 슬라이드, 페이드 인/아웃 등의 애니메이션 효과를 적용할 수 있습니다.
4. AJAX 통신: 제이쿼리를 사용하면 AJAX 요청을 간단하게 처리할 수 있습니다. 서버로 데이터를 비동기적으로 전송하거나 서버로부터 데이터를 동적으로 받아올 수 있습니다.
5. 크로스 브라우징: 제이쿼리는 다양한 브라우저에서 일관된 동작을 보장하여 크로스 브라우징 이슈를 해결할 수 있습니다.

 

CDN(Content Delivery Network)을 통해 라이브러리를 로드하거나, 해당 파일을 직접 다운로드하여 사용할 수 있습니다.

웹 개발에서 반복적으로 사용되는 작업들을 단순화하고 생산성을 향상시킬 수 있는 유용한 도구입니다.

 

1. 제이쿼리 라이브러리 불러오기

 

제이쿼리를 사용하기 위해서는 먼저 해당 라이브러리를 HTML 문서에 포함해야 합니다.

이를 위해 CDN을 이용하거나 제이쿼리 파일을 다운로드하여 로컬에 저장할 수 있습니다.

일반적으로는 CDN을 사용하는 것이 편리합니다.

<!-- CDN을 이용한 제이쿼리 라이브러리 불러오기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

2. 제이쿼리 문법

 

제이쿼리는 $ 기호를 사용하여 함수를 호출하고 DOM 요소를 선택합니다.

선택된 요소를 조작하거나 이벤트를 처리하는 등 다양한 작업을 수행할 수 있습니다.

DOM 요소 선택

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

$(document).ready(function() {
    // 아이디가 'myElement'인 요소 선택
    var element = $('#myElement');

    // 클래스가 'myClass'인 요소 선택
    var elements = $('.myClass');

    // 태그 이름이 'div'인 요소 선택
    var divs = $('div');

    // 여러 개의 선택자를 조합하여 요소 선택
    var combined = $('#myElement, .myClass, div');
});

이벤트 처리

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

$(document).ready(function() {
    // 클릭 이벤트 처리
    $('#myButton').click(function() {
        // 클릭 시 실행할 코드 작성
    });

    // 마우스 오버 이벤트 처리
    $('#myElement').mouseover(function() {
        // 마우스 오버 시 실행할 코드 작성
    });

    // 키보드 입력 이벤트 처리
    $(document).keypress(function(event) {
        // 키가 눌렸을 때 실행할 코드 작성
    });
});

 

 

 

3. 제이쿼리 함수 체인

 

제이쿼리는 함수를 연속해서 호출하는 함수 체인(chain) 기능을 제공합니다.

이를 통해 코드를 간결하게 작성할 수 있습니다.

$(document).ready(function() {
    // 아이디가 'myElement'인 요소를 숨기고 페이드 인 애니메이션 적용
    $('#myElement').hide().fadeIn();
});

이와 같이 제이쿼리를 사용하여 간단하게 DOM 조작, 이벤트 처리, 애니메이션 등을 구현할 수 있습니다. 더 많은 기능과 사용법을 학습하고 익히면 웹 개발에서 유용하게 활용할 수 있습니다.

 

 

---

function f01(){ //요소를 숨깁니다.
  //JS
  // const x = document.querySelector("#target01");
  // x.style.visivility = "hidden";

  //Jqury
  $("#target01").hide(2000);
}

function f02(){ //요소를 보입니다.
  $("#target01").show(2000);
}
function f03(){ //요소를 숨기거나 보이게 토글합니다.
  $("#target01").toggle(1000);
}
function f04(){ //요소를 서서히 나타나게 페이드 인합니다.
  $("#target01").fadeIn(2000);
}
function f05(){ //요소를 서서히 사라지게 페이드 아웃합니다.
  $("#target01").fadeOut(1000);
}
function f06(){ //요소를 서서히 나타나거나 사라지게 페이드 토글합니다.
  $("#target01").fadeToggle(2000);
}
function f07(){ //요소를 아래로 슬라이드하여 나타냅니다.
  $("#target01").slideDown(2000);
}
function f08(){ //요소를 위로 슬라이드하여 숨깁니다.
  $("#target01").slideUp(1000);
}
function f09(){ //요소를 슬라이드하여 나타내거나 숨기게 토글합니다.
  $("#target01").slideToggle(2000);
}

 

https://api.jquery.com/

jQuery API Documentation