[웹프로그래밍응용] jQuery

jQuery

• jQuery는 자바스크립트 라이브러리 중 하나이다.
• 웹클라이언트에서 자바스크립트 사용을 간편화하여 쉽게 해준다.

  HTML 이벤트 메소드
  DOM 제어 CSS + 추가 이펙트 및 애니메이션
  Ajax 제어

• 모든 브라우저에서 작동을 목표로 한다.
• 오픈 소스, 오픈 라이선스 기반이다.

Framework와 Library 차이

• Framework : 통합적인 개발 환경 ex) Spring, Bootstrap, Angular
• Library : 특정한 기능을 하는 모듈(클래스) 집합 ex) jQuery, React.js, Node.js

흐름과 주도권이 누구에게 있느냐의 차이가 있다. 라이브러리는 개발자가 호출하여 사용하고, 프레임워크는 개발자에게 무엇을 해야하는지 알려주고 개발자는 그 틀에 맞춰 개발해야한다.

기본 문법

• $(선택자).이벤트(처리함수) 또는 $(선택자).액션
  • $ : jQuery 정의라는 표시
• Document Ready 이벤트
  • 구조

      $(document).ready(function(){
      // methods
      });
    

• 선택자
  • $(this)

    요소 : $(“p”)
    아이디 : $(“#idName”)
    클래스 : $(“.className”)

jQuery Event

• 마우스 이벤트 : click(), mouseover(), mouseout(), mouseenter(), mouseleave(), mousedown() …
• 키보드 이벤트 : keydown(), keypress(), keyup() …

• 입력폼 이벤트 : submit(), focus(), blur(), select(), change() …

• 이벤트 핸들러

  $(선택자).이벤트(함수);
  $(선택자).on(“이벤트”, 함수);
  $(선택자).on(“이벤트”, “선택자”, 함수);
  $(선택자).off(“이벤트”, “선택자”, 함수); ➡️ 이벤트핸들러 해제

• 이벤트 속성

  event.target : 이벤트가 발생한 요소
  event.pageX, event.pageY : 이벤트가 발생한 좌표
  event.timeStamp : 이벤트가 발생한 시각
  event.type : 발생한 이벤트 유형

✏️예제 연습

시작예제 - html에 이벤트 넣어보기

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".one").click(function(){
                $(this).hide();
            });

            $("#two").on({
                click:function(){
                    $(this).hide();
                }
            });

            $("#three").click(function(){
                $(this).show();
            });

        });
    </script>

    <h3 class="one">클릭하면 사라짐</h3>
    <h5 id="two">클릭하면 사라짐</h5>
    <h5 id="three">클릭해도 안사라짐</h5>

선택자 예제

    <script>
        $(document).ready(function(){
            $(btn1).click(function(){
                $(".mygroup, .mypara").css("color", "black");
            });

            $(btn2).click(function(){
                $(".mygroup:first").css("color", "cyan");
            });

            $(btn3).click(function(){
                $("#mydiv > h4 ").css("color", "yellow");
            });

            $(btn4).click(function(){
                $("[class]").css("color", "magenta");
            });

            $(btn5).click(function(){
                $("[class='mypara']").css("color", "green");
            });
        });
    </script>

    <h3 class="mygroup">jQuery 선택자 예제  - 클릭하면 색이 바뀐다</h3>
    <div id="mydiv">
        <h4 class="mygroup">선택자 예제 </h4>
        <p class="mypara">첫째줄</p>
        <p class="mypara">둘째줄</p>
    </div>
        
    <button id="btn1">원래대로</button>
    <button id="btn2">jQuery 선택자 예제</button>
    <button id="btn3">선택자 예제</button>
    <button id="btn4">클래스 속성</button>
    <button id="btn5">줄</button>

이벤트 핸들러 예제

    <script>
        $(document).ready(function(){
            $("#main").on({
                mouseenter:function(){
                    $("#sub").text("mouseenter");
                },
                mouseleave:function(){
                    $("#sub").text("mouseleave");
                },
            });    

            $("#sub").on({
                mouseenter:function(){
                    $("#sub").css("color", "red");
                },
                mouseleave:function(){
                    $("#sub").css("color", "black");
                }
            });

            $("#btn1").click(function(){
                $("#list").append("<li>버튼 클릭</li>");
            });

            function myEvent(){
                var text = document.getElementById("myinput").value;
                $("#mylist").append("<li>" + text + "</li>");
            };

            $("#btn3").on("click", myEvent);
            $("#btn32").click(function(){
                $("#btn3").off("click", myEvent);
            });
            $("#btn33").click(function(){
                $("#btn3").on("click", myEvent);
            });
        });
    </script>

    <h3 id="main">jQuery 이벤트 <span id="sub">: 유형 </span></h3>
    <button id="btn1">버튼 클릭</button>
    <ol id="list"> </ol> 

    <h3>jQuery 폼 이벤트 <span id="sub2">: 입력 가능 </span></h3>
    <input type="text" size=10 id="myinput">
    <button id="btn3">목록 추가</button>
    <button id="btn32">입력 중단</button>
    <button id="btn33">입력 가능</button>
    <ol id="mylist"> </ol> 

이벤트 속성 예제

    <script>
    $(function() { 
        var start=0;

        $(".myevent").click(function(event){  
            elmt = event.target.nodeName;   // target 속성
            content = event.target.innerHTML;       
            $("#event_div").append("<br>["+elmt+"] "+content);
        });   

        $("#btn36").on("click mouseover mouseout", function(event){    // 이벤트
            text = event.type;   // target 속성
            if (start==0) start = event.timeStamp ;
            ctime = event.timeStamp - start;
            ctime = parseInt(ctime/10)/100.0;      
            $("#event_div").append("["+text+"] on "+ctime+"초");
        });

        $("#btn37").click(function(){    // 목록 초기화  
            $("#event_div").html("이벤트 발생 확인");  
        });  
    });
    </script>

    <h3 class="myevent">jQuery 이벤트 속성</h3>
    <h4 class="myevent">이벤트 발생 요소 확인</h4>
    <p class="myevent">첫번째 줄 p요소</p>
    <p class="myevent">두번째 줄 p요소</p>
    <button id="btn36">이벤트 확인</button>
    <button id="btn37">목록 초기화</button>  
    <div id="event_div">이벤트 발생 확인 </div>