2021.03.25 국비교육 54일차

[TOC]

JQUERY

  • 자바스크립트 라이브러리

  • DOM과 관련된 처리 쉽게 구현

  • 일관도니 이벤트 연결 쉽게 구현

  • Ajax(비동기 처리) 애플리케이션 쉽게 구현

  • css선택자 기반 처리 가능

$(document).ready(함수명)

  • jQuery로 시작하는 모든 페이지는 ready() 함수로 시작
  • 문서 준비가 완료되면 인자로 전달된 함수를 실행하라는 의미
  • 여러번 사용 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src = "jquery-3.5.1.min.js"></script> <!-- 라이브러리 위치 지정 -->
<script type="text/javascript">

/* window.onlad = function(){} */
     $(document).ready(function(){ //$의 의미 : jquery 라이브러리 사용
         console.log("hello");

     }) //end

</script>
</head>
<body>

</body>
</html>
$ is not defined오류가 나오면 라이브러리 경로 문제

CDN(Content Delivet Network)

  • 사용자에게 간편하게 컨텐츠 제공하는 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        console.log("hello world");
    })//end
</script>
</head>
<body>

</body>
</html>

jQuery 표현식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        console.log("ready0");
    })//end

    jQuery(document).ready(function(){
        console.log("ready1");
    })//end

    //$(document).ready의 간추린 표현식
    $(function(){ 
        console.log("ready2");
    })//end

</script>
</head>
<body>

</body>
</html>

+ Recent posts