IMOOH.COM

บทความที่เกี่ยวข้องกับ: jquery

เปลี่ยน URL ไม่ต้องรีเฟรส (refresh) เบราว์เซอร์ (browser) พร้อมโหลดหน้าเว็บด้วย Ajax

วิธีเปลี่ยน URL โดยที่ไม่ต้องรีเฟรสเบราว์เซอร์เป็นอีกลูกเล่นหนึ่งที่กำลังเป็นที่นิยมของเว็บไซต์จำนวนมากในปัจจุบัน ซึ่งใช้ร่วมกับ Ajax ที่สามารถอัพเดทเนื้อหาของหน้าเว็บโดยที่ไม่ต้องรีเฟรสเบราร์เซอร์ ทำให้เว็บของเราแสดงเนื้อหาให้กับผู้ใช้ได้เร็วขึ้น เพราะโหลดเฉพาะเนื้อหาที่มีการอัพเดทเท่านั้น (ส่วน header, sidebar และ footer ไม่จำเป็นต้องโหลดใหม่) แถมยังทำให้ URL ที่แสดงเปลี่ยนไปเป็นลิงค์ที่ผู้ใช้คลิกได้อีกด้วย แหล่มมั๊ยล่ะ ^^

แนะนำฟังก์ชัน jQuery.inArray() ค้นหาค่าที่ต้องการใน array

ฟังก์ชัน inArray() เป็นอีกหนึ่งฟังก์ชันที่น่าใช้ใน jQuery ซึ่งจะได้ค่าของ index ของ array ที่เก็บค่าที่เราส่งเข้าไปค้นหา ถ้ามีนะครับ แต่ถ้าไม่มีค่าที่เราค้นหาใน array ก็จะได้ค่าเป็น -1 แทน รูปแบบการใช้งานก็ง่ายๆ ครับ

การใช้งานฟังก์ชัน .on() ของ jQuery

ฟังก์ชัน .on() ได้ถูกเพิ่มเข้ามาใน jQuery เวอร์ชัน 1.7 ซึ่งฟังก์ชัน .on() ใช้สำหรับผูก (attach) event handler function เข้ากับ element ที่เลือกจาก selector และยังสามารถผูกเข้าได้มากกว่าหนึ่ง event ด้วยนะครับ

แนะนำฟังก์ชัน trigger() ของ jQuery

ฟังก์ชัน .trigger() ของ jQuery น่าจะเป็นอีกหนึ่งฟังก์ชันที่หลายๆ คนกำลังตามหาอยู่ก็ได้ครับ เพราะเจ้า trigger สามารถสั่งให้ฟังก์ชันที่ถูกกำหนดให้ event ต่างๆ (event handler) ของ element ทำงาน โดยที่ผู้ใช้ไม่จำเป็นต้องสั่งหรือทำอะไร การจัดการ event ของ jQuery จะครอบ event ของบราวเซอร์ (browser) ไว้อีกที

ปรับ selectors เพื่อประสิทธิภาพในการใช้งาน jQuery

selectors ใน jQuery ถึงแม้ว่าจะเป็นจุดเล็กๆ น้อยๆ แต่ก็ปฏิเสธไม่ได้ว่าเป็นสิ่งที่เราใช้บ่อยที่สุด เพราะเราต้องมีการเลือก element/s ก่อนที่จะนำไปทำอย่างอื่นต่อ ดังนั้น หากเราให้ความสำคัญและปรับแก้ให้มันมีประสิทธิภาพตามที่มันควรจะเป็น ก็จะเป็นการเพิ่มประสิทธิภาพให้กับเว็บไซต์ของเราไปด้วย

วิธีตรวจสอบ element ว่ามีอยู่รึป่าวด้วย jQuery

jQuery จะมี .length ซึ่งเป็นหนึ่ง property ของ jQuery collection ที่จะเก็บค่าของจำนวนของ element ที่ตรงกับ selector เช่น “#myid”, “.myclass” ที่เราส่งเข้าไปในฟังก์ชันของ jQuery การใช้งานเพื่อตรวจสอบว่ามี element ตามที่เราระบุไว้ใน selector หรือไม่ก็สามารถใช้ได้ดังนี้ครับ

ใช้ jQuery ในการโหลด iframe หลังจากที่หน้าเว็บโหลดเสร็จแล้ว

อ่านหัวข้อแล้วอาจจะงงนิดหน่อย (หรืออาจจะไม่หน่อยก็ได้ ฮ่าๆ) เทคนิคนี้อาจจะไม่จำเป็นต้องใช้กับ iframe ก็ได้ครับ เอาไปใช้กับรูปก็ได้ครับ ซึ่งถ้าใช้เทคนิคนี้จะทำให้หน้าเว็บของเราดูโหลดเร็วขึ้น แต่จะมากหรือน้อยก็ขึ้นอยู่กับ เนื้อหาที่เราโหลดใน iframe หรือขนาดของรูปด้วยนะครับ

ทำความรู้จักกับ Deferreds

Deferreds เรียกได้ว่าเป็นเทคนิคที่ใช้จัดการกับการทำงานแบบ asynchronous ที่ใช้เวลานานๆ กว่าจะทำงานเสร็จค่อยส่งผลกลับมา เปลี่ยนเป็นส่ง deferred object กลับมาทันที จากนั้นก็ค่อยนำเอา deferred object ไปผูกฟังก์ชันที่ต้องการให้ทำต่อหรือเรียกว่า callback function ซิ่ง callback จะถูกเรียกใช้งานทันทีหลังจากที่ผลจาก asynchronous ส่งกลับมา

แนะนำ Lazy Load – jQuery’s Plugin

Lazy Load เป็น plugin ของ jQuery ซึ่งจะหน่วงการโหลดรูปที่อยู่ในหน้าเว็บที่มีเนื้อหาเยอะๆ ยาวๆ รูปที่ผู้ใช้งานเว็บจะยังไม่ถูกโหลดจนกระทั่งเลื่อน scroll ลงไปถึงรูปจึงจะถูกโหลดจากเซิฟเวอร์ การใช้ Lazy Load บนเว็บไซต์ที่มีเนื้อหาขอหน้าเว็บเยอะๆ จะช่วยให้หน้าเว็บนั้นๆ โหลดเร็วขึ้น เพราะบราวเซอร์จะโหลดเฉพาะรูปที่กำลังแสดงให้ผู้ใช้งานเว็บดูอยู่เท่านั้น

แนะนำ plugin ของ jQuery จัดการตัวเลขด้วย autoNumeric

autoNumeric เป็น plugin ของ jQuery ที่ใช้จัดการรูปแบบการแสดงผลของค่าเงินและตัวเลขที่เรากรอกผ่าน text input ซึ่งถือได้ว่าเป็น plugin ที่พูดได้ว่าเราจำเป็นต้องใช้เลยทีเดียว หากโปรเจ็คที่กำลังทำอยู่มีการจัดการตัวเลขหรือเรื่องเงินๆ ทองๆ ครับ ^^

โดยเจ้า autoNumeric ก็มีวิธีการใช้งานที่ง่ายด้วย โดยก่อนอื่นจะต้องดาวน์โหลด autoNumeric ก่อนนะครับ โดยสามารถเข้าไปดาวน์โหลดได้ที่ ดาวน์โหลด autoNumeric