본문 바로가기
jQuery/jQuery Tutorial

jQuery 기초

by 진격의 파파 2013. 5. 8.
반응형

 

오늘부터 하루에 하나 또는 두개씩 jquery 에 대한 내용을 기초부터 다루어 보려고 합니다.

jquery 를 공부하시는 많은 분들에게 도움이 되길 바랍니다.

잘 정리되어 있는 해외 사이트를 참조하여 내용을 다루겠습니다.

jQuery는 Javascript Library입니다.
jQuery는 Javascript 프로그래밍을 매우 단순하게 해줍니다.
jQuery는 배우기 쉽습니다.
jQuery 라이브러리는 웹페이지에 단 한줄을 추가하여 사용할 수 있습니다.

[배우기 전에 알아둬야 할 부분]
jQuery를 배우기 전에 다음 사항에 대한 기본 지식이 있어야 합니다.
- HTML
- CSS
- Javascript


[jQuery란 무엇인가?]
jQuery는 javascript 함수들로 이루어진 라이브러리입니다.
jQuery 라이브러리는 다음과 같은 특징이 있습니다.
- HTML 엘리먼트 선택
- HTML 엘리먼트 조작
- CSS 조작
- HTML 이벤트 함수
- javascript 효과 및 에니메이션
- HTML DOM traversal과 수정
- AJAX
- Utilities

[웹페이지에 jQuery 라이브러리 추가하기]
jQuery 라이브러리는 자바스크립트 파일로 저장되어 있고, 모든 jQuery 메서드를 담고 있습니다.
다음과 같이 웹페이지에 추가할 수 있습니다.
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script>태그가 기본적으로 <head></head>안에 있어야 합니다. 하지만 꼭 헤드안에 없어도 실행되지만 혹시나 모를 버그에 대비하는게 좋겠죠


[jQuery 기본 예제]
다음의 예제는 jQuery의 hide() 메소드를 설명하고 있습니다. 이 hide() 메소드는 HTML문서에 있는 모든 <p>태그를 감춥니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> //2013년 4월 jquery 2.0 버전이 릴리즈 되었습니다.
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>여기를 클릭하면 사라집니다.</p>

<p>여기도 클릭해 보세요!!!!! </p>
</body>
</html>


[jQuery 다운로드]

jQuery는 두 가지 버전이 있습니다. 하나는 작게 축소한 버전이고, 또 하나는 압축하지 않은 버전입니다. 압축하지 않은 버전은 디버그나 내용확인을 위한 것입니다.
둘다 http://www.jquery.com 에서 다운로드할 수 있습니다.
jQuery 라이브러리를 다운로드를 하지 않고 아래와 같이 jQuery 라이브러리로 사용할 수도 있습니다.
<head>
<script type="text/javascript" src="</script'>http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

테스트 화면 모습입니다.

 

 

 

반응형