하이미디어교육센터(자바기반 풀스택 웹개발자)

jQuery는 Javascript와 동일한 기능구현에 대해 매우 간결한 문법과 함수들을 제공한다.   즉, 자바스크립트의 라이브러리들의 모음이다. ※ jQuery는 아래와 같은 jQuery문법 지원 스크립트와 연결하여 사용한다.<script type="text/javascript" src="../js/jquery.js"></script> ※ jQuery는 아래와 같은 구조물 안에 작성되어 동작한다.  (1) 번의 구조가 간략하여 많이 사용된다. (1)  $(function() {                      내용            });(2)  $(document).ready(function() {                        내용            });(3)  jQuery(function() {                     내용         });(4)  JQuery(document).read(function() {                      내용          }); 1. 기본실행    $ 객체의 함수 안에 실행 명령을 작성한다.$(function() {     alert(‎"jQuery를 시작합니다."); }); 2. 이벤트 함수       jQuery에서의 이벤트 함수   javascript의 함수를 실행하려 하는 경우 반드시 이벤트핸들러(ex:온클릭)을 사용해야 하지만  jquery 문법에서는 이벤트 핸들러 역할의 함수를 사용하여 실행할 수 있다. 예제1)<script>$(function() {     $("#g_number").mouseover(function(){            alert(‎"상품번호는 변경할 수 없습니다.");     });     $("#color").change(function(){             alert(‎"색상을 바꿉니다.");     });     $("#button1").click(function(){              alert(‎"전송합니다.");     });});</script><body>상품번호 :  <input type="text" id="g_number" value="1234" readonly>  상품색상선택 : <select  id="color">     <option value="pink">pink</option>      <option value="blue">blue</option>      <option value="yellow">yellow</option></select><button type="button" id="button1">전송</button></body> 예제2)<script>$(function() {       var cnt1 = 0;       var cnt2 = 0;       $("#input > input[type='text']").keydown(function() {                cnt1++;                $("#result").html("cnt1 : " + cnt1 + " / cnt2 : " + cnt2 );        });        $("#input > input[type='text']").keyup(function() {                cnt2++;                $("#result").html("cnt1 : " + cnt1 + " / cnt2 : " + cnt2 );         }); }) </script> <body> <h1>Key 이벤트 </h1>       <div id="input">       <input type="text" /> </div> <h2>결과</h2> <div id="result"></div> </body></html>  예제3) 입력상자 값의 인식- <script>$(function() {       $("#btn-save").click(function() {            if( $("#userid").val() == "" ) {                  alert(‎"아이디를 입력해주세요.");            }            if( $("#pass").val() == "" ) {                  alert(‎"암호를 입력해주세요.");            }     });});</script><body><input type="text" id="userid" ><input type="password" id="pass" ><button type="button" id="btn-save">전송</button> </body></html>  ※   name 값을 통한 접근 , html 태그를 통한 접근   예 ) $("#input[name='user_name']").change(function() {     $("#result").html("이름 값이 변경되었습니다.");});$("#input[name='gender']").change(function() {     $("#result").html("성별이 변경되었습니다.");}); $("#form[name='frm']").submit(function() {        if( !confirm‎("저장하시겠습니까?") ) {              return false;       }});$("#input[type='reset']").click(function() {        if( !confirm‎("입력을 리셋 하시겠습니까?") ) {              return false;        }});