jQuery Mobile 샘플 소스를 하나 분석하고 나니까 어디서 막히는 지 알겠네요.
제가 자바스크립트랑 jQuery 에서 약한 것 같습니다.
그냥 jQuery Mobile 튜토리얼만 봐서는 실무에서 많이 힘들것 같아요.
그래서 jQuery 쪽도 하나하나 배워야겠습니다.
우선 눈에 먼저 띈 .live() 를 배워보죠.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$("p").live("click", function(){
//$(this).after("<p>Another paragraph!</p>");
$(this).before("<p>Another paragraph!</p>");
});
</script>
</body>
</html>
보시면 아시겠지만 위의 소스는 jQuery Mobile이 아닙니다. 그냥 jQuery 이죠.
처음에 나오는 style은 <p> 태그에 스타일을 준겁니다. 배경색을 노랑으로 하고 볼드체로 하고 패딩을 5픽셀을 주었네요.
다음줄은 jquery-latest.js를 참조했구요.
그 다음에 브라우저에 표시될 body 부분이 시작됩니다.
Click me! 가 <p> 태그에 감싸였으니까 여기에 CSS가 적용이 되겠네요.
그 다음이 지금 배울 .live() 메소드가 나오는 자바스크립트 부분입니다.
$("p").live("click", function(){} 는 p 태그를 클릭하면 {} 안에 있는 함수를 실행하라는 겁니다.
안에는 $(this).before("<p>Another paragraph!</p>"); 이 있는데요.
여기서 $(this) 는 클릭한 p를 말합니다. 처음에는 Click me! 가 되겠죠. 이것의 전에(before) 괄호안에 있는 부분을 추가하는 겁니다.
before 부분을 주석처리하고 위의 after 주석을 풀고 실행하면 클릭한 것의 바로 다음에 괄호 안의 내용이 추가 됩니다.
아주 쉽네요.
.live() API 에 있는 다른 예제도 하고 싶은데 오늘은 힘이 딸려서 이만 쉬어야 겠습니다.
에너지가 되시는 분은 위 링크를 따라가서 보세요. 도움이 될 겁니다.
새로운 프로젝트를 할수록 공부해야 될 것은 점점 더 많아 지네요.
어쨌든 새로운걸 배우는 건 재밌습니다.
좋은 하루 되세요.
'jQuery Mobile > jQuery API' 카테고리의 다른 글
| 우아하게 화면 scroll 하기 (0) | 2012.12.20 |
|---|---|
| .clone() 메소드 알아보기 (0) | 2012.08.23 |
| .find() 메소드 알아보기 (0) | 2012.08.23 |
| .delegate() 메소드 알아보기 (0) | 2012.08.23 |
| jQuery API 몇개 훑어보기 .html(), .text(), .bind() (0) | 2012.08.10 |