close

การจัดการ DOM ด้วย jQuery- เทคนิคและตัวอย่าง

การจัดการ DOM ด้วย jQuery ช่วยให้คุณสามารถแก้ไข เพิ่ม ลบ หรือโต้ตอบกับข้อมูลบนหน้าเว็บโดยกำหนดเป้าหมายโครงสร้าง DOM jQuery มีวิธีการและฟังก์ชันที่สะดวกในการทำงานการจัดการ DOM

นี่คือคำอธิบายสำหรับแต่ละส่วนพร้อมกับตัวอย่างที่เฉพาะเจาะจง:

 

การเลือกองค์ประกอบ

  • $("p"): เลือก <p> องค์ประกอบทั้งหมดในหน้า
  • $(".myClass") myClass: เลือก องค์ประกอบ ทั้งหมดที่มีคลาส
  • $("#myElement"): เลือกองค์ประกอบด้วย myElement ID
  • $("parentElement").find(".childElement"): เลือกองค์ประกอบย่อยทั้งหมดที่มีคลาส childElement ภายใน parentElement.

ตัวอย่าง:

$("p").css("color", "red");

 

การเปลี่ยนแปลงเนื้อหา

  • $("#myElement").html("<b>Hello World</b>"): ตั้งค่าเนื้อหา HTML สำหรับองค์ประกอบด้วย myElement ID
  • $("p").text("New text"): ตั้งค่าเนื้อหาข้อความสำหรับ <p> องค์ประกอบ ทั้งหมด

ตัวอย่าง:

$("p").text("New paragraph");

 

การเพิ่มและลบองค์ประกอบ

  • $("ul").append("<li>New item</li>"): เพิ่ม <li> องค์ประกอบที่ส่วนท้ายของรายการที่ไม่มีลำดับ( <ul>)
  • $(".myClass").remove(): ลบองค์ประกอบทั้งหมดที่มีคลาสออก myClass จากเพจ

ตัวอย่าง:

$("ul").append("<li>Item 4</li>");

 

การเปลี่ยนแอตทริบิวต์และคลาส

  • $("img").attr("src", "new-image.jpg"): เปลี่ยน src ค่าแอตทริบิวต์สำหรับ <img> องค์ประกอบ ทั้งหมด
  • $("#myElement").addClass("newClass"): เพิ่มคลาส newClass ให้กับองค์ประกอบด้วย myElement ID
  • $("#myElement").removeClass("oldClass"): ลบคลาส oldClass ออกจากองค์ประกอบด้วย myElement ID

ตัวอย่าง:

$("img").attr("alt", "New Image");

 

การจัดการเหตุการณ์

$("button").click(function() { }): ลงทะเบียนฟังก์ชันตัวจัดการเหตุการณ์เมื่อ <button> องค์ประกอบถูกคลิก

ตัวอย่าง:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

เอฟเฟกต์และภาพเคลื่อนไหว

  • $("#myElement").hide(): ซ่อนองค์ประกอบด้วย myElement ID
  • $("#myElement").show(): แสดงองค์ประกอบด้วย myElement ID
  • $("#myElement").fadeOut() myElement: ใช้เอฟเฟ็กต์เฟดเอา ต์ กับองค์ประกอบด้วย ID
  • $("#myElement").fadeIn(): ใช้เอฟเฟ็กต์เฟดอินกับองค์ประกอบด้วย myElement ID

ตัวอย่าง:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});