비얌

jQuery 연습하기 본문

Study

jQuery 연습하기

비얌 2007. 12. 3. 17:05

이리 저리 잡다하게 공부하다 보니,
레이더 망에 걸린 jQuery...
뭔가 잼있을 것 같아서 한번 연습 시작.
기준은....http://docs.jquery.com/Tutorials:How_jQuery_Works
내가 제일 좋아하는 Tutorials~~

jQuery Site는 http://jquery.com

일단 무작정 따라해보자.

<html>
 <head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    //alert("this page is loading");
    
 $("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();
   
   });
  </script>
   <style type="text/css">a.test { font-weight: bold; }</style>
 </head>
 <body>
  <img src="http://www.eclipse.org/screenshots/images/FortranIde-RedFlag_Linux.png"/>
  <a href="http://google.com/" class="clickme">I give a message when you leave</a><br/>
  <a href="http://yahoo.com/" class="hideme">Click me to hide!</a><br/>
  <a href="http://microsoft.com/" class="test">I'm a normal link</a>
 </body>
</html>

위의 이미지 부분은 상대적으로 느리게 불려올 수 있는 eclipse site의 이미지이다. 왠지
$(document).ready(function(){
//alert("this page is loading");
...
}
이미지 전체 로딩 전에 메세지를 찍는 모습을 보고 싶은 나머지 붙인 이미지라고나 할까.
ㅡ.ㅡV

여하튼 이래저래 사용해보고 느낀 개인적인 감상은....
일단 jQuery가 비교 대상이 되는 것은 prototype.js이다. prototype.js와는 달리 엄청나게 작은 Size. 그리고 직접 만들어보면서 생각한 것인데, 상당히 직관적이게 만들어 놓았다. 대충 훓어봐도 무슨 내용인지 판단이 되며, 코드의 길이가 상당히 짧아 코드를 읽다가 지쳐 뻗어버리는 일은 없을 것 같다. 기존의 CSS 적용하는 방식과 동일하게 또는 유사하게 적용하면 해당 부분의 DOM 객체를 지정하여 Control할 수 있기 때문에 정확한 부분을 적용할 수 있는 것과 Tree 구조를 따라서 사용하지 않아도 되는 것이 가장 큰 장점처럼 보인다.(아무래도 Query 라고 이름이 붙어 있어서 일까?)

하지만 문제가 없는 것은 아니지.....
기존의 JavaScript나 prototype.js가 적용되어 있다면 충돌이 나지 않는다는 보장이 없다. jQuery.js 소스를 분석해보면(모두 분석하지는 않았지만....) 좀 충돌가능성이 있는 코드를 찾을 수 있는 것 같다. 따라서 기존의 Site가 만들어져서 JavaScript가 어마어마하게 적용되어 있던지('뭐 이렇게 안되어 있는 Stie가 어딨어!' 라고 말하면...내가 생각해도 그렇다..ㅜ.ㅜ), javascript가 익숙하지 않고 기호에 대한 부담이 있는 사람들이라면..그냥 안쓰는게 나을 듯 싶다.

여하튼 새로운 Site가 만든다면 꼭 한번 써보고 싶은 넘이다.*^^*

 ps. 참고 Site
http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html
(jQuery로 Ajax 개발을 단순화 하기-한글(!!))
http://readyset.tistory.com/entry/UI-Toolkit-비교-prototype-jQuery
(ReadySet님의 javascript UI ToolKit비교)

공유하기 링크
'Study' Related Articles more
Comments