jQuery:บทนำโดยย่อ
jQuery เป็นไลบรารี JavaScript ที่ช่วยให้นักพัฒนาจัดการ DOM เขียนตัวจัดการเหตุการณ์ ภาพเคลื่อนไหว และคำขอ AJAX ด้วยโค้ดเพียงไม่กี่บรรทัด สิ่งนี้เป็นไปได้ด้วยตัวเลือกและเมธอดเฉพาะของ jQuery API วิธีหนึ่งเหล่านี้คือ append() .
jQuery append() คืออะไร
append() เมธอดสามารถนำอาร์กิวเมนต์ "เนื้อหา" หนึ่งหรือหลายอาร์กิวเมนต์ (ซึ่งอาจเป็นสตริง HTML, ข้อความ, อาร์เรย์, องค์ประกอบ หรือ jQuery อื่นๆ) และแนบหรือ "ผนวก" กับส่วนท้ายขององค์ประกอบใดๆ หรือทั้งหมดที่ตรงกัน ตัวเลือก การใช้งานทั่วไปบางอย่างรวมถึงการเพิ่มรายการต่อท้ายรายการ (เช่น รายการ "สิ่งที่ต้องทำ" ใหม่ในรายการสิ่งที่ต้องทำ) หรือการแสดงเนื้อหาใหม่เมื่อคลิกปุ่ม ตอนนี้เรามาดูกันว่า append() . อย่างไร ทำงานร่วมกับโค้ดตัวอย่างบางส่วน
วิธีใช้ jQuery ต่อท้าย ()
จากตัวอย่างการแทรกรายการด้านบนลงใน to do list เราจะเห็นว่า append() เป็นอย่างไร ถูกเรียกบนตัวเลือกและแทรกเนื้อหาไปยังการเลือกที่ตรงกันทั้งหมด
เริ่มต้นด้วย HTML ของเราที่สร้างรายการสิ่งที่ต้องทำพื้นฐาน:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>To Do List</h2> <ol class="list1"> <li>Read Chapters 1 & 2 </li> <li>Meeting at 3:00pm</li> <li>Write about yesterday's reading</li> </ol> </body> </html>
สิ่งสำคัญที่ควรทราบคือให้รวมที่อยู่ใน jQuery API ไว้ใน <script> แท็กใน <head> ของหน้า HTML มิฉะนั้น เราจะไม่สามารถใช้ jQuery ในหน้า HTML ของเราได้
ตอนนี้ รายการสิ่งที่ต้องทำของเราแสดงผลได้อย่างสวยงาม!
เรารู้สึกมีประสิทธิผลในวันนี้ เรามาเพิ่มรายการต่อท้ายรายการกัน แล้วแผนอาหารค่ำล่ะ?
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
อ้างอิงเค้าโครง HTML ของเรา เราเห็นรายการที่เรียงลำดับ (<ol> ) มีคลาสของ list1, . นี่เป็นข่าวดีเพราะเราสามารถเลือกส่วนที่เลือกทั้งหมดได้โดยเพิ่ม <script> . อื่น แท็กที่ด้านล่างของ
<script>
$(document).ready( () => {
$(".list1").append("<li>Make dinner plans</li>")
})
</script>
ภายใน <script> แท็ก เรามีสัญลักษณ์ $ เหล่านี้คืออะไร? นี่คือตัวเลือก jQuery ที่ทรงพลัง
เราสามารถเลือกอะไรก็ได้ใน DOM ของเราโดยส่งผ่านองค์ประกอบ ชื่อคลาส หรือชื่อรหัสเพื่อตั้งชื่อบางส่วน ในกรณีนี้ เราได้เลือกอะไรก็ได้ที่มีคลาสเป็น list1, ซึ่งจะเลือกทั้ง <ol> องค์ประกอบ. (document)ข้างบนนี้ selector เลือกทั้งหน้าและเรียก ready() เมธอดเพื่อรอเรียกโค้ดบรรทัดถัดไปจนกว่าหน้าจะโหลดเต็ม ซึ่งช่วยให้โค้ดของเราทำงานตามลำดับ
ตอนนี้ ภายใน ready() . ของเรา ฟังก์ชันเรียกกลับ เราได้เลือกองค์ประกอบทั้งหมดที่มีคลาส list1. ในกรณีนี้ จะเป็นการเลือก <ol> . ของเรา และใส่ <li> ส่งผ่านไปยัง append() อยู่เหนือส่วนปิดของเรา </ol> . ดังนั้น หลังจากที่โหลดเพจของเราแล้ว Make dinner plans รายการจะถูกผนวกเข้ากับรายการสิ่งที่ต้องทำของเรา:
มหัศจรรย์! ทีนี้มาดูตัวอย่างอื่นกัน คราวนี้มาแสดงเนื้อหาเพิ่มเติมเมื่อคลิกปุ่ม
jQuery append():ตัวอย่างในโลกแห่งความเป็นจริง
สมมติว่าเรามีปุ่มบนหน้าเว็บของเรา และเราต้องการแสดงเนื้อหาใหม่เมื่อมีการคลิกปุ่ม มันจะมีประสิทธิภาพและน่าพอใจมากขึ้นสำหรับผู้ใช้ของเราหากเราแสดงเนื้อหาใหม่โดยไม่ต้องรีเฟรชหน้าหรือเปลี่ยนเส้นทาง
นี่คือพลังและความสง่างามของ jQuery :เราสามารถแสดงเนื้อหาใหม่โดยไม่ต้องรีเฟรชหรือเปลี่ยนเส้นทางเมื่อคลิกปุ่ม
รับ HTML ฐานนี้:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="content"> <p>Hello World!</p> </div> <button id="btn-main">Click Me!</button> </body> </html>
ค่อนข้างคล้ายกับที่เราเริ่มทำรายการยกเว้นว่าเรามีปุ่ม:
ลองใช้สิ่งที่เราได้เรียนรู้เกี่ยวกับ jQuery เพื่อผนวกเนื้อหาเพิ่มเติมภายใต้ "สวัสดีชาวโลก!" เมื่อคลิกปุ่มแล้ว
<script>
$(document).ready( () => {
$("#main-btn").click( () => {
$("p").append("<b>Goodbye</b>")
})
})
</script>
อีกครั้ง เราได้รวมแท็ก
