บทที่ 6 jQuery DOM ตอนที่ 1
DOM manipulation Method
สิ่งหนึ่งที่สำคัญมากในการเรียนรู้ภาษา jQuery นั้นคือการเข้าใจ DOM เพื่อให้สามารถจัดการกับ element และ attributes ได้ดียิ่งขึ้น
เพราะคงไม่มีใครชอบ หากต้องมานั่งเขียนโค๊ดยาวๆ เมื่อต้องการปรับแก้ไขค่า (value) ให้กับ element ต่างบนหน้าเอกสาร html
DOM = Document Object Model
DOM คือ การมองส่วนต่างๆของหน้าเว็บให้เป็น object ทำให้เราสามารถแยกแยะ และเข้าถึงแต่ล่ะ object ได้ง่ายขึ้น ทั้งนี้ก็เพื่อให้เราสามารถเรียกใช้ object เหล่านั้นได้
Method ที่ใช้ในการจัดการ DOM มีดังนี้
1. Get content
1.1 $(selector).text(content) : คือคำสังที่ใช้กำหนดข้อความให้กับอิลิเม้นท์ใดๆ หรือดึงข้อความ ออกจากอีลิเม้นท์ใดๆ
1.2 $(selector).html(content) : คำสั่งนี้จะคล้ายๆกับคำสั่ง text() เพียงแต่ ข้อความที่ได้จากคำสั่ง html() นั้นจะเป็นแบบ html tag ต่างกับคำสั่ง text() ที่ได้ข้อความเป็นแบบ text
1.3 $(selector).val(content) :คำสั่งที่ใช้สำหรับปรับค่าของ form โดยสามารถใช้ได้ทั้ง ดึงค่า เช่น ดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox เป็นต้น
ตัวอย่างที่ 1 คำสั่ง text() VS html()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">
ตัวอย่างการใช้ <strong><u>คำสั่ง text และ คำสั่ง html</u></strong>
</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
คลิกดูตัวอย่าง text() VS html()
จะเห็นว่า คำสั่งทั้งสองให้ผลลับที่ต่างกัน คือคำสั่ง text() จะได้ข้อความแบบธรรมดา ต่างกับ คำสั่ง html() ที่ให้ข้อความแบบ html tag
ตัวอย่างที่ 2.1 การใช้คำสั่ง val() เพื่อดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<h>ลองพิมพ์ข้อความลงในช่อง "NAME" แล้ว คลิกที่ปุ่ม "Show Value" เพื่อดูค่าที่ได้จากการใช้คำสั่ง Val() กันนะจ๊ะ</h>
<p>Name: <input type="text" id="test" value=""></p>
<button>Show Value</button>
</body>
</html>
คลิกดูตัวอย่างที่ 2.1
จะเห็นว่า เมื่อเราลองพิมพ์ข้อความในช่อง "Name" แล้วคลิกที่ปุ่ม "show value" เจ้าคำสั่ง val() ก็จะทำการดึงค่า หรือ ข้อความ เฉพาะที่อยู่ในช่อง (form) ออกมา
ตัวอย่างที่ 2.2 การใช้คำสั่ง val() คำสั่งนี้ใช้สำหรับกำหนดค่า value ให้กับคอนโทรลในฟอร์ม<!DOCTYPE html >
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script >
$(document).ready(function(){
$('#set').click(function(){
$('#username').val('abc');
$('#password').val('10');
});
})
</script>
</head>
<body>
<p>Username :
<input type="text" id="username" >
</p>
<p>Password :
<input type="text" id="password">
</p>
<input type="submit" id="set" value="Click">
</body>
</html>คลิกดูตัวอย่างที่ 2.2
จะเห็นว่าพอคลิกที่ปุ่ม "click" โค้ดก็จะกำหนดคำว่า abc ลงไปในช่องป้อนข้อมูลช่องแรก และ 10 ลงไปในช่องที่ 2 ในทันที
แม้ว่าเราจะลองพิมพ์ข้อความอื่นใส่เข้าไปในช่องที่ 1 และ 2 แล้วลองคลิกที่ปุ่มใหม่กี่ครั้ง ค่าที่ได้ในช่องที่ 1 และ 2 ก็จะกลับมาเหมือนเดิมเสมอ
อ้างอิง
http://www.w3schools.com
http://www.jquerythai.com
http://www.select2web.com
