YJ의 새벽

jQuery 란? ( onload(), read() ) 본문

WebFront_/jQuery

jQuery 란? ( onload(), read() )

YJDawn 2023. 3. 3. 15:58

 

// jQuery 라이브러리가 추가되지않았을때 나오는 오류

          Uncaught ReferenceError: $ is not defined

 

 

 

 

 

  • jQuery 란?

** jQuery 를 나타내는 기호는 '$'  이다 !!!

 

-- 기존에 복잡했던 클라이언트 , 즉 HTML스크립팅을 간소화하기위해

    고안된 Javascript 라이브러리

-- jQuery 는 적은양의 코드로 빠르고 풍부한 기능을 제공함.

   ( 라이브러리 (library) )  :  프로그램 , 프로그래밍 언어에 없는 추가적인 기능

 

 

  • jQuery 라이브러리 연결 방법 

-- jQuery 공식 홈페이지  :  https://jquery.com/ 

-- jQuery CDN 코드 제공 페이지  :  https://code.jquery.com/ 

 

1. jQuery 라이브러리 다운로드하여

      external 방식 연결하는 방법 

2. CDN ( Content Delivery Network ) 을 이용하여

      온라인 환경에서 페이지 로딩시 다운로드하여 연결하는 방법

 

    <!-- 다운로드받은 jQuery 라이브러리 추가 -->
   <!-- <script src="jquery-3.6.0.js" ></script> -->

    <!-- CDN 방식으로 jQuery 라이브러리 추가 -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" 
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 
    crossorigin="anonymous"></script>
</head>
<body>
    <button type="button" id="btn1"> 자바스크립트 버튼</button>
    <button type="button" id="btn2"> 제이쿼리 버튼</button>
        document.getElementById("btn1").addEventListener("click",function(){
            alert("자바스크립트 버튼이 클릭되었습니다!")
        });

        $("#btn2").on("click",function(){
            alert("제이쿼리 버튼이 클릭되었습니다!")
        });
Document

 

 

 

 

 

  • HTML 문서 해석 순서와 window.onload()  , jQuery의 ready() 함수

-- HTML 문서는 항상 위에서 아래로 순서대로 해석된다.

   --> 아랫쪽에서 작성되어 아직 해석이 안된 코드는 사용할 수 없다 .

-- window. onload  :  HTML ( 현재창 ) 이 모두 로딩이 되었을때 라는 이벤트리스너

                               --> 일반 HTML 문서내용을 모두 다 해석한 후 

                                     마지막에 onload 옆에 작성된 함수 수행

                 .onload 의 단점  :  한 페이지 내에서 한번만 작성할수 있다.  

-- jQuery의 ready() 함수   :  HTML 문서 로딩이 완료된 후 수행할 기능을 작성하는 함수. 

                                         : 여러번 작성 가능.

 

 

-- ready () 함수 작성방법

 - jQuery (document) . ready (function() {   코드;  } ) ;

 

 - $(document) . ready (function() {  코드; } ) ; 

 

 - $(function() { 코드; });

 

 

 

    <!-- 다운로드받은 jQuery 라이브러리 추가 -->
   <!-- <script src="jquery-3.6.0.js" ></script> -->


    <!-- CDN 방식으로 jQuery 라이브러리 추가 -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" 
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 
    crossorigin="anonymous"></script>
</head>
<body>
    <script>
        
        // test1 아이디를 가지는 요소가 해석되기전에 내용을 추가하기때문에
        // 해당코드는 정상 수행되지 않음 . 
        //  document.getElementById("test1").innerText="HTML 해석순서 테스트";

        window.onload = function () {
            document.getElementById("test1").innerText="HTML 해석순서 테스트";
        }
        window.onload = function () {
            document.getElementById("test1").innerText="HTML 마지막 테스트";
        // 마지막작성된것만 실행
        }
    </script>
    <p id="test1"></p>


    <hr>
    <!-- ready() 함수 테스트 -->
    <script>

        // 문서 로딩이 완료된 후 마지막에 수행
        jQuery(document).ready(function(){
            $("#test2").text("ready() 함수 테스트");
                                // $("test2")  :  아이디가 test2 요소
                                //.text(" 내용 ")  : "내용" 출력
                                // test() == innerText
        });
        $(document).ready(function(){
            $("#test2").css("backgroundColor","pink");
                                // css() == style
        });
        $(function(){
            $("#test2").css("fontSize","30px");

            console.log("자바스크립트코드도 사용 가능하다")
            document.getElementById("test2").style.fontWeight="bold";
            document.getElementById("test2").innerText+=" 새로운내용추가";
        });

    </script>
    
    <p id="test2"></p>
</body>
</html>
Document

 

 

 

 

 

 

'WebFront_ > jQuery' 카테고리의 다른 글

jQuery ( effect 메소드 )  (0) 2023.03.06
jQuery ( 메소드와 이벤트 )  (0) 2023.03.06
jQuery 박스색 바꾸기 예제  (0) 2023.03.03
jQuery ( 순회(탐색) 메서드 )  (0) 2023.03.03
jQuery ( 선택자 )  (0) 2023.03.03
'WebFront_/jQuery' Related Articles more
Comments