jquery의 장점이라면, 일단 소스 길이가 짧아지고, ajax같은것도 쉽게 쓸수 있고, 기존에 javascript로 짜놓은 구문은 어떤 브라우저에선 되고, 어떤 브라우저에선 안되고 하지만, jquery로 짜놓은건 어느곳에서나 다 된다는 점.. 정도라고 생각하면 될 것이다.
하지만, 이 jquery 라는게.. jquery 만의 문법을 따로 가지고 있기 때문에, 쓰다보면 은근히.. 까먹는 경우가 많아서, 필자가 자주 쓰게 되는 간단한 부분들만 이곳에 포스팅 해놓을 생각이다. (물론 그전에 해놓았던 jquery 들은 제외하고 말이다.)
$(document).ready( function(){ } );
$().ready( function(){ } );
$( function(){ } );
$(window).load( function(){ } );
1,2,3줄은 같은 표현으로 onload와 비슷하다고 생각하면 된다. 그리고 4번째는 onload와 완전히 같은 뜻이다. ready와 onload가 다른점은 ready는 이미지가 로드 되기 전에 실행되고, onload는 해당페이지의 모든 항목이 불러와져야 실행 된다는 점이다.
$.ajax({
type: "POST",
url: "http://url.php",
timeout: 30000, //밀리초(1/1000초)
data: "data1="+data1 + "&data2=" + data2,
beforeSend: function() { }, //통신 시작전에 실행되는 구문
success: function(msg){ }, //통신 성공시 처리되는 부분
error: function(xhr, status, error){ }, //통신 에러시에 발생되는 부분
complete: function(){ } //통신 완료후 처리되는 부분
});
ajax에 쓰이는 항목들이다. 참고로 위 통신시간도중 로딩바 같은것을 처리하려면 beforeSend에 로딩바처리를 집어넣은후에 complete가 실행되면서 해당 로딩바를 끝내주도록 해주면 되겠다.
그리고 sucess에 있는 msg값은 통신후에 넘어온 값이다.
var this_id = $('#id').attr( 'id' ); //해당속성의 값을 가지고 온다.
$('#id').attr('src', '/img/img.gif'); //해당속성의 값을 바꿔준다.
$('#id').attr({
src : "img/test.gif",
alt :"test"
}); //해당 여러속성을 바꿔준다.
$('#id').removeAttr('checked') //해당속성을 제거한다.
attr관련 사용법이다. 파라미터를 어떤식으로 집어넣느냐에 따라서 사용법이 조금씩 달라진다.
$('#id').val(); //해당 id의 값
$('.class #id:checked').val() //해당 클래스의 해당 id의 check된 값.
//class1의 id1과 class2의 id2를 클릭했을때 함수를 실행.
$('.class1 #id1, .class2 #id2').click( function(){} );
jquery에서 참조되는 방식이다. 어떤 태그 안에 또다른 태그가 있을경우 띄워쓰기( )로 계층 순서대로 써주면서 참조를 할수 있고, 여러가지를 동시에 참조할때는 쉼표(,)로 구분해주면 된다.
//---2012.09.11--추가---
위 에서 2번째줄에 :checked를 쓸때, $('.class #id :checked').val() 이런식으로 해당 아이디에서 반드시 한칸 띄운뒤에 쓰지 않으면 제대로 작동을 안하는 경우가 있다. 반대로 위처럼 붙여서 써야지만 제대로 작동하는 경우도 있다.
아마 버전에 따라서 다른거 같은데, 사용시에 주의 하기 바란다.
