บทความนี้เป็นบทความที่แนะนำให้รู้จักกับ jQuery ว่ามันคืออะไร? มีองค์ประกอบหลักอะไรบ้าง? พร้อมทั้งยกตัวอย่างแบบง่ายๆเพื่อให้เห็นภาพการนำไปใช้งานจริง และเป็นประโยชน์ต่อการศึกษาในรายละเอียดในลำดับต่อไป

jQuery คืออะไร?

jQuery คือ JavaScript Library ซึ่งถูกออกแบบมาเพื่อให้การเขียน JavaScript นั้นง่ายขึ้น แล้วง่ายขึ้นอย่างไร? และ JavaScript เดิมๆนั้นยากตรงไหน? อันที่จริงแล้วตัวภาษา JavaScript นั้นไม่ได้ยากหรือยุ่งยากแต่อย่างใด หากแต่การใช้ JavaScript เพื่อประยุกต์กับงานเว็บ (Client-side JavaScript) นั้นสิที่ยุ่งยาก อาทิเช่น ความไม่เข้ากันของเว็บเบราว์เซอร์แต่ละค่าย, DOM API เป็นต้น jQuery จึงถือกำเนิดมาโดยเตรียมฟังก์ชันและออบเจกต์ต่างๆที่จำเป็นไว้ให้ในรูปของ Library ดังนั้นโค้ดที่เราเคยต้องเขียนด้วย JavaScript หลายๆบรรทัดก็อาจเขียนได้สั้นลงเหลือเพียงแค่บรรทัดเดียวเท่านั้น !!!

jQuery นั้นถูกริเริ่มและพัฒนาโดย John Resig และได้เปิดตัวอย่างเป็นทางการในเดือนมกราคม ปีค.ศ. 2006 โดยเป็นโครงการแบบโอเพ่นซอร์ส (MIT หรือ GNU GPL) jQuery เป็น JavaScript Library ที่เป็นที่นิยมมากที่สุดตัวหนึ่ง แล้วทำไมต้องเป็น jQuery ในเมื่อมี JavaScript Libraries หรือ Toolkits อื่นๆอีกมากมาย อาทิเช่น Dojo, Prototype, Yui เป็นต้น เหตุผลที่ jQuery เป็นที่นิยมอย่างมากคงหนีไม่พ้นความง่ายของมัน

ฟีเจอร์หลักของ jQuery

นอกจากความง่ายแล้ว jQuery ยังประกอบไปด้วยฟีเจอร์ต่างๆมากมาย ซึ่งสามารถจัดรวมเป็นกลุ่มหรือหมวดหมู่ได้ดังนี้

• HTML and CSS Selection
  • ส่วนนี้ถือได้ว่าเป็นฟีเจอร์หลักของ jQuery เลย คือฟีเจอร์ที่เกี่ยวข้องกับการเข้าถึง Elements และ CSS หากจะเปรียบเทียบกับการเขียน JavaScript เองโดยตรง มันก็คือ DOM API นั่นเอง การใช้ jQuery จะทำให้เราสามารถเข้าถึง Elements และ CSS ต่างๆได้ง่ายขึ้น เคยมีคนกล่าวไว้ว่า นี่คือสิ่งที่ควรมีใน Client-side JavaScript แทนที่มันจะเป็น DOM API (อันที่จริงแล้วชื่อ jQuery ก็มาจากฟีเจอร์นี้ คือเกิดมาเพื่อให้การ Query Elements ทำได้ง่ายขึ้น)
• HTML and CSS Manipulation
  • ไม่เพียงแต่เราต้องการเข้าถึง Elements ต่างๆเท่านั้น หากแต่เราต้องการดัดแปลงแก้ไขเพิ่มลดมันด้วย และฟีเจอร์ในส่วนนี้ก็รองรับความต้องการนั้น อันที่จริงแล้วฟีเจอร์นี้กับฟีเจอร์ที่ผ่านมาก็เรียกได้ว่าเกี่ยวเนื่องกัน แต่เนื่องจากรายละเอียดที่ค่อนข้างเยอะ ผมจึงแยกมันออกจากกันเพื่อความสะดวกในการไล่เรียงศึกษาในลำดับถัดๆไป
• Events
  • เรื่องของ Events นี้ก็เป็นอะไรที่น่าปวดหัวใน JavaScript เพราะความไม่เข้ากันของเว็บเบราว์เซอร์ แต่ปัญหานี้จะลดลงหรือหมดไปเมื่อเราใช้ jQuery เพราะมันจะตรวจสอบเรื่องชนิดของเว็บเบราเซอร์ให้เราโดยอัตโนมัติ
• Visual Effects and Animation
  • Visual Effects และ Animation ก็เป็นเทคนิคอันหนึ่งที่กำลังได้รับความนิยมในการทำเว็บในปัจจุบัน หากคิดภาพไม่ออกก็ให้นึกถึงการคลิกดูรูปภาพที่ภาพนั้นจะค่อยปรากฏขึ้นมา และเมื่อปิดรูปภาพรูปภาพนั้นก็จะค่อยจางหายไป (นี่แหละที่เค้าเรียกกันว่า Fade-in และ Fade-out) เป็นต้น และ jQuery ก็ได้เตรียมฟังก์ชันต่างๆเพื่อรองรับสิ่งเหล่านี้ไว้ให้แล้ว
• Utility Functions
  • Utility Functions ชื่อก็บอกอยู่แล้วว่าเป็นพวกฟังก์ชันพื้นฐานสามัญเรียกใช้ได้ตามต้องการ
• AJAX
  • AJAX ก็เป็นอีกหนึ่งรูปแบบของการเขียนเว็บแอพพลิเคชันในปัจจุบัน ซึ่ง jQuery ก็ได้ทำให้การเขียน AJAX นั้นง่ายขึ้นกว่าเดิม
• User Interface (UI)
  • UI หรือที่เรามักเรียกกันในหมู่ JavaScript Developers ว่า Widgets มันก็คือ Controls ต่างๆที่ควรมีหรืออยากให้มี แต่มันไม่มีใน HTML นั่นเอง อาทิเช่น Tab, Menu, Tree, Calendar เป็นต้น jQuery ก็ได้เตรียมไว้ให้แล้วเช่นกัน โดยแยกออกเป็นอีกโครงการย่อย (http://jqueryui.com) แต่ Widgets มาตราฐานของ jQuery อาจมีน้อยสักนิดเมื่อเปรียบเทียบกับ Toolkits อื่นๆ แต่เราสามารถหามาใช้ได้ในรูปของ Plug-in

ในบทความนี้ผมจะแสดงตัวอย่างและแนะนำให้รู้จักกับบางส่วนของ HTML and CSS Selection, HTML and CSS Manipulation และ Visual Effects and Animations ซึ่งถือได้ว่าเป็นฟีเจอร์เด่นของ jQuery