[jQuery] jQuery를 시작하자

[jQuery]  jQuery를 시작하자

(1) jQuery 란?

jQuery(제이쿼리)는 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

출처 : wiki 백과

(2) jQuery 장점

- 크로스브라우징의 대안

- 코드의 간결화

- CSS 문법 지원

- 강력하고 활용도 높은 selector

- 유용한 플러그인 jQuery-ui, jQuery-mobile

- json Object를 이용한 페이지의 가벼움

(3) jQuery 시작 

 <script src="scripts/jquery-1.6.2.min.js"></script>

  JQuery 명령어를 사용할 수 있는 라이브러리를 추가해준다.

  참고 : jQuery API , jQueryKorea

(4) Body Onload

<script>

       $(document).ready(function(){

             // JQuery 적용

        });

   </script>

   $(document).ready(function(){}); 는 해당 페이지의 인코딩이 완료되었을 때, 실행된다.

(5) 클릭 리스너 등록

  $('#move_up').click(function(){

             // 실행 함수

   });

id 가 'move_up' 인 html 태그를 클릭시 작동하는 함수를 작성한다. 같은 리스너가 중복으로 등록되면, 클릭시 등록된 수만큼 함수가 실행되므로 주의.

(6) jQuery 기본 문법

   jQuery(), $()  : 괄호안의 대상을 JQuery로 묶어준다.

   

   선택자 : HTML 요소, CSS요소, ID요소로 JQuery를 적용할 요소를 선택할 수 있다.

    

    (1) HTML 요소 선택 : 같은 HTML요소에 대해 공통적인 사항을 적용할 때 선택

         $('img') : <img> 태그 전체 선택

         $('table') : <table> 태그 전체 선택

    (2) CSS 요소 선택 : 같은 CSS 요소에 대해 공통적인 사항을 적용할 때 선택

         $('.my_class') : class="my_class: 인 HTML 요소 선택 

                                ex> <input type="button" class="my_class" value="선택" />

    (3) ID요소 선택 : 선택한 ID 요소를 선택할 경우 사용. (ID는 고유의 값으로 하나만 선택)

         $('#userId') : id가 userId인 요소 선택.(고유값)

                               ex> <input type="button" id="userId" value="선택" />

    (4) 연쇄 요소 선택 : 선택자를 연속적으로 사용하여, 원하는 요소를 선택할 수 있다.

         $('table .my_class') : <table> 요소 아래에 있는 요소중 class=my_class 요소를 선택한다.

         $('div [name="myName"]') : <div> 요소중 name="myName"인 요소를 선택한다.

jQuery의 장점은 유연함에 있다. 위의 선택자를 잘 활용하면, 원하는 요소를 쉽게 선택할 수 있다. 소스가 복잡해질 수록 각 요소들의 CSS, ID, name 값을 잘 사용해야 한다.

여러명이 함께 하는 프로젝트라면 더욱더 약속된 명명 규칙을 잘 활용하자.

특히 ID 는 고유값으로만 사용할 수 있다는 것에 주의해야 한다.

<script>

$(document).ready(function(){         // 웹 페이지 문서가 준비되면 다음 내용을 실행한다.

    

        $("button").click(function(){    // button 요소를 누르면 다음 내용을 실행한다.

             

            $("h1").hide("slow");         // h1 요소가 페이지에서 천천히 사라지게 한다

            

            $("h2").show("fast");         // h2 요소가 페이지에 빨리 나타나게 한다.

            

            $("img").slideUp();            // img 요소가 위로 슬라이드해서 사라지게 한다.

            

            });                                 // 클릭함수 끝            

 });

</script>            

jQuery를 시작하자 끝.

출처: https://hyeonstorage.tistory.com/1?category=549771 [개발이 하고 싶어요]