การสร้างเว็บไซต์หรือออกแบบเว็บไซต์ นอกจากจะต้องมีความสวยงามและมีการจัดวางองค์ประกอบทที่เหมาะสม สิ่งหนึ่งที่ขาดไม่ได้คือการเพิ่มลูกเล่นแปลกๆและน่าสนใจ เพื่อสร้างประสบการณ์ดีๆให้กับผู้ใช้  ซึ่งการสร้างลูกเล่นต่างๆโดยส่วนใหญ่เราสามารถใช้  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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
โดย witsarutt000 พฤ 14 มี.ค. 2024 4:07 pm บอร์ด SQL Knowledge
1
289
พฤ 14 มี.ค. 2024 5:44 pm โดย Sirayu View Topic SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
โดย witsarutt000 พฤ 14 มี.ค. 2024 11:17 am บอร์ด PHP Knowledge
0
180
พฤ 14 มี.ค. 2024 11:17 am โดย witsarutt000 View Topic PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
โดย Thanavat_n พ 13 มี.ค. 2024 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
416
พ 13 มี.ค. 2024 1:34 pm โดย Thanavat_n View Topic ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
โดย @Foretoday อ 12 มี.ค. 2024 1:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
226
อ 12 มี.ค. 2024 1:46 pm โดย @Foretoday View Topic ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
โดย witsarutt000 จ 11 มี.ค. 2024 6:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
177
จ 11 มี.ค. 2024 6:14 pm โดย witsarutt000 View Topic แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
โดย mindphp อ 10 มี.ค. 2024 4:36 am บอร์ด Linux - Web Server
0
272
อ 10 มี.ค. 2024 4:36 am โดย mindphp View Topic ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
IP และ vpn (VMware)
โดย ballmykids อ 10 มี.ค. 2024 2:35 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
230
จ 11 มี.ค. 2024 3:19 pm โดย ballmykids View Topic IP และ vpn (VMware)
แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว
โดย Anonymous ศ 08 มี.ค. 2024 7:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
190
ศ 08 มี.ค. 2024 8:12 pm โดย mindphp View Topic แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว