เรามักจะได้ยินบ่อยๆ เกี่ยวกับ jQuery ว่าสามารถช่วยใช้งานทำเว็บไซต์ได้ แต่อาจจะไม่เข้าใจว่ามันใช้อย่างไรมีวิธีและขั้นตอนอย่างไร วันนี้ผมจะมาแนะนำว่า jQuery คืออะไร และใช้งานอย่างไรกันครับ
jQuery คืออะไร
jQuery คือ JavaScript Library ยอดนิยมตัวหนึ่งที่โปรแกรมเมอร์นำมาใช้พัฒนาเว็บไซต์ สามารถรองรับการทำงานทุกเบราเซอร์ โดยไลบารี่นี้มีวัตถุประสงค์ที่จะเอามาแก้ปัญหาการใช้งาน JavaScript ที่มีความยุ่งยากในการใช้งานให้สามารถใช้งานได้ง่ายขึ้น เช่น การรวบคำสั่งหลายๆ บรรทัดของ JavaScript ที่ซับซ้อนมาเป็นการใช้งานผ่าน jQuery เพียงแค่ 1 บรรทัด หรือ การเรียกใช้งานคำสั่งประเภท Ajax, DOM ให้ใช้งานได้ง่ายขึ้นเป็นต้น บริษัทใหญ่ๆ หลายบริษัททั่วโลกนำ JQuery ไปใช้งานในเว็บของเขา เช่น Google, Microsoft, IBM ทำให้ JQuery ถูกใช้งานได้อย่างกว้างขวาง
วิธีการเรียกใช้งาน jQuery
เราสามารถทำการเรียกใช้งาน jQuery ได้ 2 รูปแบบหลักๆ ได้แก่ การเรียกใช้งานไฟล์ jQuery โดยตรงโดยดาวน์โหลดไฟล์มาจาก jQuery.com และการเรียกใช้งานผ่านระบบ CDN
เราจะทำการเรียกใช้งาน jQuery โดยจะต้องทำการเรียกใช้งานผ่านแท็ก Script ในส่วนของ Head หรืออยู่ภายในแท็กของ Head เท่านั้น ดังตัวอย่างดังนี้
การดาวน์โหลดจาก jQuery.com และเรียกใช้งานโดยตรง
<head>
<script src=”jQuery-3.5.1.min.js”></script>
</head>การเรียกใช้งานผ่าน CDN
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js></script>
</head>วิธีการใช้งาน jQuery
เราจะเรียกใช้งาน jQuery ในรูปแบบ $(selector).action() โดยเครื่องหมาย $ เป็นการบ่งบอกถึงว่าเราจะเข้าใช้งาน jQuery แล้วนะ ส่วน selector จะเป็นองค์ประกอบของ HTML เช่น แท็ก HTML, ID, Class และในส่วนของ action() คือสิ่งที่อยากให้องค์ประกอบก่อนหน้าทำอะไรบางอย่าง ยกตัวอย่างเช่น
ส่วนของ HTML
<div id="test">Hello</div>ส่วนของ jQuery
$("#test").hide() เราจะเห็นได้ว่า คำสั่งของ jQuery จะทำการซ่อนข้อความหรือประโยคที่อยู่ภายในของไอดี ที่ชื่อว่า test โดยจะทำให้คำว่า Hello ถูกซ่อนครับ
jQuery เรียกใช้เมื่อใด
คำสั่งหรือวิธีการเรียก (Methods) นี้ เรามักจะเรียกเมื่อหน้าเว็บพร้อมใช้งาน ดังนั้นการเรียกใช้งานจึงจะต้องอยู่ภายในเหตุการณ์ที่หน้าเว็บพร้อมใช้งาน
$(document).ready(function() {
// เรียกใช้งาน jQuery ที่นี่
});
การเขียนในรูปแบบนี้ทำให้เราสามารถเพิ่มคำสั่งที่เกี่ยวกับ JavaScript ก่อนได้ด้วยและจะทำให้เราหลีกเลี่ยงการเกิดปัญหา การเรียกใช้งาน jQuery ก่อนเหตุการณ์ที่เราต้องการ เช่น ขนาดรูปถูกเรียกก่อนในขณะที่รูปภาพยังไม่แสดงผล
เรายังสามารถเรียกใช้งานได้โดยวิธีที่สั้นลง โดยใช้คำสั่งของ jQuery โดยตรง ได้แก่
$(function() {
// เรียกใช้งาน jQuery ที่นี่
});มาถึงตรงนี้แล้ว เรามาดูวิธีการเรียกใช้งานจริงกันดีกว่า
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});จากตัวอย่างด้านบน จะเห็นว่า เมื่อหน้าเว็บโหลดพร้อมแล้ว (Document ready) หากเราทำการกดปุ่มที่มีแท็ก HTML ชื่อว่า button ประโยคที่อยู่ในแท็ก p จะถูกซ่อนทันที
เราสามารถนำ jQuery มาใช้งานในรูปแบบสร้างเอฟเฟต์ให้กับเว็บไซต์ของเราได้ ไม่ว่าจะเป็นการซ่อนและแสดงผล การเฟดหรือค่อยๆ แสดงผลจากภาพจางมาเป็นชัดขึ้น การเลื่อนเข้ามาแบบสไลเดอร์ การทำอะนิเมชั่นต่างๆ เช่น เคลื่อนมาจากมุมบนขวา หรือบิดวัตถุ หรือการปรับขนาดของวัตถุที่สนใจ นอกจากนี้แล้ว jQuery ยังสามารถนำไปใช้กับการเพิ่ม ลบ ฟอร์ม หรือตรวจสอบข้อมูลใน HTML ได้ และสามารถจัดการในส่วนของ Classes ต่างๆ อีกด้วย
ในบางครั้ง เราสามารถใช้ jQuery ร่วมกับความสามารถเสริมอื่นๆ ที่ผู้พัฒนาได้นำ jQuery ไปรวมอยู่ด้วย เช่น หากเราต้องการใช้สไลเดอร์สวยๆ เราก็อาจจะเรียกใช้งาน Owl Carousel มาใช้ประกอบคู่กัน หรือถ้าอยากได้แบบเลย์เอาท์แบบ Grid Layout ก็สามารถใช้ Masonry Desandro ได้ครับ
น่าสนใจใช่ไหมครับกับการใช้งาน jQuery หากมีเวลาผมอาจจะลงลึกถึงเนื้อหาด้านในของ jQuery กันให้ฟังเพิ่มเติม สำหรับบทความนี้ก็ขอจบไว้เพียงเท่านี้นะครับ สวัสดีครับ..
