jquery เบื้องต้น หัดใช้ Selector, Event, Effect

ขออนุญาตแปะไว้กันลืม jQuery เบื้องต้น เรียงตามความเข้าใจของผู้เขียน เพื่อสะดวกต่อการอ้างอิง เพราะกลับมาเขียนทีไร ต้องมานั่งทำความเข้าใจสักพักก่อนจะเริ่มเขียนได้

ดาวน์โหลดไฟล์ jquery-<version>.js จากเว็บไซต์ jquery.com เวอร์ชั่นล่าสุดขณะที่เขียน 1.10.2

เริ่มต้นขออ้างอิงตัวอย่างไฟล์จากเว็บ w3schools

<!doctype html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 $("p").click(function(){
  $(this).hide();
 });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

 

คำอธิบาย

  • $(document).ready   กำหนดว่าให้โหลดไฟล์เว็บหน้านี้ให้สมบูรณ์ก่อนค่อยเริ่มทำงาน
  • $(“p”)   เลือก HTML Element ที่จะจัดการ (jQuery Selector)
  • click()   เลือกเหตุการณ์ (jQuery Event) ที่เกิดขึ้นกับ Element นั้นๆ
  • hide()   ผลลัพธ์ (jQuery Effect)  ที่เกิดขึ้น

ทดลองใช้ browser เปิดหน้าเว็บเพจนี้ แล้วลองคลิกดู ข้อความภายใน <p> ที่ถูกคลิก (click) จะถูกซ่อนหรือหายไป (hide)

01-basic

 

jQuery Selector

ใน jQuery วิธีการเลือก HTML Element จะเหมือนกับการเลือกใน CSS คือ

เลือกตามชื่อแท็ก (Element Name) เช่นต้องการเลือก <p> ก็ระบุเป็น

$("p")

 

เลือกตาม id (#id)

$("#test")

 

เลือกตามชื่อ class (.class)

$(".test")

 

เลือก Element ปัจจุบัน (current) เช่นในตัวอย่าง

$(this)

 

jQuery Event

เลือกเหตุการณ์ที่เกิดขึ้นกับ Element ขึ้นอยู่กับ Element เช่น

Mouse Events

  • click()
  • dblclick()
  • mouseenter()
  • mouseleave()
  • hover()

Keyboard Events

  • keypress
  • keydown
  • keyup

Form Events

  • submit
  • change
  • focus
  • blur

 

jQuery Effect

ตัวอย่างผลลัพธ์ที่เกิดขึ้น

  • hide() สามารถระบุความเร็วได้เช่น hide(slow)
  • show()
  • toggle()

ตัวอย่างเพิ่มเติม http://www.w3schools.com/jquery/jquery_examples.asp

ข้อมูลอ้างอิง

Leave a Reply