ให้เรตสมาชิก: 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
 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แถบเมนูตรง ส่วนเสริม dict ขึ้นคำว่า .MODS ไม่เป็นภาษาไทย
โดย makup ส 31 ต.ค. 2020 11:04 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
11
ส 31 ต.ค. 2020 11:11 am โดย makup
ติดปัญหา ทำอย่างไงจะให้ Query ข้อมูลได้รวดเร็วยิ่งขึ้น
โดย makup ศ 30 ต.ค. 2020 7:47 pm บอร์ด Programming - PHP
4
21
ศ 30 ต.ค. 2020 7:59 pm โดย makup
การรวมข้อความจากหลายตาราง
โดย Bellamy ศ 30 ต.ค. 2020 6:55 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
10
ศ 30 ต.ค. 2020 6:55 pm โดย Bellamy
ตัวระบบปฎิบัติการ ubuntu ที่เครื่องทำงานมีปัญหา , เมื่อเวลาทำการเปิดเครื่องบน Ubuntu
โดย makup ศ 30 ต.ค. 2020 2:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
28
ศ 30 ต.ค. 2020 3:12 pm โดย mindphp
การแก้ไขปัญหาภาษาไทยสระทับซ้อนกันใน โปรแกรม Adobe Illustrator cc 2019
โดย Bellamy พฤ 29 ต.ค. 2020 5:32 pm บอร์ด Graphic design
0
17
พฤ 29 ต.ค. 2020 5:32 pm โดย Bellamy
ขอวิธีแก้ Bug ปุ่ม Next ให้เป็นภาษาไทย , หลังจากที่ได้ทำการติดตั้งตัง ตัวรับรองภาษาไทยแล้ว
โดย makup พฤ 29 ต.ค. 2020 5:15 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
49
ศ 30 ต.ค. 2020 5:34 pm โดย makup
เกิด Fatal error ในหน้าแรก , เกิดจากเข้าไปตรง ส่วนเสริม แล้วพอคลิกปุ่ม หน้าเว็บบอรด์
โดย makup พฤ 29 ต.ค. 2020 4:20 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
33
พฤ 29 ต.ค. 2020 4:33 pm โดย thatsawan
จะอัพเกรดJoomla 1.5 ไปเป็น 3.9
โดย somporn.so พฤ 29 ต.ค. 2020 3:56 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
28
พฤ 29 ต.ค. 2020 4:08 pm โดย mindphp
จำทำเว็บขายของ ใช้ Joomla Virtuemart ดีไหม
โดย Anonymous พฤ 29 ต.ค. 2020 3:10 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
30
พฤ 29 ต.ค. 2020 4:10 pm โดย mindphp
ขอวิธีการติดตั้ง phpBB ในตัวเครื่อง Ubuntu หน่อยครับ
โดย makup พฤ 29 ต.ค. 2020 1:37 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
4
41
พฤ 29 ต.ค. 2020 2:29 pm โดย mindphp
แจ้งเตือนชำระเงิน บน browser ด้วย Plugin System MZC Notify ใน MooZiiCart
โดย bolue พ 28 ต.ค. 2020 6:37 pm บอร์ด MindPHP News & Feedback
0
42
พ 28 ต.ค. 2020 6:37 pm โดย bolue
จัดการเว็บไซต์ที่มีหลายร้านค้าง่ายๆ ด้วย Plugin System MZC Multi Shop ใน MooZiiCart
โดย bolue พ 28 ต.ค. 2020 6:27 pm บอร์ด MindPHP News & Feedback
1
33
ศ 30 ต.ค. 2020 6:41 pm โดย bolue
ลบส่วนส่วนเกินในรูปภาพ โดย Photoshop cc
โดย Bellamy พ 28 ต.ค. 2020 5:49 pm บอร์ด Graphic design
0
34
พ 28 ต.ค. 2020 5:49 pm โดย Bellamy
สอนการ บวก ลบ คูณ หาร ง่ายๆ ผ่านการใช้ Excel ออนไลน์
โดย Bellamy อ 27 ต.ค. 2020 7:38 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
32
อ 27 ต.ค. 2020 7:38 pm โดย Bellamy
การสไลด์โชว์สินค้าได้หลายรูปแบบ ด้วย Module MZC Slider ii ใน MooZiiCart
โดย bolue อ 27 ต.ค. 2020 5:58 pm บอร์ด MindPHP News & Feedback
0
37
อ 27 ต.ค. 2020 5:58 pm โดย bolue
การแก้ไขข้อความ หรือเพิ่มรายละเอียดข้อความ แบบตรวจสอบได้ ผ่านทาง word online
โดย Bellamy อ 27 ต.ค. 2020 5:28 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
32
อ 27 ต.ค. 2020 5:28 pm โดย Bellamy
ขั้นตอนทำงาน System Analyst and Design
โดย Bellamy จ 26 ต.ค. 2020 6:51 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
54
จ 26 ต.ค. 2020 6:51 pm โดย Bellamy
แนะนำแหล่งท่องเที่ยวและการเดินทางในกทม
โดย Bellamy จ 26 ต.ค. 2020 4:53 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
60
จ 26 ต.ค. 2020 6:50 pm โดย Bellamy
Content Marketing คือ - ในปัจจุบันสำคัญอย่างไร?
โดย ploypola จ 26 ต.ค. 2020 12:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
36
จ 26 ต.ค. 2020 12:07 pm โดย ploypola
วิธีการ Insert , edit ,delete โดยผ่านตัว Model Laravel Framework
โดย makup ส 24 ต.ค. 2020 3:44 pm บอร์ด PHP Knowledge
1
51
ส 24 ต.ค. 2020 3:59 pm โดย makup