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

Bookmark and Share

เนี่องจาก 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

07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 1206 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 1190 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 1141 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 1115 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 1102 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 1089 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 1008 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 956 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 953 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 927 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 341
จำนวนผู้เยี่ยมชม 157929 คน 2010 © Copyright ninenik.com. All rights reserved.