jQuery

JQuery란

1. jQuery란
   1) jQuery는 JavaScript프로그램
      jQuery는 존 레시그가 개발하고 2006년 1월에 출시한 " JavaScript 라이브러리
       * 라이브러리: 쉽게 설명하자면 정리된 프로그램을 미리 만들어 놓은 것. (미리 준비된 재료)
      jQuery는 JavaScript를 사용하기 쉽도록 확장한 것으로서,
      1개의 기능을 만들기 위해 JavaScript에서는 만은 코드를 작성할 경우, 

      jQuery를 사용하여 1~2라인 정도로 완성할 수 있게됨.
      즉, jQuery는 JavaScript를 간단하게 기술할 수 있도록 한 것이며, 

      적은 작업으로 다양한 표현을 안정적으로 실행할 수 있게 하는 것임.

   2) HTML과 CSS를 쉽게 조작가능
      jQuery를 사용하면 짧은 코드로 HTML과 CSS를 쉽게 조작 할 수있어 개발 효율성이 향상 되므로 자주 사용됨.
      예) 클릭시 이미지 변경, 버튼 마우스오버시 버튼색상이나 문자 변경, 

           입력양식 입력시 내용확인, 화면스크롤시 표시변경
   3) Ajax와 연동
      Ajax를 통한 서버와 비동기 통신시 다양한 화면처리가 가능함
      예)사용가능한 아이디 체크, 입력 형식 체크 등
   
2. jQuery특징
   1) 장점:
      - 코드량을 단축 및 가독성 향상
        jQuery를 사용하면 JavaScript로 전체 작성하는 것보다 코드량이 현저히 줄어들고, 코드의 가독성이 높아짐   
      - 모든 브라우저에서 사용가능
        이것이 jQuery가 많이 사용되는 이유중에 하나임
     Chrome, IE, Edge, Safari, Firefox 등 브라우저별 차이점을 흡수하여 동일하게 작동됨
   2) 단점 : 
      - 처리 속도가 늦어질 수 있음
  - 편리하지만 JavaScript의 본질을 놓칠 수 있음
  - 프레임워크 도입시 처리에 충돌이 생길수 있음
     

3. 사용방법
   1) 로드방법
    - CDN사용시
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    - 세팅시
   <script src="파일 경로/jquery-3.5.1.min.js"></script>

   2) 대상지정   
     $("선택자"). 메소드("매개 변수 [인수]");   
     $('p').css('color','#ff0000);

      // div 태그 지정
      $("div")
      // id가 myid인 것을 지정
      $("#my_id")
      // 클래스 지정
      $(".my_class")
      // 계층 구조 (div 태그의 클래스 my_class 지정)
      $("div > .my_class")
      // 첫 번째 div 태그 지정
      $("div:first")
      // visible로 된 div 태그 지정
      $("div:visible")

     3) 이벤트지정
      // 클릭 이벤트
      $("div").click():
      // 양식의 내용 등이 변경되었을 때의 이벤트
      $("div").change():
      // 마우스가 hover했을 때
      $("div").hover():
       4) 동작지정
       $("div").click(function(){
           alert("div가 클릭되었습니다");
        });