การจัดการ DOM
ก่อนหน้านี้ คุณคงเคยเห็นแล้ว ว่าเฟรมเวิร์ก JavaScript ช่วยให้รับองค์ประกอบเฉพาะได้ง่ายโดยใช้ตัวเลือกและการสำรวจเส้นทาง DOM อย่างไรก็ตาม ในการเปลี่ยนแปลงเนื้อหาและรูปลักษณ์ขององค์ประกอบเฉพาะบนหน้าเว็บ คุณจะต้องจัดการ DOM และใช้การเปลี่ยนแปลง การใช้ JavaScript ล้วนๆ จะเป็นงานที่หนักมาก แต่โชคดีที่เฟรมเวิร์ก JavaScript ส่วนใหญ่มีฟังก์ชันที่เป็นประโยชน์ซึ่งทำให้การดำเนินการนี้เป็นเรื่องง่าย
สมมติว่าคุณมีกล่องที่มีรหัส the-box
<div id="the-box">ข้อความไปที่นี่</div>
ใช้ jQuery เพื่อเปลี่ยนข้อความเป็น "ข้อความไปที่นี่" ซึ่งสามารถใช้งานได้ง่ายดังนี้:
$('#the-box').html('นี่คือข้อความใหม่!');
ในความเป็นจริง คุณสามารถใช้โค้ด HTML ในฟังก์ชันต่างๆ ได้ และเบราว์เซอร์จะแยกวิเคราะห์โค้ด ตัวอย่างเช่น:
$('#the-box').html('นี่คือข้อความ <strong>ใหม่</strong>!');
ในตัวอย่างนี้ เนื้อหาภายในองค์ประกอบ DIV มีลักษณะดังนี้:
<div id="the-box">นี่คือข้อความ <strong>ใหม่</strong>!'</div>
แน่นอนว่าในตัวอย่างนี้คุณต้องใช้อักขระพิเศษ เช่น มากกว่าหรือน้อยกว่า แทนที่จะระบุรหัสเอนทิตี HTML พิเศษ คุณสามารถใช้ฟังก์ชันข้อความของ jQuery แทนได้:
$('#the-box').text('300 >200');
รหัสหลังจากอัปเดตองค์ประกอบ div จะเป็นดังนี้:
<div id="the-box">300 > 200</div>
ในตัวอย่างข้างต้น เนื้อหาที่มีอยู่จะถูกแทนที่ด้วยเนื้อหาใหม่ จะทำอย่างไรถ้าคุณต้องการเพิ่มข้อมูลบางอย่างต่อท้ายข้อความ? โชคดีที่ jQuery มีฟังก์ชันผนวกเพื่อจุดประสงค์นี้
$('#the-box').append(' นี่คือข้อความ');
หลังจากดำเนินการข้างต้นกับ div ดั้งเดิมแล้ว เนื้อหาในองค์ประกอบ div จะมีลักษณะดังนี้:
<div id="the-box">ข้อความไปที่นี่ ข้อความไปที่นี่</div>
แทนที่จะต่อท้าย คุณสามารถเติมเนื้อหาไว้ข้างหน้า โดยแทรกก่อนเนื้อหาที่มีอยู่ แทนที่จะแทรกอยู่หลังเนื้อหา นอกจากนี้ jQuery ยังมีฟังก์ชันในการแทรกเนื้อหาภายในองค์ประกอบที่กำหนด ไม่ว่าจะก่อนหรือหลัง นอกจากนี้ยังมีฟังก์ชันแทนที่เนื้อหา ล้างเนื้อหา ลบองค์ประกอบ องค์ประกอบโคลน และอื่นๆ อีกมากมาย
นอกเหนือจากฟังก์ชันการจัดการ DOM แล้ว กรอบงาน JavaScript มักจะมีฟังก์ชันหลายอย่างเพื่อจัดการสไตล์และคลาสขององค์ประกอบ ตัวอย่างเช่น คุณมีตารางที่เน้นแถวเมื่อเมาส์เลื่อนผ่าน คุณสามารถสร้างคลาสพิเศษชื่อโฮเวอร์ซึ่งคุณสามารถเพิ่มลงในแถวได้แบบไดนามิก เมื่อใช้ YUI คุณสามารถใช้โค้ดต่อไปนี้เพื่อกำหนดว่าแถวมีชื่อคลาสโฮเวอร์หรือไม่ หากเป็นเช่นนั้น ก็จะถูกละเว้น
if(row.hasClass('hover')) row.removeClass('hover'); อย่างอื่น row.addClass('โฮเวอร์');
ในทำนองเดียวกัน กรอบงาน JavaScript ส่วนใหญ่มีฟังก์ชันในตัวสำหรับจัดการ CSS