jQuery คืออะไร

jQuery

Created At : 2023-09-01 04:01

Views 👀 :

ตัวอย่าง โค้ด jQuery hello world

jQuery เป็นไลบรารี JavaScript ยอดนิยมที่ช่วยให้นักพัฒนาเว็บสามารถเขียนโค้ด JavaScript ได้ง่ายขึ้น โดย jQuery มีฟังก์ชันและคุณสมบัติต่างๆ มากมายที่ช่วยให้นักพัฒนาสามารถทำงานกับ DOM (Document Object Model) ของ HTML, จัดการเหตุการณ์ (event handling) และสร้างเอฟเฟกต์ต่างๆ ได้อย่างง่ายดาย

jQuery ถูกพัฒนาขึ้นโดย John Resig ในปี 2549 และได้รับความนิยมอย่างรวดเร็ว โดยในปัจจุบัน jQuery เป็นหนึ่งในไลบรารี JavaScript ที่ได้รับความนิยมมากที่สุดในโลก

คุณสมบัติหลักของ jQuery ได้แก่:

ช่วยให้ทำงานกับ DOM ของ HTML ได้ง่ายขึ้น
ช่วยให้จัดการเหตุการณ์ (event handling) ได้ง่ายขึ้น
ช่วยให้สร้างเอฟเฟกต์ต่างๆ ได้ง่ายขึ้น
มีฟังก์ชันและคุณสมบัติต่างๆ มากมายที่ช่วยให้นักพัฒนาสามารถทำงานกับ JavaScript ได้ง่ายขึ้น

jQuery สามารถใช้ได้กับเว็บไซต์ทุกประเภท ไม่ว่าจะเป็นเว็บไซต์ขนาดเล็กหรือขนาดใหญ่ เว็บไซต์ส่วนบุคคลหรือเว็บไซต์องค์กร

ตัวอย่างการใช้งาน jQuery ได้แก่:

การซ่อนและแสดงผลองค์ประกอบ HTML
การย้ายและจัดตำแหน่งองค์ประกอบ HTML
การเติมข้อความหรือข้อมูลลงในองค์ประกอบ HTML
การเรียกใช้ฟังก์ชันเมื่อผู้ใช้ทำบางอย่างกับองค์ประกอบ HTML
การสร้างเอฟเฟกต์ต่างๆ เช่น การเลื่อน การซูม การปรากฏและหายไปขององค์ประกอบ HTML

jQuery เป็นไลบรารี JavaScript ที่มีประโยชน์อย่างมากสำหรับนักพัฒนาเว็บ jQuery ช่วยทำให้การเขียนโค้ด JavaScript ง่ายขึ้นและมีประสิทธิภาพยิ่งขึ้น

ตัวอย่าง โค้ด jQuery hello world

ตัวอย่างโค้ด jQuery hello world ง่ายๆ ก็คือการใช้ jQuery แสดงข้อความ “Hello World!” บนหน้าเว็บ โดยโค้ดมีดังนี้

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <script>
    $(document).ready(function() {
      $("body").append("<p>Hello World!</p>");
    });
  </script>
</body>
</html>

โค้ดนี้ประกอบไปด้วยส่วนต่างๆ ดังนี้

ส่วนหัว (head) ของหน้าเว็บ ซึ่งจะระบุชื่อหน้าเว็บและลิงค์ไปยังไฟล์ jQuery
ส่วนเนื้อหา (body) ของหน้าเว็บ ซึ่งจะแสดงข้อความ “Hello World!”
ส่วนโค้ด JavaScript ซึ่งจะเรียกใช้ฟังก์ชัน $() เพื่อค้นหาองค์ประกอบ HTML ที่มีคลาส “body” จากนั้นเรียกใช้ฟังก์ชัน append() เพื่อเพิ่มข้อความ “Hello World!” ลงในองค์ประกอบนั้น

เมื่อเรียกใช้โค้ดนี้ ผลลัพธ์ที่ได้จะเป็นดังนี้

1	Hello World!

ตัวอย่างโค้ด jQuery hello world นี้เป็นเพียงตัวอย่างง่ายๆ เพื่อแสดงวิธีการใช้งาน jQuery เบื้องต้นเท่านั้น ยังมีตัวอย่างการใช้งาน jQuery อีกมากมายที่นักพัฒนาเว็บสามารถเรียนรู้เพิ่มเติมได้