1.1 jQuery인가?

1.2 튀지 않는 자바스크립트

  •  쉽게 동작을 분리해 낼 수 있도록 라이브러리를 설계 
  • 튀지 않는(unobstrusive) 자바스크립트는 HTML 페이지의 <body>테그에 포함된 자바스크립트 표현식이나 구문을 잘못된 것으로 본다. 
  • 이는 명확하게 책임을 분리해주지만 많은 코드를 짜야하는 비용이 따른다. 
  • jQuery를 이용하면 튀지 않는 자바스크립트 적용한 페이지를 작성하는 일이 한층 쉽고 즐거운 작업이 될 수 있다. 
  •  적은 코드로 코딩이 가능하다.

1.3 jQuery 기초

1.3.1 jQuery() 함수

  • p a  -  <p> 엘리먼트에 포함된 모든링크(<a> 엘리면트)의 그룹을 참조한다.
  • CSS에서 사용되는 일반적인 셀렉터 이외에도 대부분의 브라우저에서 아직 완벽히 구현하지 못한 강력한 셀렉터도 지원한다. CSS3도 지원
  • $()는 jQuery() 함수의 별칭
  • $("div.notLongForThisWorld").fadeOut() -> 사라지게 한후 동일한 엘리먼트 그룹 반환
  • $("div.notLongForThisWorld").fadeOut().addClass("removed"); -> 무한대로 연결가능
  • $("#someElement").html("엘리먼트에 텍스트를 추가한다."); -> 작업이 복잡할 수록 jQuery체인을 사용하면 우리가 원하는 결과를 얻는데 필요한 코드의 양이 확연히 준다.
  • $("#someElement")[0].innerHTML = "엘리먼트에 텍스트를 추가한다."); -> 배열처럼 사용 할 수 있다.

1.3.2 유틸리티 함수

1.3.3 문서 준비 핸들러

  • window.onload는 DOM트리 생성 후 모든 이미지와 다른 외부리소스까지 로드 후에야 실행되므로 이미지나 다른 리소스를 로드하는데 시간이 오래걸리게되면 방문자가 그만큼 기다려야 하므로 전체 페이지에 사용 하기는 어렵다.
  • jQuery는 크로스 브라우져 환경으로 이를 지원
  • $(document).ready(function){     }); - ready()메서드를 통해 ready상태가 되었을때 호출
  • $(function({       }); - DOM이모두 로드될 때까지 코드실행을 기다린다. 문서내에 여러번 사용 가능
  • window.onload는 오직 한 함수만 허용한다.

1.3.4 DOM 엘리먼트 생성하기

  • $("<p>안녕!</p>").insertAfter("#followMe");

1.3.5 jQuery 확장하기

  • jQuery 라이브러리에는 필요한 기능만을 포함시켰다.
  • 필요한 기능을 확장해서 사용 가능하다.
  • $("form#myForm input.special").disable();
  • $.fn.disable = function() {                                                             // disable 함수를 추가하겠다.

retun this.each(function() {

    if (typeof this.disabled != "undefined") this.disabled = true; // this는 위와 다른 this

});

}

1.3.6 다른 라이브러리들과 함께 jQuery 사용하기 

 

저작자표시 비영리 변경금지

'Web Platform' 카테고리의 다른 글

[펌]jQuery in Action 정리 3장 - jQuery로 페이지에 생명 불어넣기  (0) 2011.02.15
[펌]jQuery in Action 정리 2장 - 기능이 확장된 엘리먼트 집합 생성하기  (1) 2011.02.15
[JS] 자바스크립트 쿠키 설정, 추출, 삭제 예제  (0) 2011.01.31
HTML Table Add Row - innerHTML vs. DOM vs. cloneNode  (1) 2010.08.02
javascript Map 구현  (0) 2010.06.28

+ Recent posts

티스토리툴바