JQuery01

Professor Ho's Wiki Site

jQuery는 동적으로 html 파일을 조작하기 쉽게해주는 자바스크립트 라이브러리이다. 이를 이용하면 html 파일의 요소 분석과 조작, 다양한 이벤트의 처리등을 쉽게 구현할 수 있다. 다음의 예제는 html의 여러요소를 쉽게 조작할 수 있는 jQuery의 샘플 프로그램이다. 알람이 나타나면 실행해 주시고 다시 실행하려면 페이지 새로 고침을 실행한다. 알람 버튼을 누르면서 HTML의 특정 요소값을 가져와서 다이얼로그 창에서 보여주는 기능, HTML의 특정 요소 값을 변경하는 기능, 이미지를 변경하고 인수값을 마음대로 조절하는 방법등을 보여준다.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  3. <html>
  4. <head>
  5. <title>My Test Page</title>
  6. <script src=js/jquery-1.3.2.min.js></script>
  7. <script type="text/javascript">
  8. 	$(document).ready(function(){    // When html is leaded this part is called
  9. 		alert($("img").attr("alt")); // Retrieving attribute from the html element
  10. 		alert($('img').attr('src')); // Same this time from attribute src
  11. 		alert($('p').html()); 		 // Same this time from attribute src (First one)		
  12. 		alert("I will change the first img")
  13. 		$('img').attr({src:'images/BB.jpg',alt:'whatever'}); // This will change the first image
  14. 		alert("I will remove the height attribute from the images")		
  15. 		$('img').removeAttr('height');
  16. 		alert("'I am No.1!' will be changed with 'You are the last!'")		
  17. 		var temp = $('strong').html();
  18. 		$('strong').html($('em').html());
  19. 		$('em').html(temp);
  20. 		alert("This will change the group1 id as 'I'm in group1!")		
  21. 		$('#group1').text("I'm in group1!");
  22. 		alert("This will change all class1's text to Class1!")		
  23. 		$('.class1').text("I'm in class1!");	
  24. 		alert("After this will show the 3th of <p> elements!")		
  25. 		alert($('p:eq(2)').html());			 // :first, :last, :even, :odd, :gt, :lt, :eq ...
  26. 	});
  27. </script>
  28. </head>
  29. <body>
  30. <table width = 600>
  31. <tr>
  32. <td width = 300>
  33. <img src = "images/threeDTest.jpg" height = "200" alt="Testing image">
  34. </td>
  35. <td width = 300>
  36. <img src = "images/BB.jpg" height = "200" alt="Testing image">
  37. </td>
  38. </tr>
  39. <tr>
  40. <td width = 300>
  41. <p id='group1'>This is my test page. Paragrph1</p>
  42. <p id='group2'>This is my test page. Paragrph2</p>
  43. <p id='group3'>This is my test page. Paragrph3</p>
  44. <p class='class1'>This is my test page. Paragrph4</p>
  45. </td>
  46. <td width = 300>
  47. <p class='class1'>This is my test page. Paragrph5</p>
  48. <strong>I am No.1!</strong> <br/>
  49. <em>You are the last!</em>
  50. </td>
  51. </tr>
  52. </table>
  53. </body>
  54. </html>
개인 도구