ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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
 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ทำไมเปลี่ยน type ข้อมูลเป็น int ไม่ได้คับ
โดย chatee supasand พ 05 ก.พ. 2020 5:47 pm บอร์ด Programming - C/C++ & java & Python
2
205
พ 05 ก.พ. 2020 5:55 pm โดย jirawoot
ผมอยากทราบว่าถ้าหากต้องการที่จะแยกส่วนการทำงาน การแบ่งชุดออกข้อมูลออก มันของแต่ละตาราง ใน phpbb
โดย Ittichai_chupol พ 05 ก.พ. 2020 4:23 pm บอร์ด Programming - PHP
3
1831
พ 05 ก.พ. 2020 7:32 pm โดย thatsawan
คำสั่ง Colspan และ Rowspan ใน HTML คืออะไร
โดย chatee supasand พ 05 ก.พ. 2020 2:30 pm บอร์ด HTML CSS
0
1558
พ 05 ก.พ. 2020 2:30 pm โดย chatee supasand
ท่านตลกหรอพระเจ้า?
โดย noppadonsk พ 05 ก.พ. 2020 10:53 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
109
พ 05 ก.พ. 2020 10:53 am โดย noppadonsk
อยากทราบวิธีการแก้ไข้ ปํญหาเนื่องจากการติดตั้ง ตาราง โดย phpbb ที่มีจำนวนคอลัมมากๆๆ
โดย Ittichai_chupol อ 04 ก.พ. 2020 2:21 pm บอร์ด Programming - PHP
2
1531
อ 04 ก.พ. 2020 2:32 pm โดย Ittichai_chupol
ถึงกับไปไม่เป็น
โดย noppadonsk อ 04 ก.พ. 2020 11:04 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
121
ศ 07 ก.พ. 2020 11:40 am โดย LEG
B - บอร์ด Odoojob เข้าไม่ได้ครับ
โดย jamepiyawat อ 04 ก.พ. 2020 10:39 am บอร์ด Odoojob.com - Tester
0
4
อ 04 ก.พ. 2020 10:39 am โดย jamepiyawat
สอบถามครับ ต้องการตัดค่าที่ซ้ำกันออกต้องทำไงครับ
โดย chatee supasand จ 03 ก.พ. 2020 2:19 pm บอร์ด Programming - C/C++ & java & Python
2
1433
จ 03 ก.พ. 2020 2:41 pm โดย chatee supasand
กดsaveแล้วerrorครับ(สอนเขียน PHP ติดต่อฐานข้อมูล MySQL อัพโหลดภาพ เพิ่ม ลบ แก้ไข Database)
โดย jutikul1012 จ 03 ก.พ. 2020 11:02 am บอร์ด Programming - PHP
0
1856
จ 03 ก.พ. 2020 11:02 am โดย jutikul1012
อย่าลืมเซฟงานนะ
โดย noppadonsk จ 03 ก.พ. 2020 10:45 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
1197
จ 03 ก.พ. 2020 11:01 am โดย thatsawan
ขอคำแนะนำเทคนิคพแดี พอดีผมกำลังหัดทำเว็บด้วย wordpress
โดย Anonymous จ 03 ก.พ. 2020 7:47 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
392
จ 03 ก.พ. 2020 11:24 am โดย mindphp
ทำความเข้าใจกับคีย์ลัด google Sheetsl เพื่อให้การทำงานง่ายขึ้น
โดย nutchasn ส 01 ก.พ. 2020 6:37 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
164
ส 01 ก.พ. 2020 6:37 pm โดย nutchasn
เพิ่มทักษะการใช้โปรแกรม Microsoft Excel ให้คำนวณและวิเคราะห์ได้ง่ายขึ้น
โดย nutchasn ส 01 ก.พ. 2020 5:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
155
ส 01 ก.พ. 2020 5:53 pm โดย nutchasn
ความแตกต่างของ google Slides กับ powerpoint เพื่อเลือกใช้ในการนำเสนอ
โดย nutchasn ส 01 ก.พ. 2020 5:02 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
156
ส 01 ก.พ. 2020 5:02 pm โดย nutchasn
เรียนรู้การขอStatement เพื่อใช้เป็นหลักฐานยืนยันการเคลื่อนไหวทางการเงิน
โดย nutchasn ส 01 ก.พ. 2020 2:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
152
ส 01 ก.พ. 2020 2:53 pm โดย nutchasn
ทำความเข้าใจภาษีมูลค่าเพิ่ม เพื่อให้เข้าใจว่าทำไมต้องจดทะเบียน
โดย nutchasn ส 01 ก.พ. 2020 12:27 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
141
ส 01 ก.พ. 2020 12:27 pm โดย nutchasn
อยากทราบวิธีการ แสดง icon logo ในหน้า favorite ของ safiri มีการแสดง icon ที่กำหนด
โดย Ittichai_chupol ศ 31 ม.ค. 2020 7:23 pm บอร์ด Programming - PHP
1
360
ศ 31 ม.ค. 2020 7:25 pm โดย mindphp
ขอสอบถามเกี่ยวกับการดึงข้อมูลภายในหน้าเดียวกันครับ
โดย benzas00123 ศ 31 ม.ค. 2020 7:08 pm บอร์ด HTML CSS
1
317
ศ 31 ม.ค. 2020 7:30 pm โดย benzas00123
Q-อยากทราบว่าต้องการย่อขยายรูปต้องทำยังไงค่ะ
โดย nutchasn ศ 31 ม.ค. 2020 6:29 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
290
ศ 31 ม.ค. 2020 6:33 pm โดย Ittichai_chupol
วิธีการปรับเปลี่ยน css เมือจอแสดงผมมีขนาดที่แตกตางกัน โดยการ override template เพื่อลดจำนวน โคด css
โดย Ittichai_chupol ศ 31 ม.ค. 2020 6:03 pm บอร์ด CSS Knowledge
0
239
ศ 31 ม.ค. 2020 6:03 pm โดย Ittichai_chupol