แปลง jQuery object เป็น DOM object

เนี่องจาก 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 โดยรวมถึงส่วนที่ไม่แสดงด้วย

บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 525 02 Feb 10 หมุน สลับ แบนเนอร์ในแนวนอน ด้วย jQuery อย่างง่าย อ่าน 465 07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 461 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 352 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 328 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 324 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 296 19 Feb 10 สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย อ่าน 294
จำนวนผู้เยี่ยมชม 85628 คน 2010 © Copyright ninenik.com. All rights reserved.