jQuery 란 무엇인가
2006년 초에 개발된 자바 스크립트 라이브러리로써 기존에 라이브러리는 놀랍고 강력한 고급 기술에 중점을 두는 컨셉으로 등장했지만 jQuery는 웹페이지를 개발하는 개발자의 생각하는 방식을 바꾸는데 그 목적을 두었다고 한다.
왜 jQuery 인가
웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고 또는 애니매이션등의 효과를 줘야 할 경우가 많다. 이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다. 이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있수 있도록 해줄놈이 jQuery 이란 놈이다.
튀지 않는 자바 스크립트
HTML 엘리먼트에 스타일을 적용하고 자바스크립트 호출을 넣는 방법은 지금까지 많이 사용되어왔던 스타일이다.
<button type="button" onclick="document.getElementById("zz").style.color='red';" >클릭 하시오</button>
이런 형식으로 작업을 해왔다. 전혀 이상할 것 없는 소스 이다.
jQuery 는 위와 같은 코딩 스타일을 튀는 자바 스크립트라고 부른다.
하지만 jQuery는 이와는 반대로 튀지 않는 자바 스크립트를 지향한다.
즉 엘리먼트와 css & 자바스크립트를 분리 하여 <body> tag 안에는 자바 스크립트와 CSS가 들어 오지 못하게 하는 것이다.
<button type="button" id="testButton">클릭 하시오</button>
<script language="javascript">
window.onload = function(){
document.getElementById('testButton').onclick = makeItRed;
};
functin makeItRed(){
document.getElementById('zz').style.color = 'red';
}
</script>
위와 같은 형식으로 엘리먼트와 자바 스크립트 영역을 구분 지어 코딩하는 이것을 튀지 않는(unobtrusive) 자바 스크립트라고 한다.
jquery 사이트 : http://www.jquery.com
jquery 메뉴얼 : http://visualjquery.com/
jquery 로드 하기
<script type="text/javascript">
$(function(){
alert("시작!");
$("table").fadeOut(2000).fadeIn(2000);
});
</script>
window.onload 와 같은 기능
다양한 element 표현
|
$("div") - div 태그를 표현 |
'jQuery' 카테고리의 다른 글
| Ajax 통신 중 Loading bar 구현 (ajaxStart, ajaxStop 이벤트) (0) | 2014.02.28 |
|---|---|
| jQuery를 UI 레이아웃 플러그인 (1) | 2013.06.09 |
| 배열을 이용한 중복 제거 (0) | 2013.04.29 |
| 원본 사진 마우스 이동시 보여주기 (0) | 2013.04.12 |
| select radio checkbox (0) | 2013.02.18 |