실은 이 사이트 자체를 잊어 먹었었다 ㅡㅡ;;
갑자기 왠 제이쿼리냐고??
군대 동기 전x민이 제이쿼리 공부해두면 언젠가는 써먹는다고 해보라고 했다
쉽다나? 제이쿼리가 DB쿼리문인줄 알았던 웹무식자에게 뭔가 영감을 준 책이라 할수 있다
일단 교재는 "머리에 쏙쏙 들어오는 jQuery 입문" 이다.
누차 말하지만 난 이 책을 사서보는거고 잊지 않기 위해 여기에 올리는 것이다.
왠만하면 사서 보자~
일본인 저자가 만든 책이고, 풀 컬러라 보기 좋다 ㅎㅎ(애들 취향 ㅡㅡ;)
그럼 리뷰 시작~
---------------------------------------------------------------------------------
1. 제이쿼리의 대략적인 개념
장점
제이쿼리는 편리하다. (코드가 간결해~)
브라우저를 가리지 않는다.(호환성 쩔어~)
자바스크립트와 비슷한 문법(금방 습득가능)
정보가 풍부하다(커뮤니티가 잘 되어 있음)
버그가 적다(과연?)
단점 - 이 책엔 없네 ㅡㅡ??
1.1 기본 개념을 접해 보자~
$('#sample1').hide(); //id 속성이 sample1 인 요소를 숨기기
<div id = "sample1">샘플이다</div> //html 페이지 안에 이런게 있다고 하면 숨겨진다
제이쿼리의 기본적인 흐름은 [무언가를 가져오기] -> [그것에 무언가를 하기] 다.
무언가를 가져오기 -> id가 sample1인 요소 -> $('#sample1')
그것에 무언가를 하기 -> 숨기기 -> .hide()
제이쿼리에서 $는 반드시 등장한다. 항상 맨 앞에 붙는다.
$()는 무언가를 가져오기
1.2 제이쿼리 객체화하기
제이쿼리에서 객채라는 것은 뭘까?
로봇 슈트를 입은 사람과 같은 것이다(아이언맨!!)
객체가 혼자 있을 때는 그냥 찌질이지만
슈트를 입으면($()) 자바 스크립트만으로는 하기 힘든 조작을 간단하게 할 수 있다.
그럼 객체화 된 슈트에 무언가 하기 기능을 어찌 넣을까?
[그것에 무언가를 하기] 기능은 뒤에 .을 붙여 작성하면 된다.
예는 위에랑 같은 예다.
$('#sample1').hide(); //id 속성이 sample1 인 요소를 숨기기
$('#sample1').shiw(); //표시하기
1.3 정리 하기
- $가 제이쿼리
- $()로 무언가를 가져옴
- 그리고 가지고 온 요소를 제이쿼리 객체화 함
- 제이쿼리 객체로 편리한 기능을 사용할 수 있음
- 그러한 편리한 기능이 없으면 여러가지 일이 매우 어렵고 힘듦
1. 4 제이쿼리를 사용하기 위한 준비
http://jquery.com/ 에서 다운 받자
다운 받은 제이쿼리 파일을 동일 디렉토리에 놓는다.
파일 이름이 jquery-1.7.1.min.js 라면
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$('#sample1').hide();
</script>
</head>
<body>
<div id="sample1">이 div를 지우고 싶다！</div>
</body>
</html>
이런식으로 지정해 주면 된다. 진짜로 이거면 설치 끝이다 ㅎㅎ;;
나도 처음에는 이게 다야? 하면서 당황했는데 이러면 다 되더라 ㅡㅡ;;;
이 div를 지워보자.
저거 복붙해도 안지워진다.
원인은 위에서부터 순차적으로 읽다보니 $('#sample1').hide(); 에서 sample1 이 아직 읽혀지지 않았다. 그래서 뭘 지워야 하는지 모르니 걍 제끼는거다
그럼 어찌하는가 하면
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function(){
$('#sample1').hide();
});
</script>
</head>
<body>
<div id="sample1">이 div를 지우고 싶다！</div>
</body>
</html>
$(function(){})으로 감싸준다. ()에 주의하자. 처음에 ()이게 2중인걸 모르고 한참 헤맷다.
하지만 지금은 함수가 한개니깐 저기에 썼지만 100개 1000개 넘으면 코드가 엄청 복잡해지고 상사에게 싸다구 크리를 맞을수 있다.
$(function(){}) 부분을 따로 파일로 만들자.
scripts.js라는 파일명을 만들고 안에
$(function(){
$('#sample1').hide();
});
라고 저장하자.
물론 위의 소스에서 그 부분은 지워야겠지??
그럼 파일이 2개 생겼다(제이쿼리 파일까지 3개군)
-------------index.html-------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js">test();</script> //그저 파일 연결만 해줬다
</head>
<body>
</body>
</html>
----------------------------------------
---------------scripts.js-----------------
$(function(){
$('#sample1').hide();
});
-------------------------------------------
그리고 제이쿼리 파일(jquery-1.7.1.min.js) //당신이 받은 제이쿼리 파일명을 써주면 된다
이 책에서 기본으로 쓰는 파일이 4개가 있다.
index.html
styles.css (빈 파일)
jquery-1.7.1.min.js (제이쿼리 파일)
scripts.js (빈 파일)
빈 파일 부분은 이제 공부하면서 채울 부분이니
저리 만들어 놓고 복붙해서 쓰자(귀찬귀찮 ㅡㅡ;;)
이로서 1강 끝이다(벌써?) 다음 2강은 무언가를 가져오는 법을 다루겠다.
댓글 없음:
댓글 쓰기