#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>

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

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

ดสำคัญมันอยู่ตรงนี้ 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>

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

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