แปลง jQuery object เป็น DOM object
08 December 2009เนี่องจาก jQuery object เป็นส่วนหนึ่ง DOM object แต่ไม่ใช่ DOM object. หากต้องการเรียกใช้งาน DOM Object จาก jQuery Object สามารถทำได้โดยการใช้ ฟังก์ชัน get() ดังตัวอย่างต่อไปนี้
โดยที่ หากมี Object เพียงแค่ตัวเดียว เช่น
<html> <body> <span></span> <div></div> </body> </html>
จากตัวอย่างโค้ตด้านบน จะมี แท็ก div แค่ตัวเดียว กรณ๊เป็น jQuery Object เราจะเรียกใช้ดังนี้
$("div")
กรณีเป็น DOM Object จะเรียกใช้ดังต่อไปนี้
document.getElementsByTagNamw("div")
แต่เรายังสามารถเรียกใช้ DOM Object จาก jQuery Object ได้ดังต่อไปนี้
$("div").get(0)
//หรือ
$("div")[0]
// เลข 0 หมายถึง div ตัวแรก โดยที่การกำหนดหมายเลขนั้นเป็นการเจาะจงว่าต้องการ
// เลือก Object ลำดับที่เท่าไหร่ โดยเริ่มต้นจาก 0
หาก Object นั้นมีมากกว่า 1 ตัว และไม่ต้องการเฉพาะเจาะจง หรือต้องการเลือก Object นั้นทั้งหมด
// สามารถใช้เป็น
$("div").get()
// ค่าที่ได้จะเป็น DOM Object ของแท็ก div ทั้งหมด
ประโยชน์ของการเรียกใช้งาน DOM Object จาก jQuery Object คือทำให้เราสามารถเรียกใช้งาน คุณสมบัติบางประการของ DOM Object ที่ไม่มีใน jQuery Object ได้ เข่น เราไม่สามารถเรียกใช้ คุณสมบัติ scrollHeight จาก jQuery Object ได้ จึงจำเป็นต้องเปลี่ยนเป็น DOM Object และเรียกใช้ คุณสมบัติดังกล่าวได้
ตัวอย่าง
$("textarea").get(0).scrollHeight;
// หาความสูงของ textarea โดยรวมถึงส่วนที่ไม่แสดงด้วย
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
29 Mar 09 ทบทวนการตัดข้อความด้วย PHP อ่าน 3690 28 Oct 08 การ hilight form ฟอร์มด้วย javascript อย่างง่าย อ่าน 3530 17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 8947 26 Oct 10 แนะนำ autocomplete ใน jQuery ui กับการประยุกต์ใช้งาน อ่าน 1962 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5336 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 12890 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17116 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4215 23 Mar 11 เทคนิค หน่วงเวลา กับ event keyup ด้วย jQuery อ่าน 1710 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 4645 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 4989 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 2822 28 Dec 10 ทบทวน ลำดับ การทำงาน keyboard events ของ input text ใน jQuery อ่าน 1821 06 May 10 สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย อ่าน 3992 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 3919 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2363 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 3966 25 Sep 08 Event ของ jquery แบบ Basic อ่าน 3772 03 Nov 08 การส่งข้อมูลแบบ POST ด้วย Ajax อ่าน 8299 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 5115