📝
jQuery
  • 제이쿼리
  • 제이쿼리 기본
  • 선택자
    • 기본선택자
    • 계층 선택자
    • 속성 선택자
    • 기본 필터 선택자
    • 내용 필터 선택자
    • 보임 필터 선택자
    • 자식 요소 필터 선택자
    • 폼 요소 선택자
  • 탐색
    • find()/fiter()
    • each()/$.each()
  • 속성
    • addClass()/removeClass()
    • toggleClass()
    • hasClass()
    • attr()/removeAttr()
    • position()/offset()
    • scrollTop()/scrollLeft()
  • 변경
    • remove()/empty()
    • append()/prepend()
    • text()/html()
  • 애니메이션
    • show()/hide()
    • fadeIn()/fadeOut()
    • slideUp()/slideDown()
    • animate()
  • 이벤트
Powered by GitBook
On this page
  • 제이쿼리 사용방법
  • 제이쿼리 다운로드
  • CDN 사용하기
  • 제이쿼리 준비

Was this helpful?

제이쿼리 기본

제이쿼리 사용방법

제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. 제이쿼리 버전은 1.x, 2.x, 3.x버전이 있습니다. 1.x 버전은 익스플로러 IE6, IE7, IE8 버전을 지원합니다.

제이쿼리 다운로드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery01</title>
</head>
<body>
    

    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        
    </script>
</body>
</html>

CDN 사용하기

CDN(content Distribution Network)는 전 세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율적으로 사용하기 위한 네트워크 시스텝입니다.

<!-- 3.x snippet: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 2.x snippet: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- 1.x snippet: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

제이쿼리 준비

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

jQuery를 $로 치환하여 사용할 수 있습니다.

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

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

window.onload = function(){ //실행코드 }

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery01</title>
</head>
<body>
    
    <h1>제이쿼리</h1>

    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        $(document).ready(function(){
            //실행코드
            $("h1").css("background", "red");
        });
    </script>
</body>
</html>
Previous제이쿼리Next선택자

Last updated 4 years ago

Was this helpful?