jQuery มีวิธีการมากมายที่ช่วยให้นักพัฒนาสร้างประสบการณ์เว็บแบบไดนามิกได้อย่างมีประสิทธิภาพ jQuery html() วิธีการแทนที่ HTML ทั้งหมดภายในองค์ประกอบที่เลือก สิ่งนี้มีประโยชน์หากคุณต้องการเปลี่ยนแปลงสิ่งที่ผู้ใช้เห็นแบบไดนามิกหลังจากโต้ตอบกับเพจ
ในคู่มือนี้ เราจะเรียนรู้เกี่ยวกับวิธีใช้ html() และไวยากรณ์ของมัน เราจะมาดูวิธีการทีละขั้นตอนในการใช้ html() . jQuery html() เป็นวิธีการพื้นฐานในไลบรารี jQuery และมักใช้ หลังจากเรียนรู้พื้นฐานแล้ว คุณก็พร้อมที่จะเริ่มฝึกการใช้ html() .
jQuery html() คืออะไร
jQuery html() ตั้งค่าเนื้อหา HTML ของแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน ควรใช้ความระมัดระวังในการจัดหาแบบสอบถามที่เฉพาะเจาะจงมากพอที่จะแทนที่ HTML ที่ต้องการเท่านั้น
เฉพาะเนื้อหาเท่านั้นที่เปลี่ยนด้วย html() . หากมีสไตล์ชีต เนื้อหาใหม่จะมีสไตล์เหมือนกับเนื้อหาก่อนหน้า เป็นที่น่าสังเกตว่า html() ใช้ได้กับเอกสาร HTML เท่านั้น ใช้กับ XML ไม่ได้
html() ไวยากรณ์ jQuery
จำได้ว่าเมธอด jQuery ถูกเรียกบนตัวเลือกก่อน ตัวเลือกอาจกว้างเท่ากับแท็ก
หรือเฉพาะเจาะจงเท่ากับ
html() และส่งผ่านสตริง HTML เป็นพารามิเตอร์ไปยัง html() . สำหรับคำอธิบายโดยละเอียดของตัวเลือก CSS โปรดดูคำแนะนำของเรา
html() ยอมรับสตริงตามตัวอักษรเป็นพารามิเตอร์หรือตัวแปรที่มีสตริง การส่งสตริงตามตัวอักษรของ "เนื้อหาใหม่" จะแสดงเหมือนกับการส่งตัวแปรที่อ้างอิงถึง "เนื้อหาใหม่"
สมมติว่าเรามี
<div class='main-content> <p class='paragraphOne'> Hello World </p> </div>
เราสามารถแทนที่แท็ก
ทั้งหมด:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
$('div.main-content').html('<p>New Content</p>')
โค้ดด้านบนแสดง HTML ใหม่เป็น:
<div class='main-content> <p>New Content </p> </div>
หากมีการจัดรูปแบบที่เกี่ยวข้องกับแท็ก
ดั้งเดิม แท็กนั้นจะไม่สามารถใช้งานกับเนื้อหาใหม่ได้อีกต่อไป เป็นไปได้ที่จะส่งผ่านสตริงอย่างง่ายเช่นกัน:
$('div.main-content').html('New Content')
HTML ของเราตอนนี้เป็นดังนี้:
<div class='main-content> New Content </div>
เราจะเห็นว่าเนื้อหาใหม่มีความแตกต่างกันบ้าง การส่งสตริงตามตัวอักษรเป็นวิธีที่ยอดเยี่ยมในการรักษาสไตล์ของเนื้อหาก่อนหน้า โปรดจำไว้ว่า ลิเทอรัลสตริงเป็นเพียงสตริงที่มีอักขระ หากเนื้อหาใหม่ต้องเป็นองค์ประกอบลูก การใช้สตริง HTML จะทำให้สำเร็จ
เมื่อกล่าวถึงไวยากรณ์พื้นฐานแล้ว มาดูตัวอย่างกัน
html() ตัวอย่าง jQuery
เราเห็นแล้วว่า html() แทนที่เนื้อหาภายในองค์ประกอบที่เลือกในตัวอย่าง "เนื้อหาใหม่" ด้านบนของเรา ซึ่งสามารถทำได้โดยส่งสตริงตามตัวอักษรหรือสตริง HTML เป็นพารามิเตอร์ มาดูตัวอย่างที่เรายังคงรักษาสไตล์ดั้งเดิมเอาไว้
<head>
<style>
.blue {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
<p class='blue'>
Hello
</p>
<p>
World
</p>
<p>
Goodbye
</p>
</div>
<script>
</script>
</body> เมื่อดูที่หน้า HTML เริ่มต้น เราจะเห็นเฉพาะคำว่า “สวัสดี” ที่มีสไตล์เป็นสีน้ำเงิน
ในตัวอย่างนี้ เราต้องการแทนที่คำว่า "สวัสดี" ด้วยเนื้อหาใหม่ แต่คงสไตล์ดั้งเดิมไว้ เพื่อให้บรรลุสิ่งนี้ เราเลือกย่อหน้าที่มีชื่อคลาสเป็นสีน้ำเงิน
$('p.blue').html("Hello AGAIN")
เราได้เลือกย่อหน้าที่เป็นของคลาสสีน้ำเงินและแทนที่ “สวัสดี” ด้วย “สวัสดีอีกครั้ง” ตั้งแต่ html() แทนที่เนื้อหาในชื่อองค์ประกอบ สีฟ้าจะยังคงอยู่
จะเป็นอย่างไรถ้าเราต้องการแทนที่ข้อความในย่อหน้าทั้งหมด หากเราเลือก
องค์ประกอบจะแทนที่ข้อความด้านบนด้วย "สวัสดีอีกครั้ง" สามอินสแตนซ์
$('p').html("Hello AGAIN")
ที่นี่เรากำลังเลือกแท็กย่อหน้าทั้งหมดในไฟล์ HTML และแทนที่เนื้อหาของแต่ละรายการด้วย "สวัสดีอีกครั้ง" เช่นเดียวกับตัวอย่างแรกของเรา สไตล์ดั้งเดิมจะแสดงผลเนื่องจากเรากำลังแทนที่เนื้อหาที่ห่อด้วยแท็กเหล่านั้น
อย่างที่เราคาดไว้ ไปขึ้นหนึ่งระดับในตัวเลือกของเราเป็น
$('div.main').html('<p class=blue>Main Div Content</p>') 
ภายใน div หลักของเรา เรามีองค์ประกอบสามย่อหน้า รู้จัก html() . อย่างไร ได้ผล เราสามารถอนุมานได้ว่าโค้ดด้านบนจะแทนที่แท็ก
สามแท็กด้วยแท็กที่ส่งผ่านเป็นพารามิเตอร์ อ่านคำแนะนำเกี่ยวกับการเรียนรู้ HTML ของเราให้ลึกซึ้งยิ่งขึ้นด้วยแนวคิดข้างต้น
ในโค้ดบรรทัดเดียว เราได้แทนที่องค์ประกอบย่อหน้าที่แตกต่างกันสามองค์ประกอบ และใช้สไตล์คลาสดั้งเดิมของเรา
บทสรุป
jQuery html() เป็นวิธีที่ใช้กันทั่วไปในการแทนที่เนื้อหาบนหน้า HTML เพื่อสร้างประสบการณ์แบบไดนามิก เพราะ html() แทนที่เนื้อหาที่อยู่ภายในองค์ประกอบ HTML สิ่งสำคัญคือต้องใส่ใจกับตัวเลือก jQuery และคลาสสไตล์ใดๆ ซึ่งจะป้องกันการเปลี่ยนแปลงรูปแบบที่ไม่ต้องการ
เราได้เรียนรู้ว่า jQuery คืออะไร ไวยากรณ์และตัวอย่างวิธีใช้งาน ใช้เวลาฝึกฝนและเรียนรู้วิธีที่ใช้กันอย่างแพร่หลายในตอนนี้
