jQuery เป็น javascript library ที่ใช้ปรับแต่งเอกสาร HTML ของเรา รวมทั้งการกระทำต่างๆ เช่นการคลิก การทำ animation และยังครอบคลุมถึง Ajax อีกด้วย ข้อดีของ jQuery นั้้นก็คือเพิ่มความน่าสนใจให้กับเว็บไซต์ ด้วยโค้ดที่ไม่ซับซ้อน 3 จุดเด่นที่ทางผู้พัฒนาได้นำมาเป็นจุดขายคือ
เพียงขนาดไฟล์แค่ 24KB(Minified and Gzipped)
รองรับ CSS 1-3 selectors and more!
แสดงผลได้ทุก Browser ไม่ว่าจะเป็น IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome
เริ่มต้นด้วยการดาวน์โหลดไฟล์ jQuery มาก่อน โดยสามารถดาวน์โหลดได้ที่เว็บไซต์อย่างเป็นทางการของ jQuery คือ http://www.jquery.com จะมีให้เลือกดาวน์โหลดอยู่ โดยไฟล์ที่ได้จากการดาวน์โหลดนั้นจะเป็นไฟล์นามสกุล .js
จากนั้นทำการเรียกไฟล์ที่โหลดมาได้โดยการใส่ tag <script></script> ในส่วน head ของไฟล์ html
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
หรือจะเรียกไฟลผ่าน url ซึ่งจะเป็นเวอร์ชั่นล่าสุดที่ทางเว็บไซต์ jQuery.com ปล่อยออกมาอย่างเป็นทางการได้โดย
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
jQuery มีความสามารถในการเลือก หรือเรียก elements ในส่วนต่างๆ ได้อย่างแม่นยำเพื่อให้สามารถนำมากระทำการต่างๆได้ด้วยการอ้างถึง ID เพื่อเรียกค่าของ attribute ต่างๆ
การเรียกใช้ jQuery ฟังก์ชั่นที่หลักที่ต้องเรียกใช้คือ jQuery() แต่สามารถเรียกให้สั้นลงได้โดยการเรียกใช้ $()
ในการเข้าถึง element ที่มีการอ้างด้วย ID นั้นมีรูปแบบการเรียกดังนี้ $(#id) โดยมีข้อจำกัดว่าชื่อของแต่ละ id นั้นจะต้องไม่ซ้ำกัน
<html> <head> <title>Select a paragraph</title> <script type="textjavascript" src="http://code.jquery.comjquerylatest.js"></script> <script type="textjavascript"></script> </head> <body> <h1>Select a paragraph</h1> <div> <p>This is paragraph 1.</p> <p>This is paragraph 2.</p> <p id="third">This is paragraph 3.</p> <p>This is paragraph 4.</p> </div> <form></form> </body> </html>
| Basic Selectors » |