[Day1] jQuery 1 - 개요, 클릭이벤트 등록

[Day1] jQuery 1 [11/29] 

 

    1. jQuery 이란 ? 

        - jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다.

        - 다양한 브라우저에서 작동. 

            ( html, css, js 브라우저 종류/버젼에 따라 적용 X  )

        -    HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 

              같은 작업을 훨씬 더 간단하게 할 수 있는 API. 

         - 다양성과 확장성의 조합으로

              jQuery는 수백만 명의 사람들이 JavaScript를 작성하는 방식을 변경

              

      2. jQuery 사용하는 방법. 

         1) jQuery 다운로드 

             - 압축     -  대역폭을 절약하고 프로덕션 성능을 향상 , jquery-3.6.1.min.js

             - 비압축   - 개발 또는 디버깅 중에 사용.  jquery-3.6.1.js     

         2) CDN 함께 jquery 사용     

             ( Content delivery network)     

             전 세계에 분산된 서버에서 jQuery를 호스팅하여 성능 이점을 제공. 

             jQuery 다운로드 X 

 

   3. jQuery  구문

       1) html 요소를 선택하고                       $( selector)     jquery 객체

       2) 요소에 대해 일부 작업을 수행...         jquey method ()

       $("h3").click( function(){}); 

       $("h3").hide(); 

       j(선택자).액션()

    // *****
    // 문서 로딩(준비) 되기 전에  jquery 코딩이 실행되기 때문에 
    
    // 아래 jquery  코딩을 문서 로딩 된 후에 실행하세요.. 
    /*
    $( document).ready( function (){
    	
    	// $("img").width();  로딩 되기 전이라면 요소 X, 너비 X
    	
    	$("h3").click( function (){
       	 alert("test");
       });
    	
    }); // ready
    */
    
    $(function (){  //  ==   $( document).ready( function (){
    	jQuery("h3").click( function (){
    		alert("XXX");
    		
    		}); 
    });
    
    // document == window.document
    // $ == jQuery == window.jQuery == widnow.$ 
    // 10878 라인
    
    /* 
    js/jquery    프레임워크( 라이브러리 )  다양하게.. 
    $ 충돌
     */

 

   jQuery는 html 페이지의 이벤트에 응답하도록 제작..

   이벤트  ? 요소에 발생하는 행동(액션)

   이벤트 핸들러 

   

   마우스 이벤트 :  click, mousedown, mouseup, mouseXXX

                           dbclick

    키보드 이벤트 : keydown, keypress, keyup

    Form 이벤트 : submit,  change, focus, blur

    Document, Window 이벤트 :  scroll,  load, unload, resize

    등등          

<form action="ex100.html">
   이름 : <input ><br>
   나이 : <input ><br>
   <input type="submit" > 
</form>

    document.forms[0].onsubmit = function (){
    	// 유효성 검사 한 후 
    	alert("입력 X  전송한다. ");
    	return false; // 이벤트 취소
    }

   //           이벤트 메서드
   $("form").submit(function() {
	   alert("jquery 입력 X  전송한다. ");
   	   return false; // 이벤트 취소
   });

<button>확인</button>

        // on() -  하나 이상의 이벤트 핸들러 등록할 때 사용하는 jquery 메서드
        $("button").on({
        	
        	mouseenter: function (){
        		$(this).css("background-color", "lightgray");
        	},
        	mouseleave: function (){
        		$(this).css("background-color", "lightblue");
        	},
        	click:function (){
        		$(this).css("background-color", "yellow");
        	}
        	
        });
        
        // one()   투표 한번 클릭
        $("button").one("click", function (){
        	alert("test");
        })

1.  클릭 이벤트 등록
     1) js    onclick="test()"  속성
     2) js   document.querySelector("button").click = function (){};
                DOM
      3) // js  addEventListener
    document.querySelector("button").addEventListener(
     "click", function(e) {
    }, capture);
    
     4) jquery 
         $("button").click( function (){} );
      5) jquery
         [암기] jquery ajax 처리할 때 on("이벤트")
         $("button").on("click", function (){});  

 

       // jquery 효과
       // jquery HTML 조작
       // jquery 탐색
       // jqeury ajax X
       // jquery 충돌 $
       // jquery selector