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

최근에 받은 트랙백

글 보관함

jQuery API .live() 공부하기

2012. 8. 8. 17:17 | Posted by 솔웅


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 에 있는 다른 예제도 하고 싶은데 오늘은 힘이 딸려서 이만 쉬어야 겠습니다.

에너지가 되시는 분은 위 링크를 따라가서 보세요. 도움이 될 겁니다.


새로운 프로젝트를 할수록 공부해야 될 것은 점점 더 많아 지네요.


어쨌든 새로운걸 배우는 건 재밌습니다.


좋은 하루 되세요.

반응형

Comment

  1. 맨날 눈팅만하다가 ^^ live 메소드의 특징은 위의 예제기준으로 말하자면 동적으로 생성된 모든 <p />태그에도 click이벤트가 자동으로 할당된다는 겁니다 ^^ "Another paragraph" 를 클릭해도 <p>Another paragraph!</p> 태그가 추가됩니다. ^^