jQuery

 

jQuery의 시작

 

  • jQuery 란 무엇인가
  • 2006년 초에 개발된 자바 스크립트 라이브러리로써 기존에 라이브러리는 놀랍고 강력한 고급 기술에 중점을 두는 컨셉으로 등장했지만 jQuery는 웹페이지를 개발하는 개발자의 생각하는 방식을 바꾸는데 그 목적을 두었다고 한다.

 

  • 왜 jQuery 인가
  • 웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고  또는  애니매이션등의 효과를 줘야 할 경우가 많다.  이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다. 이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있수 있도록 해줄놈이 jQuery 이란 놈이다.

 

  • 튀지 않는 자바 스크립트
  • HTML 엘리먼트에 스타일을 적용하고 자바스크립트 호출을 넣는 방법은 지금까지 많이 사용되어왔던 스타일이다.
  1. <button type="button" onclick="document.getElementById("zz").style.color='red';" >클릭 하시오</button>

이 런 형식으로 작업을 해왔다. 전혀 이상할 것 없는 소스 이다. jQuery 는 위와 같은 코딩 스타일을 튀는 자바 스크립트라고 부른다. 하지만 jQuery는 이와는 반대로 튀지 않는 자바 스크립트를 지향한다. 즉 엘리먼트와 css & 자바스크립트를 분리 하여 <body> tag 안에는 자바 스크립트와 CSS가 들어 오지 못하게 하는 것이다.

  1. <button type="button" id="testButton">클릭 하시오</button>

 

  1. <script language="javascript">
  2. window.onload = function(){
  3. document.getElementById('testButton').onclick = makeItRed;
  4. };
  5. functin makeItRed(){
  6. document.getElementById('zz').style.color = 'red';
  7. }
  8. </script>

위와 같은 형식으로 엘리먼트와 자바 스크립트 영역을 구분 지어 코딩하는 이것을 튀지 않는(unobtrusive) 자바 스크립트라고 한다.

이제 부턴 jQuery 와 함께~ 튀지 마세요~~~~^^;

  • jQuery 기초

jQuery에서 엘리먼트의 그룹을 찾기 위해 아래와 같은 방법을 사용한다.

  1.   $(selector)
      또는
      jQuery(selector)
      과 같은 방식으로 한다. 
$( ) 는 jQuery( ) 함수의 별칭으로 셀렉터와 일치하는 DOM 엘리먼트 배열을 가진 '특별한' 자바스크립트 객체를 반환한다. 이 객체는 미리 정의된 메서드를 여러개 보유하고 있는데 이를 이용해 선택된 엘리먼트 그룹에 많은 기능을 적용할 수 있다. 이런 형태의 구성 요소를 래퍼(Wrapper)라 한다. 이렇게 jQuery가 정의한 추가 메서드를 이용할 수 있는 엘리먼트 집합을 확장 집합(Wrapped Set)라고 부른다.

 

  • jQuery 는 위의 그림과 같은 역할을 합니다. 이미 jQuery는 많은 메서드를 보여하고 있습니다. 우리는 단지 $( ) 안에 엘리먼트를 넣어 jQuery의 모든 기능을 사용만 하는 것이다. 그렇게 되면 자바 스크립트의 코딩량이 상당히 줄어 들 것이다.
  • 맛보기 jQuery 예제를 보겠습니다. 아 그리고 $는 jQuery에 별칭 입니다.

url : http://gisung2.cafe24.com/jquery/study/sample1_1.jsp

 

소스를 보자면 아래와 같다! 놀라지 마세용^^;

  1.     <script type="text/javascript">
             $(function(){
                  alert("시작!");
                  $("table").fadeOut(2000).fadeIn(2000);
             });
        </script>

자바 스크립트 소스는 이게 전부이다. 정말 심플하다. 하지만 이건 시작에 불과하다. jQuery의 메소드와 jQuery의 강력한 셀렉터 가 합쳐지면 깜작 놀랄 일이 벌어질 것이다.

PS. 셀렉터 : 웹페이지를 컨트롤 하려면 먼저 어떤 엘리먼트를 컨트롤 할껀지 선택을 해야 한다. 바로 그거다. 엘리먼트를 선택하는 방법, 쉽고 편하게 선택하게 해주는 놈 그놈이 셀렉터다.  jQuery(셀렉터)  

  • $("table")               --페이지내 모든 table을 선택하여 jQuery Wrap로 감싸 반환한다.
  • $("div")                  --페이지내 모든 div를 선택하여 jQuery Wrap로 감싸 반환한다.
  • $("div#idName")     --페이지내 아이디가 idName 이라는 div를 jQuery Wrap로 감싸 반환한다.

셀렉터는 나중에 좀더 알아 보기로 하고 여기서는 맛만 봐주시길 바랍니다.

 

  • myList 란 클래스를 갖는 div를 fadeOut 보자

  1. $("div.myList").fadeOut(); 
  • jQuery 커맨드라고도 불리우는 메서드는 특별한 기능을 갖고 있습니다. 메서드 실행이 끝난 후 다른 동작을 할 수 있도록 동일한 엘리먼트그룹을 반환하는 것이다. 바로 위 코드에 removed라는 클래스를 추가로 적용하고 싶을 경우 아래와 같이 하면 된다.
  1. $("div.myList").fadeOut().addClass("removed");

위와 같은 방식을 jQuery 체인(chain)이라고 하고 체인은 무한대로 연결할 수 있다.  

  • html 코드 넣기
  1. $("<p>하이</p>");
  2. 위처럼 하면 html 안에 "하이"가 추가된다. 
  • 특정 엘리먼트에 html코드 넣기
  1. $("#someElement").html("가나다라마바사");
  2. or
  3. $("#someElement")[0].innerHTML("가나다라마바사");

html() 을 이용하여 엘리먼트에 문장을 삽입할 수 있다. 

  • 함수 확장과 엘리먼트 순회
  1. $.fn.disable = function(){
  2. return this.each(function() {
  3. if(typeof this.disabled != "undefined") this.disabled = true;
  4. });
  5. }

$.fn.disable 은 disable 메서드를 $()에 확장한다는 뜻이다.  .each() 는 확장된 DOM 엘리먼트 집합에 속한 엘리먼트를 순회하는 메서드 이다. each() 메서드에 전달된 반복 함수 안에서 this는 현재 반복 시점의 DOM 엘리먼트를 향한 포인터다. 달랑 한두줄로 쓰여지는 이부분이 나중에 마법을 펼쳐 보일 것이다^^; 부디~

 

 

+ Recent posts

티스토리툴바