scroll ลงไปดูล่างๆ

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

#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 นั้นมีคำสั่งที่สั้นกว่านี้อีกไว้จะเขียนเพิ่มในตอนต่อๆ ไป

 
<style media="screen" type="text/css">
.SiXhEaD_Link { font: 12px Tahoma, Arial, sans-serif; padding: 10px 0; }
.SiXhEaD_Link a { background: #F8FBFC; color: #069; text-decoration: none; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
.SiXhEaD_Link a:hover { border-color: #B7D7E1; }
.SiXhEaD_Link font { font: 12px Tahoma, Arial, sans-serif; background: #F8FBFC; color: #CCCCCC; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
</style>
 

จุดสังเกตุง่ายๆ ใน css ถ้า ขึ้นด้วย . คือชื่อ class แต่ถ้าขึ้นด้วย # คือ id ของ div หรือ span
- บรรทัดที่ 7 เริ่มกำหนด class ชื่อ SiXhEaD_Link
- บรรทัดที่ 8 ถ้าเป็น link
- บรรทัดที่ 9 ถ้าเป็น link และถูก mouse over
- บรรทัดที่ 10 tag font

 
<div class="SiXhEaD_Link" align="center">
<font>&laquo; First</font> <font>&#8249; Prev</font>
<a href="javascript:void(0);">1</a>
....
....
</div>
 

ทีนี้เราก็ใส่ div ครอบ link ทั้งหมดที่เราต้องการ และใส่ class="SiXhEaD_Link" เท่านั้นเป็นอันจบ