jquery

มาอัพเดทกันซักหน่อย มีลูกเล่นเกี่ยวกับช่องค้นหา (input text) ไม่รู้ว่าจะเรียกว่ายังไงให้เข้าใจกันง่ายๆ เอาเป็นช่องค้นหาก็แล้วกันครับ ปกติผู้ใช้ก็จะพิมพ์คำที่ต้องการค้นหา แล้วก็กด Enter ป๊าบ ก็เรียบร้อย แต่ถ้าเพิ่มคำค้นเป็นสองสามคำ ก็เคาะ spacebar เว้นวรรคไปแบบเรียบๆ เดี๋ยวเรามาเพิ่มลูกเล่นให้กับช่องค้นหาของเรานิดนึง ^^

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

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

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

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

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

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

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

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

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