Javascript 단순화의 백미 jQuery

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확장하기
 
 
===이하는 계속 작성중....