'jQuery'에 해당되는 글 2건

  1. 2013.01.31 jQuery를 시작하자~ 1
  2. 2013.01.29 셀렉터(Selector) 기초

jQuery를 시작하자~

Posted by 알 수 없는 사용자 Web/JQuery : 2013. 1. 31. 09:00


오늘은 jquery를 어떻게 구동하는지 포스팅 하겠습니다.ㅎ


제가 주로 쓰는 편집기는 메모장의 업그레이드판인 오픈소스 Notepad++ 을 사용합니다.


저는 오픈소스를 사랑하는 사람, 그리고 무료버전을 찾아헤매는 사람입니다. ㅎㅎㅎㅎ


그 외에도 Aptana Studio 라는 무료프로그램이 있습니다.(오픈소스는 아닙니다. ㅎ)


자 이제 시작해 볼께요. 구조는 다음과 같이 만들어서 메모장에서 [파일이름.html] 로 저장 합니다.


<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>

   $(document).ready(function(){

   $('button').click(function(){ alert("Clicked button")})

         });  

  </script>

</head>


<body>

 

<button>Click</button>


</body>

</html>



 <script src="http://code.jquery.com/jquery-latest.js"></script>

여기에 나와있는 주소 말고도 다른주소들이 많아요ㅎ 한번 찾아보세요ㅎ jquery를 사용하시기 위해서는 꼭 적어주셔야 되는 부분입니다. 


url 주소 말고도 직접 .js 파일을 다운받아서 사용하는 방법도 있어요.


1. 우선 http://jquery.com 으로 접속을 합니다.

2. 오른쪽 상단에 있는 Download jQuery 이미지를 클릭합니다.


3. 빨간색 박스로 만든 부분을 클릭하여 다운로드 합니다. 두개의 차이는 압축한거와 안한거의 차이라고 하는데 정확하게는 모르겠네요 ㅎ



4. 다운받은 파일을 제가 작업하고 있는 파일과 같은 폴더에 넣어줍니다.


5. 작업하시고 계신 파일에서 다음과 같이 고쳐줍니다. ㅎ

 <script src="jquery-1.9.0.js"></script>


그러면 따로 인터넷이 되지 않아도 jquery를 사용할 수 있어요 ㅎ 


허접하지만 제가 알고 있는 지식은 여기 까지 입니다 ㅎㅎ


오늘 포스팅은 여기서 끝 ㅋㅋ

  


'Web > JQuery' 카테고리의 다른 글

jQuery 배열과 객체 사용  (1) 2013.02.06
셀렉터(Selector) 기초  (0) 2013.01.29
처음 강좌(?)를 시작하며...  (0) 2013.01.21
  

셀렉터(Selector) 기초

Posted by 알 수 없는 사용자 Web/JQuery : 2013. 1. 29. 15:46

오늘은 셀렉터 기초에 대해 알아보도록 하겠습니다.

간단하게만 포스팅 할께요 ㅎ


<html>

<body>

   <button id="btn_id" class="btn_class" name="btn_name">Click 1</button>

   <button class="btn_class">Click 2</button>

   <button name="btn_name">Click 3</button>

</body>

</html>


ID로 찾기 (identity의 약어인거 아시죠? 같은 id를 쓸 수 없습니다.)

<script>

   $(document).ready(function(){

      $('#btn_id').click(clickBtn);          //같은 표현 $('[id=btn_id]')

   });


   function clickBtn(){

      alert("ID");

   }

</script>


[결과]



* Click 2, Click 3 을 눌렀을 때에는 아무 반응을 하지 않습니다.



Class로 찾기 (btn_class 라는 이름을 가진 클래스를 모두 찾습니다.)

<script>

   $(document).ready(function(){

      $('.btn_class').click(clickBtn);    //같은 표현 $('[class=btn_class]')

   });                                                 //                 $('button.btn_class')


   function clickBtn(){

      alert("Class.");

   }

</script>


[결과]



* Click 3 을 눌렀을 때에는 아무 반응을 하지 않습니다.




Name으로 찾기 (btn_name 라는 이름을 가진 클래스를 모두 찾습니다.)

<script>

   $(document).ready(function(){

      $('[name=btn_name]').click(clickBtn);    

   });


   function clickBtn(){

      alert("Name");

   }

</script>


[결과]



* Click 2 를 눌렀을 때에는 아무 반응을 하지 않습니다.


   


'Web > JQuery' 카테고리의 다른 글

jQuery 배열과 객체 사용  (1) 2013.02.06
jQuery를 시작하자~  (1) 2013.01.31
처음 강좌(?)를 시작하며...  (0) 2013.01.21
  
 «이전 1  다음»

티스토리툴바