Javascript 단순화의 백미 jQuery

Posted 2010. 5. 7. 03:23
jQuery는 복잡한 코드를 간결하게 표현하는 독특한 철학이 있다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. jQuery는 2006년 초 John Resig에 의해 만들어 졌다. DOM 스크립팅과 Ajax의 복잡성을 심플하게 하고 싶다면 jQuery를 권장한다.

다음은 jQuery없는 DOM스크립팅이 얼마나 간결하게 변경되는 보여주는 예제이다.
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {    var link = links.item(i);    link.onclick = function() {        return confirm('You are going to visit: ' + this.href);    };}이 소스가 아래와 같이 간결해진다.
$('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href);});

window.onload = function() {    // do this stuff when the page is done loading};대신에 
$(window).load(function() {    // run this when the whole page has been downloaded});와 같이 사용이 가능하다.
load와 ready 의 차이
load는 모든 html구성요소의 로딩이 완료될때까지 기다리는 반면 ready는 선택적으로 먼저 로딩을 시킬수가 있다. 
예를 들어 html이 로딩되기 전에 이미지를 먼저 로딩시키고자 한다면 ready를 사용한다.
 $(document).ready(function() {
   // do this stuff when the HTML is all ready
});

이 코드는 document 엘리먼트 주위에 jQuery객체를 만들고 HTML DOM문서가 준비될때 함수를 설정하여 인스턴스를 호출한다.
이 함수를 필요한 만큼 호출한다. 진정한 jQuery 스타일에서, 지름길은 이 함수를 호출하는 것이다. 함수를 $() 함수로 전달한다.

또다를 jQuery의 장점은 스트링을 이용하여 엘리먼트를 생성하는 것이다. 결과는, 그 엘리먼트를 포함하고 있는 jQuery 객체가 된다.
 $('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body")

$('#message').css('background', 'yellow').html('Hello!').show();

특정 엘리먼트에 Ajax업데이트하기
$('#status').load('status.jsp');


 $.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});
==> 매개변수를 서버상의 페이지로 전달할때 사용법

복잡한 Ajax 스크립팅을 사용하는 예제
 $.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',  //xml, html, script, json 으로 지정가능
    timeout: 1000,
    error: function(){  //beforeSend, error, success, complete 콜백 지정가능
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

animate함수를 이용해서 애니메이션을 나타낼수 있다.
$('#groe').animate({height:500,width:500},"slow",function(){
alert('The element is done growing');
}
기본적인 빌트인 함수로 fadeIn, fadeOut, slideDown, slideUp을 사용하여 애니메이션 효과를 나타낼 수 있다.
$('#nav').slideDown('slow');

jQuery는 DOM스크립팅과 이벤트 핸들러를 단순화 하는데 제격이다. DOM의 트래버스와 조작이 쉽고, 이벤트의 첨부, 제거, 호출은 매우 자연스러운 일이며 직접 수행하는 것보다도 에러도 적게 발생한다.
* append() : 다른 엘리먼트로 연결가능
* clone() : 엘리먼트를 중복시킴
* html() :
* empty() : 콘텐츠 삭제
* remove() : 엘리먼트 삭제
* wrap() : 다른 엘리먼트로 엘리먼트를 랩핑한다
 
DOM을 트래버스 함으로써 jQuery 객체의 콘텐츠를 변경할 때 여러 함수를 사용할 수 있다. 엘리먼트의 siblings(), parents(), children()을 사용가능하며 , next(), prev() 엘리먼트도 선택가능하다. 아마도 가장 강력한 것은find()함수 일 것이다. jQuery셀렉터를 사용하며 ,jQuery객체의  엘리먼트 종속관계들을 통해 검색할 수 있다. 이 함수는 end()함수와 사용될 때 더욱 강력해진다. 이 함수는 실행 취소 함수와 비슷하고, find()또는 parents()또는 다른 트래버싱 함수들을 호출하기 전에 가졌던 jQuery객체로 돌아간다.
메소드 체인과 함께 사용되면, 복잡한 연산도 단순하게 보이게 할수 있다.
$('form#login')    // hide all the labels inside the form with the 'optional' class    .find('label.optional').hide().end()    // add a red border to any password fields in the form    .find('input:password').css('border', '1px solid red').end()    // add a submit handler to the form    .submit(function(){        return confirm('Are you sure you want to submit?');    });
위의 코드에서 주석을 제거하면 아래의 형태와 같아진다.
$('form#login').find('label.optional').hide().end().find('input:password').css('border', '1px solid red').end().submit(function(){        return confirm('Are you sure you want to submit?');    });

jQuery의 셀렉터 신택스는 CSS3과 XPath( 하나의 문서에서 엘리먼트를 찾는 강력한 신택스)에 기반하고 있다. CSS3과 XPath 신택스를 더욱 잘 안다면, jQuery 사용이 더욱 수월해진다.
$('td:empty').html('-'); - 테이블의 모든 빈 컬럼안에 대시(dash)를 추가한다.
$('input:not(.required)').hide(); - 'required'클래스를 갖고 있지 않는 input을 숨김
$('ul, ol, dl').hide(); - 다중 셀렉터를 콤마를 이용해서 연결가능.
$("input:checkbox/..").css('border', '1px solid #777'); - 보더를 모든 체크박스의 부모엘리먼트에 추가하려면 /..를 사용.
$('table.striped > tr:odd').css('background', '#999999'); - 보통 가독성 있는 테이블을 나타내기 위해 홀수, 짝수 서로 다른 css를 입히고자 할때..
 
플로그인으로 jQuery확장하기
 
 
===이하는 계속 작성중....