Post archive
Tag: jQuery tutorial
-
จัดการข้อมูลในฟอร์มด้วย .val()
คำสั่ง val() นี่ถือว่าเป็นคำสั่งเด็ดดวงเลยก็ว่าได้ เพราะเราคือผู้ทำเว็บแอพพลิเคชั่น ย่อมหลีกหนีไม่พ้น เรื่องตรวจสอบฟอร์มว่าป้อนไม่ป้อน ติ๊กไม่ติ๊ก บังคับให้ต้องป้อนข้อมูลหรือไม่ เป็นต้น ถ้าเทียบกับ javascript เดิม คำสั่งนี้จะเทียบได้กับ document.form1.textbox_name.valuedocument.form1.textbox_name.value ย๊าวยาว… คำสั่ง val() นี้คำสั่งเดียว สามารถใช้ได้ทั้ง ดึงค่าและกำหนดค่า เรามาดูรายละเอียดกันครับ ว่าใช้งานอย่างไร val() parameter : none คำสั่งนี้ใช้สำหรับดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox เป็นต้น ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง clone() ของ jquery
clone(copyHandlers) copyHandlers : (true|false) เป็นเครื่องหมายบอกว่า ให้โคลน event ไปด้วยหรือไม่ ถ้าเป็น true ก็จะโคลนนิ่ง event ไปด้วย ถ้าเป็น false จะโคลนเฉพาะอีลิเม้นท์ ไม่โคลน event ของอีลิเม้นท์ไป return : selector คำสั่งนี้ใช้สำหรับโคลนนิ่งอีลิเม้นท์พร้อมกับสิ่งที่อยู่ภายในอีลิเม้นท์นั้นทั้งหมด คำสั่งนี้ถ้าใช้มันเดี่ยวๆจะไม่เกิดอะไรขึ้นเลย มันแค่โคลนเก็บไว้ในหน่วยความจำเท่านั้น หรือถ้าท่านใช้ตัวแปรเข้าไปรับค่า มันก็เก็บไว้ในตัวแปรเท่านั้น ดูนี่ $(‘p’).clone(false); var tag_p = $(‘p’).clone(false);$(‘p’).clone(false); var tag_p = $(‘p’).clone(false); 2 คำสั่งด้านบนไม่เกิดผลอะไรขึ้นมาบนเพจเลย ท่านจะต้องนำสิ่งที่ได้จากคำสั่งนี้ไปทำอย่างอื่นต่อ เช่น โคลนนิ่งมาแล้วให้เพิ่มเข้าไปในฟอร์ม เป็นต้น ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง empty() ของ jquery
empty() parameter : none คำสั่งนี้ใช้สำหรับลบเนื้อหาที่อยู่ภายในอีลิเม้นท์ทิ้ง ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง remove() ของ jquery
มีบางครั้งที่เราต้องการลบอีลิเม้นบางตัวบนเพจทิ้ง jquery ได้เตรียมคำสั่งในการทำอย่างนี้ให้เราแล้ว remove() parameter : none คำสั่งนี้ใช้สำหรับลบอีลิเม้นท์ที่อยู่บนเพจทิ้งไป ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง wrapInner() ของ jquery
wrapInner(wrapper) wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “” ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อมเนื้อหาที่อยู่ภายใน selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม>เนื้อหาที่อยู่ภายใน selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปล้อมแทน ดูภาพประกอบ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง wrapAll() ของ jquery
คำสั่งนี้จะทำหน้าที่เหมือนกันกับคำสั่ง wrap() จะต่างกันก็ตรงที่ว่า คำสั่ง wrap() นั้นจะ wrap อีลิเม้นท์ทุกๆตัวที่เจอ แต่ wrapAll() จะ wrap แค่ครั้งเดียวเท่านั้น ถ้า selector อยู่กันอย่างกระจัดกระจายบนเพจ มันจะย้ายทุกตัวมาอยู่ติดกันแล้ว wrap ทั้งหมด ทีเดียว wrapAll(wrapper) wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “<i></i>” ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อม selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปแทนที่ selector ที่เรียกใช้ ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง wrap() ของ jquery
คำว่า wrap ในภาษาอังกฤษ แปลว่า ห้อมล้อม หรือล้อม คำสั่ง wrap() นี้ก็เช่นกัน มันจะเอาพารามิเตอร์ซึ่งเป็นเท็ก html เปิด และ ปิด ไปล้อมเป้าหมาย ดู html นี้ <em><strong>content</strong></em><em><strong>content</strong></em> จากด้านบน เรากล่าวได้ว่า แท็ก <em> wrap แท็ก <strong> อยู่ wrap(wrapper) wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “<i></i>” ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อม selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector […]
READ MORE -
คำสั่ง insertAfter() ของ jquery
ทำงานเหมือนกันเป๊ะๆ กับคำสั่ง after() เพราะฉะนั้น ผมจะขอยกให้ดูเฉพาะตัวอย่างการใช้งาน ส่วนคำอธิบายรายละเอียด ให้อ่านจาก after() ตัวอย่างการใช้งาน insertAfter() Live Demo
READ MORE -
คำสั่ง after() ของ jquery
คำสั่งนี้จะำทำงานตรงกันข้ามกับคำสั่ง before() after(content) content : (string|selector) คำสั่งนี้จะทำหน้าที่เพิ่ม content เข้าไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งเป็น สองกรณี คือ ถ้าส่ง string เข้าไปในฟังก์ชั่น จะเป็นการนำ string นั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น กรณีที่ 2 ถ้าส่ง selector เข้าไปในฟังก์ชั่น จะเป็นการย้าย selector ตัวนั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น ตัวอย่างการใช้งาน Live Demo
READ MORE
