ต่อจาก 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 ที่เลือก
เยี่ยมมากครับ โค๊ดย่อยๆ ที่บางตัวหายไปจากหลักสูตร