jQuery เป็น javascript framework ที่ช่วยให้การเขียน
dynamic html, DOM, AJAX เขียนสั้นกว่าเดิมแต่เขียนได้ง่ายกว่า 
แล้วยังเขียนแล้ว Cross-browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ อีก
เรียกว่าเขียนแล้วแทบไม่ต้องไปทดสอบกันทีละ browser เลย
( ถ้าใช้ css ผ่าน jquery ทั้งหมดไม่ต้องทดสอบเลย เพราะว่า jquery สนับสนุน css 3.0 แล้ว
เรียกได้ว่าข้ามขีดจำกัดของ browser กันเลยทีเดียว แต่ถ้าเขียน css ธรรมดาประกอบด้วยก็ต้องทดสอบอยู่ดี..แป่ว )
ดาวน์โหลด jquery.js เวอร์ชั่นล่าสุดจาก http://www.jquery.com
=======================================================
jquery step by step (1)
คำสั่ง $(document).ready
เริ่มต้นเลยนะครับ 
ปกติแล้วถ้าเราเขียนโปรแกรม javascript
เราจะใช้ event onload เช่น onload=”function_name()” ใน tag body
แต่ใน jquery นี้ได้แก้ปัญหาให้เราสามารถแทรก event onload ได้ง่ายกว่า
โดยใช้คำสั่งของ jquery อย่างข้างล่างนี้
$(document).ready(function(){
//คำสั่งที่นี่
}
หรือจะเขียน สั้นๆ ได้ด้วย
$(function(){
//คำสั่งที่นี่
}
ได้ผลลัพธ์เหมือนกันครับ
=======================================================
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jquery step by step</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=tis-620″ />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
alert(’แสดงข้อความเมื่อเว็บเพจโหลดเสร็จเรียบร้อย’);
});
</script>
</head>
<body>
<!– ว่างเปล่า ไม่มีอะไร –>
</body>
</html>
=======================================================
การกำหนดค่า event handler ให้กับ tag ต่างๆ
นอกจากคำสั่ง javascript event onload ที่เราสามารถเขียนในแบบของ jquery แล้ว
jquery ยัง มีวิธีการทำให้เรียนเขียน event handler (ส่วนจัดการกับ event)
ได้จากเดิมที่จะเขียน
function function_name(){
//คำสั่ง
}
และใน tag html ก็จะเขียนว่า
<button onclick=”function_name”>try click me!</button>
แต่เมื่อเราใช้ jquery แล้วส่วนใหญ่มักจะไม่ใช้การเขียน function แบบนี้มากนัก
เราสามารถเปลี่ยนจากคำสั่งข้างบนเป็นดังนี้ ..
$(document).ready(function(){
$(”#id_of_button”).click(function(){
//คำสั่ง
});
});
และในส่วนของ html จะเขียนว่า
<button id=”id_of_button”>try click me!</button>
สังเกตว่าเราใช้ #id_of_button อ้างถึง button ‘try click me!’
ทำให้สามารถกำหนด event onclick ของ button จากส่วนของ $(document).ready
แต่ถ้าเราต้องการกำหนด event ให้กับ button ของทั้งหน้าเลย
จะเขียนว่า
$(document).ready(function(){
$(”button”).click(function(){
//คำสั่ง
});
});
ถ้าเขียนรูปแบบนี้จะเป็นการกำหนด event ให้กับ button ของเว็บหน้านั้นทั้งหน้าเลยครับ
เขียนครั้งเดียวแต่มีผลกับทุก tag button
=======================================================
ตรงข้างในเครื่องหมาย “..” ของ $(”..”) เรียกว่า selector ครับ
ตอนนี้เรารู้จัก selector ถึง 3 แบบแล้วด้วยกัน
- $(document) เป็นการ select ทั้งหน้านั้น ส่วน $(document).ready ก็คือ event เมื่อหน้านั้นถูกโหลดมาเรียบร้อยแล้ว
- $(”#…”) อย่างเช่น $(”#id_of_button”) ก็คือการ select tag ใดๆ ที่มี attribute id เท่ากับ id_of_button
- $(”tagname”) อย่างเช่น $(”button”) ก็คือการ select tag button ของทั้งหน้านั่นเองครับ
จะกำหนด event ให้กับ tag ไหนก็ต้อง select tag นั้นครับผม
ยังมี selector อีกมากมากครับ ที่ช่วยให้เราเลือกและกรองเอาเฉพาะ tag ที่เราต้องการได้
สำหรับ tag เรียกกันอีกอย่างว่า element ครับ
เอ่อจะเรียกไงดีเนี่ย -*- เอา element ละกันเท่ห์ดี
=======================================================
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jquery step by step</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=tis-620″ />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(”#id_of_button”).click(function(){
alert(”Ouch!, you kick me!!”);
});
});
</script>
</head>
<body>
<button id=”id_of_button”>try click me!</button>
</body>
</html>
=======================================================
