บทนำ jQuery

jQuery คือ ห้องสมุด javaScript ซึ่งช่วยให้การเรียนรู้และใช้งาน javaScript มีความง่าย อีกทั้งยังลดการเขียนลงด้วย แต่ช่วยให้สามารถทำอะไรได้มากยิ่งขึ้น 

คุณสมบัติของ jQuery

  • การจัดการ HTML/DOM
  • การจัดการ CSS
  • จัดการ event ต่างๆของ HTML
  • เอฟเฟกต์และภาพเคลื่อนไหว
  • AJAX
  • ประโยชน์อื่นๆ เช่น ปลั๊กอินสำหรับงานเกือบทุกอย่าง

jQuery รับรู้ถึงปัญหาของเบราว์เซอร์ที่แตกต่างกันเป็นอย่างดี จึงได้มีการพัฒนาให้ jQuery สามารถทำงานได้เหมือนกันทุกเบราว์เซอร์หลักๆ ทั้งหมด

 

ในการใช้งาน jQuery สามารถทำได้หลายทาง เช่น

  1. เรียกใช้จาก Google CDN
  2. ดาวน์โหลดจากเว็บ jquery.com

 

ตัวอย่างที่ 1 การเรียกใช้งานจาก Google CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 

ตัวอย่างที่ 2 การอ้างอิงไฟล์ jQuery ที่ดาวน์โหลดมาใช้งาน

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

 

Syntax ไวยากรณ์พื้นฐาน

jQuery จะแบ่งออกเป็น 1) selector เป็นการเลือก/ค้นหา elment ที่ต้องการเข้าถึงหรือจัดการ และ 2) action การดำเนินการต่างๆ โดยมี syntax พื้นฐานเป็น $(“selector”).action()

ตัวอย่างเช่น 

  • $(“this”).hide(); หมายถึงซ่อน element ปัจจุบัน
  • $(“p”).hide(); หมายถึงซ่อน element <p> ทั้งหมด
  • $(“.test”).hide(); หมายถึงซ่อน element ทั้งหมดที่ class=”test”
  • $(“#test”).hide(); หมายถึงซ่อน element ทั้งหมดที่ id=”test”

 

เริ่มต้นใช้งาน jQuery ต้องเขียน

$(document).ready(function(){

// เขียนโค้ดในส่วนนี้

});

เพื่อเป็นการป้องกันไม่ให้โค้ดของ jquery ทำงานก่อนที่เอกสารจะโหลดเสร็จ