오늘부터 하루에 하나 또는 두개씩 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>
테스트 화면 모습입니다.
↓
↓
↓
'jQuery > jQuery Tutorial' 카테고리의 다른 글
| jQuery Mobile 아이콘 (0) | 2013.11.07 |
|---|---|
| jQuery Events hover(), focus(), blur() (0) | 2013.05.10 |
| jQuery events mouseenter(), mouseleave(), mousedown(), mouseup() (0) | 2013.05.10 |
| jQuery Events ( click(). dbclick() ) (0) | 2013.05.10 |
| jQuery Selectors (0) | 2013.05.08 |
