Javascript 단순화의 백미 jQuery
Posted 2010. 5. 7. 03:23다음은 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); };}이 소스가 아래와 같이 간결해진다. |
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(){
기본적인 빌트인 함수로 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확장하기===이하는 계속 작성중....
'개발노트 > Script/CSS/jQuery' 카테고리의 다른 글
jQuery Ajax 에서 Struts 결과값을 Json 형태로 받아오기 (1) | 2012.06.12 |
---|---|
jQuery 를 이용해서 div 팝업창 위치 조정하여 뛰우기 (4) | 2012.06.01 |
자바스크립트 객체 기초 (0) | 2010.04.23 |
tiny_mce 에서 한글 문제 (1) | 2009.07.25 |
동적으로 테이블 TR태그 추가/삭제하기 (0) | 2008.01.26 |
- Filed under : 개발노트/Script/CSS/jQuery