반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


샘플 앱을 분석하려다 보니까 jQuery 메스드가 많이 나오네요.

먼저 jQuery 메소드 부터 대충 익히고 소스 분석 들어가겠습니다.


.html()


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 시 토글 형식으로 효과 주기 등등을 배웠습니다.



반응형

Comment

이전 1 2 3 4 5 6 다음