01.<html>
02.<head>
03.<title>ThaiCreate.Com jQuery Tutorials</title>
04.
05.<style type="text/css">
06. .css1 {
07. font-size: 11px;
08. font-weight: bold;
09. color: #000000;
10. }
11. .css2 {
12. font-size: 20;
13. font-weight: bold;
14. color: #FF0000;
15. }
16.</style>
17.
18.<script type="text/javascript" src="jquery-1.6.4.js"></script>
19.<script type="text/javascript">
20.
21.$(document).ready(function(){
22.
23.
24. $("#btnHide").click(function(){
25. $("p").hide();
26. });
27.
28. $("#btnShow").click(function(){
29. $("p").show();
30. });
31.
32.
33.
34.
35. $("#btnHideCss1").click(function(){
36. $(".css1").hide();
37. });
38.
39. $("#btnShowCss1").click(function(){
40. $(".css1").show();
41. });
42.
43.
44.
45.
46. $("#btnCss1").click(function(){
47. $("#mytext").removeClass();
48. $("#mytext").addClass("css1");
49. });
50.
51. $("#btnCss2").click(function(){
52. $("#mytext").removeClass();
53. $("#mytext").addClass("css2");
54. });
55.
56.
57.});
58.</script>
59.</head>
60.
61.<body>
62.
63. <p>My Name is Win</p>
64. <input name="btnHide" id="btnHide" type="button" value="Hide">
65. <input name="btnShow" id="btnShow" type="button" value="Show">
66. <hr>
67.
68. <div class="css1"> My Name is Win</div><br>
69. <div class="css1"> My Name is Weerachai</div>
70. <input name="btnHideCss1" id="btnHideCss1" type="button" value="Hide Css1">
71. <input name="btnShowCss1" id="btnShowCss1" type="button" value="Show Css1">
72. <hr>
73.
74. <span id="mytext"> My Name is Win</span>
75. <input name="btnCss1" id="btnCss1" type="button" value="Change to Css1">
76. <input name="btnCss2" id="btnCss2" type="button" value="Change to Css2">
77.
78.</body>
79.</html>
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
