หัดใช้ jquery ดึง แก้ไข เพิ่ม ลบ ค่า element

ต่อจาก jquery เบื้องต้น หัดใช้ Selector, Event, Effect ตอนนี้ขอแปะวิธีการดึง แก้ไข เพิ่ม ลบ ค่า  element ในหน้าเว็บ โดยใช้ jQuery

วิธีดึงค่า (get) ใน Element

มี 3 เมธอดหลักๆ ที่ใช้ในการดึงและแก้ไขค่า

  • text()     ดึงหรือแก้ไขค่าที่เป็นข้อความอย่างเดียว (text) ไม่รวมแท็ก html
  • html()   ดึงหรือแก้ไขค่าที่เป็น html
  • val()      ดึงหรือแก้ไขค่าใน <form> เช่นค่าที่อยู่ใน <input>

ตัวอย่างไฟล์เว็บ html สำหรับการดึงค่า

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){

 $("#btn1").click(function(){
  alert("Text: " + $("#test1").text());
 });

 $("#btn2").click(function(){
  alert("HTML: " + $("#test1").html());
 });

 $("#btn3").click(function(){
  alert("Name Value: " + $("#test3").val());
 });

});
</script>
</head>
<body>

<p id="test1">This is some <b>bold</b> text in a paragraph.</p>
<p>Name: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
<button id="btn3">Show Name Value</button>

</body>
</html>

 

คำอธิบาย

  • เมื่อมีการคลิกกด (click) ปุ่ม id #btn1 ในที่นี้คือ <button>Show Text</button> ให้แสดง (alert) จาก id #test1  โดยแสดงเฉพาะข้อความ text()
  • เมื่อมีการคลิกกด (click) ปุ่ม id #btn2 ในที่นี้คือ <button>Show HTML</button> ให้แสดง (alert) จาก id #test1  โดยแสดงทั้งข้อความและแท็ก html  html()
  • เมื่อมีการคลิกกด (click) ปุ่ม id #btn3 ในที่นี้คือ <button>Show Name Value</button> ให้แสดง (alert) ค่า val() จาก input form ที่มี id #test3

 

วิธีแก้ไขค่า (set)

ตัวอย่างไฟล์เว็บ html สำหรับการแก้ไขค่า

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){

 $("#btn1").click(function(){
  $("#test1").text("Hello world!");
 });

 $("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
 });

 $("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
 });

});
</script>
</head>

<body>

<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>

</body>
</html>

คำอธิบาย

  • เมื่อมีการคลิกกด (click) ปุ่ม id #btn1 ในที่นี้คือ <button>Set Text</button> ให้แก้ไขค่า text() ใน id #test1
  • เมื่อมีการคลิกกด (click) ปุ่ม id #btn2 ในที่นี้คือ <button>Set HTML</button> ให้แก้ไขค่า html() ใน id #test2 สามารถใส่ได้ทั้งข้อความและแท็ก html
  • เมื่อมีการคลิกกด (click) ปุ่ม id #btn3 ในที่นี้คือ <button>Set Value</button> ให้แก้ไขค่า val() ใน input form ที่มี id #test3

วิธีเพิ่ม ค่าใหม่

มี  4 เมธอดหลักๆ ที่ใช้ในการเพิ่มค่าใหม่

  • append() – เพิ่มค่าต่อท้ายใน element ที่เลือก
  • prepend() – แทรกค่าด้านหน้าใน element ที่เลือก
  • after() – เพิ่ม element ใหม่ ต่อท้าย element ที่เลือก
  • before() – แทรก element ใหม่ ด้านหน้า element ที่เลือก

ตัวอย่างไฟล์เว็บ html สำหรับเพิ่มค่า

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){

 $("#btn1").click(function(){
  $("p").append(" <b>Appended text</b>.");
 });

 $("#btn2").click(function(){
  $("ol").append("<li>Appended item</li>");
 });

 $("#btn3").click(function(){
  $("p").prepend("<b>Prepended text</b>. ");
 });

 $("#btn4").click(function(){
  $("img").before("<b>Before</b>");
 });

 $("#btn5").click(function(){
  $("img").after("<i>After</i>");
 });

});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
</ol>

<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
<button id="btn3">Prepend text</button>
<button id="btn4">Insert before</button>
<button id="btn5">Insert after</button>

</body>
</html>

ทดลองกดปุ่มต่างๆ เพื่อเปรียบเทียบผลลัพธ์ที่ได้

วิธีลบค่า

มี  2 เมธอดหลักๆ ที่ใช้ในการลบค่า

  • remove() – ลบ element ที่เลือก และ child ที่อยู่ภายใต้ทั้งหมด
  • empty() – ลบเฉพาะ child ที่อยู่ภายใต้ element ที่เลือก

ตัวอย่างไฟล์เว็บ html สำหรับลบค่า

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){

 $("#btn1").click(function(){
  $("#div1").remove();
 });

 $("#btn2").click(function(){
  $("#div1").empty();
 });

});
</script>
</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
 This is some text in the div.
 <p>This is a paragraph in the div.</p>
 <p>This is another paragraph in the div.</p>
</div>
<br>
<button id="btn1">Remove div element</button>
<button id="btn2">Empty the div element</button>

</body>
</html>

ลองเปรียบเทียบระหว่างการกดปุ่ม #btn1 ที่ลบ remove() element และ child ทั้งหมด กับการกดปุ่ม #btn2 ที่ลบ empty() เฉพาะ child ที่อยู่ในภาย element ที่เลือก

 

ข้อมูลอ้างอิง

1 thought on “หัดใช้ jquery ดึง แก้ไข เพิ่ม ลบ ค่า element”

  1. เยี่ยมมากครับ โค๊ดย่อยๆ ที่บางตัวหายไปจากหลักสูตร

Leave a Reply