S i X h E a D { ? }

ไม่ต้องพูดอะไรกันมาก เริ่มเรียนรู้กันจากตัวอย่างไปเลย ใช้งานง่ายมากๆ เขียน code บรรทัดเดียว
ก็จะได้ คำสั่ง show, hide, หรือ fade effect แบบสวยงามได้แล้ว

ดูตัวอย่างที่นี่

#testDiv {
	background-color:#3399CC;
	font: 12px Tahoma, Arial, sans-serif;
	color:#FFFFFF;
	width: 150px;
	height: 100px;
	text-align:center;
}
.testClass {
	background-color:#FF0000;
	font: 12px Tahoma, Arial, sans-serif;
	color:#FFFFFF;
	width: 150px;
	height: 100px;
	text-align:center;
}

* #testDiv และ .testClass ใน css เอาไว้แค่กำหนดหน้าตาเฉยๆ ไม่มีผลกับ jquery

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>

บรรทัด 26. เป็นการเรียกโหลด jquery.js เข้ามา

<a onclick="$('#testDiv').show();" href="javascript:void(0);">Show</a>
<a onclick="$('#testDiv').hide();" href="javascript:void(0);">Hide</a>

บรรทัด 31. จุดสำคัญมันอยู่ตรงนี้ onclick="$('#testDiv').show();" คำสั่งนี้คือการ เลือกที่จะทำงานกับ
div (ขึ้นต้นด้วย #) ที่ชื่อว่า #testDiv นั่นเอง

 
<div id="testDiv">ข้อความ .. .. .. ข้อความ</div>
 

<a onclick="$('.testClass').show();" href="javascript:void(0);">Show</a>
<a onclick="$('.testClass').hide();" href="javascript:void(0);">Hide</a>

บรรทัด 49. ในทำนองเดียวกัน onclick="$('.testClass').show();" คำสั่งนี้คือการ เลือกที่จะทำงานกับ
class (ขึ้นต้นด้วย .) ที่ชื่อว่า .testClass นั่นเอง

 
<div class="testClass">ข้อความ .. .. .. ข้อความ</div>
 

ส่วนคำสั่ง fadeIn, fadeOut ก็ดูได้จาก source code ในตัวอย่างได้เลย
เห็นไหมครับว่ามันง่ายขนาดไหน ต่อให้เป็น web designer ก็ตามยังสามารถที่จะลองทำได้ง่ายๆ เลย

อันที่จริงแล้ว jQuery นั้นมีคำสั่งที่สั้นกว่านี้อีกไว้จะเขียนเพิ่มในตอนต่อๆ ไป