제이쿼리(Jquery) 란?
제이쿼리(jquery)는 자바스크립트로 된 프레임웍으로 프로그래머의 브라우져별 자바스크립트의 api 차이를 고려할 필요없이 동일한 코드의 작성을 지원하며, 자바스크립트의 코딩을 단순화 하였다.
즉 간단히 제이쿼리는 자바스크립트를 편리하게 사용하게 해주는 라이브러리 정도로 생각하면 된다．
자 그럼 jquery를 사용하기 위해서는 어떻게 해야하는가？
１．Jquery 의 CDN 주소로 포함시킨다．
CDN 은 Contents Delivery Network 의 약자. 간단히 외부서버에서 제공하는 jquery를 include 시킨다고 생각하면 된다.
자바스크립트 라이브러리들의 cdn 주소를 확인하는 사이트 : https://cdnjs.com/
jquery 홈페이지에서 cdn 주소확인 : http://jquery.com/download/
다음의 구문을 소스에 포함시킨다.
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
따라서 우리는 위와 같이 jquery를 포함 시킬 것이다.(cdn 으로 jquery 를 제공하는 곳은 많기 때문에 꼭 위와 동일하지 않아도 된다)
2. 해당 시스템 또는 로컬 서버에 해당파일은 포함시키고 해당 주소를 작성 화면에 포함 시킨다．
http://jquery.com/download/ 에서 해당 jquery 다운로드 받고 로컬서버등에 위치시킨다.
<script src="jquery 파일의 주소"></script>
자 간단하게 cdn으로 jquery를 실행해 보자．
소스는 다음과 같다．
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery basic</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert("hello jquery");
})
</script>
</head>
<body>
</body>
</html>
hello jquery 라는 alert 창이 떳다면 정상 작동한 것이다.
이것을 자바스크립트로 구현하면 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function init(){
alert("hello javascript");
}
</script>
</head>
<body onload="init()">
</body>
</html>
둘 예시는 화면이 로드되는 시점에 alert의 내용을 도시하는 내용이다.
jquery 의 ready 이벤트는 다음과 같이 축약이 가능하다.
방식 1.
jQuery(document).ready(function() {
alert("hello jquery");
})；
방식 2. jQuery 를 $ 로 축약( jQuery = $ 동일하게 사용이 가능하다)
＄(document).ready(function() {
alert("hello jquery");
})；
방식 3. ready 생략
＄(function() {
alert("hello jquery");
})；
3가지의 결과는 동일하게 나온다.
첫강 끝~
'IT > jquery' 카테고리의 다른 글
| [제이쿼리(jQuery)] lesson 5 (0) | 2014.11.24 |
|---|---|
| [제이쿼리(jQuery)] lesson 4 (0) | 2014.11.24 |
| [제이쿼리(jQuery)] lesson 3 (0) | 2014.11.24 |
| [제이쿼리(jQuery)] lesson 2 (0) | 2014.11.24 |
| JQuery의 when (0) | 2014.11.21 |