Posts Tagged ‘jQuery tutorial’
จัดการข้อมูลในฟอร์มด้วย .val()
คำสั่ง val() นี่ถือว่าเป็นคำสั่งเด็ดดวงเลยก็ว่าได้ เพราะเราคือผู้ทำเว็บแอพพลิเคชั่น ย่อมหลีกหนีไม่พ้น เรื่องตรวจสอบฟอร์มว่าป้อนไม่ป้อน ติ๊กไม่ติ๊ก บังคับให้ต้องป้อนข้อมูลหรือไม่ เป็นต้น ถ้าเทียบกับ javascript เดิม คำสั่งนี้จะเทียบได้กับ
document.form1.textbox_name.value
ย๊าวยาว…
คำสั่ง val() นี้คำสั่งเดียว สามารถใช้ได้ทั้ง ดึงค่าและกำหนดค่า เรามาดูรายละเอียดกันครับ ว่าใช้งานอย่างไร
val()
parameter : none
คำสั่งนี้ใช้สำหรับดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox เป็นต้น
ตัวอย่างการใช้งาน
คำสั่ง clone() ของ jquery
clone(copyHandlers)
copyHandlers : (true|false) เป็นเครื่องหมายบอกว่า ให้โคลน event ไปด้วยหรือไม่ ถ้าเป็น true ก็จะโคลนนิ่ง event ไปด้วย ถ้าเป็น false จะโคลนเฉพาะอีลิเม้นท์ ไม่โคลน event ของอีลิเม้นท์ไป
return : selector
คำสั่งนี้ใช้สำหรับโคลนนิ่งอีลิเม้นท์พร้อมกับสิ่งที่อยู่ภายในอีลิเม้นท์นั้นทั้งหมด คำสั่งนี้ถ้าใช้มันเดี่ยวๆจะไม่เกิดอะไรขึ้นเลย มันแค่โคลนเก็บไว้ในหน่วยความจำเท่านั้น หรือถ้าท่านใช้ตัวแปรเข้าไปรับค่า มันก็เก็บไว้ในตัวแปรเท่านั้น ดูนี่
$('p').clone(false);
var tag_p = $('p').clone(false);2 คำสั่งด้านบนไม่เกิดผลอะไรขึ้นมาบนเพจเลย ท่านจะต้องนำสิ่งที่ได้จากคำสั่งนี้ไปทำอย่างอื่นต่อ เช่น โคลนนิ่งมาแล้วให้เพิ่มเข้าไปในฟอร์ม เป็นต้น
ตัวอย่างการใช้งาน
คำสั่ง empty() ของ jquery
empty()
parameter : none
คำสั่งนี้ใช้สำหรับลบเนื้อหาที่อยู่ภายในอีลิเม้นท์ทิ้ง
ตัวอย่างการใช้งาน
Moving Boxes
เดี๋ยวนี้ตัวปลั๊กอินที่ใช้สำหรับแสดงภาพของ jQuery มีให้เลือกเยอะแยะมากมาย เรียกได้ว่าหามาใช้กันไม่หมดไม่สิ้น วันนี้ผมก็มีมานำเสนออีกตัวหนึ่ง เห็นว่าน่าสนใจครับ ดูภาพก่อนเลยว่า หน้าตามันเป็นยังไง
ถ้าท่านดูแล้วชอบ อยากนำไปใช้ในเว็บบ้าง ตามมาเลยครับ ผมจะนำเสนอวิธีการใช้งาน
คำสั่ง remove() ของ jquery
มีบางครั้งที่เราต้องการลบอีลิเม้นบางตัวบนเพจทิ้ง jquery ได้เตรียมคำสั่งในการทำอย่างนี้ให้เราแล้ว
remove()
parameter : none
คำสั่งนี้ใช้สำหรับลบอีลิเม้นท์ที่อยู่บนเพจทิ้งไป
ตัวอย่างการใช้งาน