jQuery การใช้งาน

ด้วย jQuery คุณสามารถเลือก (ค้นหา หรือ query) องค์ประกอบ HTML และทำงานบนองค์ประกอบนั้น

ตัวอย่างสyntax ของ jQuery

$(this).hide()
แสดงฟังก์ชัน hide() ของ jQuery ซ่อนองค์ประกอบ HTML ปัจจุบัน
$("#test").hide()
แสดงฟังก์ชัน hide() ของ jQuery ซ่อนองค์ประกอบที่มี id="test"
$("p").hide()
แสดงฟังก์ชัน hide() ของ jQuery ซ่อนทุกองค์ประกอบที่เป็น <p>
$(".test").hide()
แสดงฟังก์ชัน hide() ของ jQuery ซ่อนทุกองค์ประกอบที่มี class="test"

jQuery การใช้งาน

สyntax ของ jQuery ทำการเลือกองค์ประกอบ HTML และสามารถทำงานบนองค์ประกอบนั้น

สyntax พื้นฐานคือ:$(selector).action()

  • สัญลักษณ์เงินดอลกำหนด jQuery
  • เลือกตัวอักษร (selector) "ค้นหา" และ "หา" องค์ประกอบ HTML
  • ฟังก์ชัน action() ของ jQuery ทำงานด้วยองค์ประกอบ

ตัวอย่าง

$(this).hide() - ซ่อนองค์ประกอบปัจจุบัน

$("p").hide() - ซ่อนทุกองค์ประกอบที่เป็น paragraph

$(".test").hide() - ซ่อนทุกองค์ประกอบที่มี class="test"

$("#test").hide() - ซ่อนทุกองค์ประกอบที่มี id="test"

คำแนะนำ:สyntax ที่ใช้โดย jQuery คือสัมพันธ์ของ XPath และ CSS selector syntax ในช่วงต่อไปของตัวเรียนนี้ คุณจะเรียนเกี่ยวกับ syntax ของ selector มากยิ่งขึ้น

ฟังก์ชันเอกสารเสร็จสมบูรณ์

คุณอาจจะสังเกตเห็นว่าทุกฟังก์ชัน jQuery ในตัวอย่างของเราตั้งอยู่ในฟังก์ชัน document ready:

$(document).ready(function(){
  // ฟังก์ชัน jQuery ได้มาที่นี่
});

นี่เพื่อป้องกันการทำงาน jQuery ในเอกสารก่อนที่จะโหลดเต็มทั้งหมด (เสร็จสมบูรณ์)

ถ้าทำงานฟังก์ชันก่อนที่เอกสารจะโหลดเต็มทั้งหมด การดำเนินการอาจล้มเหลว ตัวอย่างเฉพาะที่แสดงในต่อไปนี้:

  • พยายามซ่อนองค์ประกอบที่ไม่มีอยู่
  • ได้ขนาดของภาพที่ยังไม่ได้โหลดเต็มทั้งหมด