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

การสร้างเว็บไซต์หรือออกแบบเว็บไซต์ นอกจากจะต้องมีความสวยงามและมีการจัดวางองค์ประกอบทที่เหมาะสม สิ่งหนึ่งที่ขาดไม่ได้คือการเพิ่มลูกเล่นแปลกๆและน่าสนใจ เพื่อสร้างประสบการณ์ดีๆให้กับผู้ใช้  ซึ่งการสร้างลูกเล่นต่างๆโดยส่วนใหญ่เราสามารถใช้  JavaScript หรือ CSS  ซึ่งบทความนี้เราจะพูดถึง method change() 

change()  เป็นเมธอดที่ inbuilt ใน jQuery  ซึ่งใช้ในการเปลี่ยนค่าของช่องใส่ วิธีนี้ใช้ได้กับองค์ประกอบ“ input, textarea และ select” เท่านั้น

รูปแบบ Syntax 

$(selector).change(function)
  • พารามิเตอร์ :  มันยอมรับพารามิเตอร์“ ฟังก์ชั่น” ที่เป็นตัวเลือก 
  • Return Value : มันคืนองค์ประกอบพร้อมการดัดแปลง 

ตัวอย่างโค้ดการใช้ฟังก์ชัน  change

<html> 

<head> 
	<script src="https://ajax.googleapis.com/ajax/libs/ 
			jquery/3.3.1/jquery.min.js"></script> 
	<!--Demo of change method without passing function-->
	<script> 
		$(document).ready(function() { 
			$("button").click(function() { 
				$("input").change(); 
			}); 
		}); 
	</script> 
</head> 

<body> 
	<p>Click the button to see the changed value !!!</p> 
	<!--click on this button and see the change -->
	<button>Click Me!</button> 
	<p>Enter value: 
		<input value="Donald" onchange="alert(this.value)"
		type="text"></p> 
</body> 

</html> 

 ผลลัพธ์ที่ได้เมื่อเปิดกับเบราเซอร์

before clicking
ผลลัพธ์ก่อนกดปุ่ม

ผลลัพธ์เมื่อกดปุ่ม “Click Me”

 

After clicking the “Click Me” button-
ผลลัพธ์เมื่อกดปุ่ม “Click Me”

 

 ผลลัพธ์ที่คือจะ Alert ปรากฎขึ้นมา เมื่อมีการกดปุ่ม ซึ่งข้อมูลที่จะ  alert นั้นเป็นข้อมูลที่ได้มาจาก input box นั้นเอง เพราะว่าได้เขียนฟังก์ชันไว้ว่าเมื่อมีการคลิก ให้แสดง alert โดยใช้ข้อความจาก input ผ่านเมธอด change นั้นเอง

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วางแผนค่าลดหย่อนภาษีอย่างไรให้ได้ประโยชน์ระยะยาว
โดย medalezga จ 23 มี.ค. 2020 12:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
202
จ 23 มี.ค. 2020 2:19 pm โดย kreemza123
ประกันสังคมปรับลดอัตราส่งเงิน นาน 6 เดือน เพื่อบรรเทาผลกระทบการแพร่ระบาดโรคไวรัส COVID-19
โดย thatsawan อ 22 มี.ค. 2020 1:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
4
626
พฤ 02 เม.ย. 2020 9:59 am โดย thatsawan
แนะนำสินค้าใหม่ในร้านค้าออนไลน์ของคุณให้น่าสนใจมากขึ้นด้วย Latest Products
โดย prmindphp ศ 20 มี.ค. 2020 5:27 pm บอร์ด MindPHP News & Feedback
0
620
ศ 20 มี.ค. 2020 5:27 pm โดย prmindphp
B - หน้ารายงานไม่อัพเดทข้อมูล ปัจจุบัน
โดย thatsawan ศ 20 มี.ค. 2020 4:04 pm บอร์ด DBF - Report
3
5
ศ 20 มี.ค. 2020 4:20 pm โดย thatsawan
วิธีการการปรับการแสดงวันที่ในเว็บบอร์ด phpbb
โดย Ittichai_chupol อ 17 มี.ค. 2020 7:07 pm บอร์ด PHP Knowledge
0
1213
อ 17 มี.ค. 2020 7:07 pm โดย Ittichai_chupol
มาแล้ว Plugin System MD Image Responsive สำหรับแสดงภาพที่มีขนาดเหมาะสมกับหน้าจอของอุปกรณ์
โดย prmindphp อ 17 มี.ค. 2020 6:05 pm บอร์ด MindPHP News & Feedback
1
817
พ 18 มี.ค. 2020 10:03 am โดย VAC
การแก้บัคอย่างรวดเร็ว (Joke)
โดย noppadonsk อ 17 มี.ค. 2020 5:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
636
อ 17 มี.ค. 2020 5:04 pm โดย noppadonsk
ประชุมออนไลน์ง่ายๆด้วยการใช้โปรแกรม VSee - โปรแกรมสำหรับ Video Conference
โดย chatee supasand อ 17 มี.ค. 2020 2:24 pm บอร์ด Share Knowledge
0
836
อ 17 มี.ค. 2020 2:24 pm โดย chatee supasand
วิธีการแปลง ข้อมมูล วันที่จาก Excel เพื่อบันทึกลงในฐานข้อมูล
โดย Ittichai_chupol จ 16 มี.ค. 2020 11:43 am บอร์ด PHP Knowledge
0
498
จ 16 มี.ค. 2020 11:43 am โดย Ittichai_chupol
ปัญหา pg_dump: server version: 9.5.19; pg_dump version: 9.3.24
โดย mindphp จ 16 มี.ค. 2020 1:48 am บอร์ด SQL - Database
1
718
จ 16 มี.ค. 2020 1:59 am โดย mindphp
ใครอัพเกรด Joomla แล้วเจอ ปัญหานี้ Duplicate entry 'admin' for key 2 แก้แบบนี้นะ
โดย mindphp ศ 13 มี.ค. 2020 8:43 pm บอร์ด Joomla Development
0
4108
ศ 13 มี.ค. 2020 8:43 pm โดย mindphp
ต้องการ update ข้อมูล 2 ตารางค่ะ
โดย Aspire3628 ศ 13 มี.ค. 2020 6:04 pm บอร์ด SQL - Database
0
475
ศ 13 มี.ค. 2020 6:04 pm โดย Aspire3628
ขอคำแนะนำ Update ข้อมูลจาก 2 Table
โดย Anonymous ศ 13 มี.ค. 2020 5:47 pm บอร์ด SQL - Database
0
883
ศ 13 มี.ค. 2020 5:47 pm โดย บุคคลทั่วไป
วิธีการการสร้าง listbox สำหรับเลือกรายการแล้วทำการช่องกรอกตามรายการที่กำหนด
โดย Ittichai_chupol ศ 13 มี.ค. 2020 3:00 pm บอร์ด Jquery & Ajax Knowledge
0
5054
ศ 13 มี.ค. 2020 3:00 pm โดย Ittichai_chupol
จริงหรือไม่ในมะพร้าวมีฮอร์โมนเพศหญิงกับชายอยู่
โดย Anonymous ศ 13 มี.ค. 2020 1:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
444
ศ 13 มี.ค. 2020 1:14 pm โดย บุคคลทั่วไป
ดีใจจริงๆ
โดย noppadonsk ศ 13 มี.ค. 2020 12:33 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
1535
อ 15 มี.ค. 2020 10:50 am โดย kreemza123
ความจริงที่โหดร้ายของ Editor
โดย noppadonsk พฤ 12 มี.ค. 2020 3:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
465
พฤ 12 มี.ค. 2020 3:29 pm โดย noppadonsk
ขออนุญาตสอบถาม เรื่อง Query ค้นหาข้อมูลครับ
โดย 9kitti พฤ 12 มี.ค. 2020 3:03 pm บอร์ด SQL - Database
2
2590
ศ 13 มี.ค. 2020 10:17 am โดย 9kitti
มันมาโดยไม่รู้ตัว
โดย noppadonsk พ 11 มี.ค. 2020 5:42 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
419
พ 11 มี.ค. 2020 5:42 pm โดย noppadonsk
มาแล้ว! Joomla 3.9.16 อัพเดทด่วน ปรับปรุงเรื่องความปลอดภัยกว่า 6 จุด
โดย tsukasaz พ 11 มี.ค. 2020 11:13 am บอร์ด MindPHP News & Feedback
0
958
พ 11 มี.ค. 2020 11:13 am โดย tsukasaz