샘플 앱을 분석하려다 보니까 jQuery 메스드가 많이 나오네요.
먼저 jQuery 메소드 부터 대충 익히고 소스 분석 들어가겠습니다.
element의 내용을 얻을 때 사용합니다.
예제를 보시죠.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$("p").click(function () {
var htmlStr = $(this).html();
console.log(htmlStr);
$(this).text(htmlStr);
});
</script>
</body>
</html>자바스크립트를 보면 p 태그가 있는 곳을 클릭하면 그 부분의 내용을 긁어 와서 htmlStr 변수 에 담습니다. 그리고 이것을 text로 뿌려주죠.
제가 중간에 console.log()를 이용해서 로그를 뿌렸습니다.
크롬 부라우저의 inspection에 있는 console 에서 보면 이 로그를 확인하실 수 있습니다.
보니까 <p> </p> 사이에 있는 모든 글자를 가져왔죠? 그것이 html 태그이든 글자이든 다 가져왔습니다.
보니까 .text()도 나오네요. 이 예제도 볼까요?
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $("p:first").text();
console.log(str);
$("p:last").html(str);
</script>
</body>
</html>
p 태그 첫번째 텍스트만 불러와서 마지막 p 태그에 뿌려주는 것인가 봅니다.
그리고 jQuery Mobile 메소드 중에 .checkboxradio("refresh") 가 있습니다.
자바스크립트로 radio 버튼을 만들 때 사용합니다.
그리고 .page() 메소드도 있습니다. (jQuery Mobile)
정확히 뭐하는 걸까요? 해당 페이지를 refresh 하는 건가?
느낌상 그런것 같네요.
다음에 jQuery 메소드 중에 .bind() 가 있습니다.
예제가 재밌네요.
<!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 or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});
</script>
</body>
</html>p 태그를 클릭하면 Click Happend : x좌표, y 좌표를 표시해 주고 더블 클릭하면 p 태그에서 더블클릭이 있어 났다는 메세지를 뿌려줍니다.
그리고 마우스가 enter, 되고 leave 될 때마다 css 의 over 기능이 적용 됐다가 해제 됐다가 하구요.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
</script>
</body>
</html>이 소스에서는 버튼을 클릭하면 myName = john 이라는 텍스트가 fadeIn, fadeOut 기능이 적용되서 나타 났다가 사라집니다.
직접 파일을 만드셔서 확인해 보시면 쉽게 이해가 가실 겁니다.
자바스크립트는 웬지 막 좀 복잡합니다.
하여간 오늘은 .html(), .text(), .bind() 를 메인으로 공부했습니다.
그거 공부하면서 예제에 나오는 fadeIn, fadeOut, click, doubleClick, x,y 좌표 구하기, mouseenter, mouseleave 시 토글 형식으로 효과 주기 등등을 배웠습니다.
'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 .live() 공부하기 (2) | 2012.08.09 |