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

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการปรับเปลี่ยน css เมือจอแสดงผมมีขนาดที่แตกตางกัน โดยการ override template เพื่อลดจำนวน โคด css
โดย Ittichai_chupol ศ 31 ม.ค. 2020 6:03 pm บอร์ด CSS Knowledge
0
242
ศ 31 ม.ค. 2020 6:03 pm โดย Ittichai_chupol
Flask dropzone กับคำสั่งในการตั้งค่าตัว โมดูลต่างๆ
โดย benzas00123 ศ 31 ม.ค. 2020 6:02 pm บอร์ด Python Knowledge
0
1329
ศ 31 ม.ค. 2020 6:02 pm โดย benzas00123
การจัดซื้อใน โปรแกรมOpen erp ให้มีประสิทธิภาพ
โดย nutchasn ศ 31 ม.ค. 2020 5:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
147
ศ 31 ม.ค. 2020 5:56 pm โดย nutchasn
Flask dropzone โมดูลสำหรับการสร้าง Drop file อย่างง่าย
โดย benzas00123 ศ 31 ม.ค. 2020 5:21 pm บอร์ด Python Knowledge
0
241
ศ 31 ม.ค. 2020 5:21 pm โดย benzas00123
ทำความรู้ ภ.ง.ด 94 เพื่อให้เข้าใจการยื่นภาษีครึ่งปี
โดย nutchasn ศ 31 ม.ค. 2020 3:10 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
189
ศ 31 ม.ค. 2020 3:10 pm โดย nutchasn
เรียนรู้การยื่นภาษีเงินได้บุคคลธรรมดา เพื่อให้ยื่นภาษีได้ถูกต้อง
โดย nutchasn ศ 31 ม.ค. 2020 2:42 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
145
ศ 31 ม.ค. 2020 2:42 pm โดย nutchasn
การหักลดหย่อนภาษี สิทธิประโยชน์ที่ทำให้เสียภาษีน้อยลง
โดย nutchasn ศ 31 ม.ค. 2020 2:07 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
202
ศ 31 ม.ค. 2020 2:07 pm โดย nutchasn
Refactor ไหมหละ
โดย noppadonsk ศ 31 ม.ค. 2020 9:38 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
175
ศ 31 ม.ค. 2020 9:38 am โดย noppadonsk
วิธีการตรวจสอบกระทูู้นี้มีการอ่านหรือยัง ในเว็บบอร์ด phpbb
โดย Ittichai_chupol พฤ 30 ม.ค. 2020 7:02 pm บอร์ด PHP Knowledge
0
166
พฤ 30 ม.ค. 2020 7:02 pm โดย Ittichai_chupol
Python GUI (Tkinter) : การกำหนดให้ช่อง entry สามารถกรอกได้แค่ตัวเลขเท่านั้น
โดย benzas00123 พฤ 30 ม.ค. 2020 6:43 pm บอร์ด Python Knowledge
0
161
พฤ 30 ม.ค. 2020 6:43 pm โดย benzas00123
การแยกประเภทในโปรแกรม open erp เพื่อสะดวกในการจัดทำงบการเงิน
โดย nutchasn พฤ 30 ม.ค. 2020 6:25 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
165
พฤ 30 ม.ค. 2020 6:25 pm โดย nutchasn
Python GUI (Tkinter) : การกำหนดนามสกุล File ที่ต้องการจะหาใน Browse file
โดย benzas00123 พฤ 30 ม.ค. 2020 6:04 pm บอร์ด Python Knowledge
0
174
พฤ 30 ม.ค. 2020 6:04 pm โดย benzas00123
วิธีการนำเลขเวอร์ชั่นของ component joomla ออกมาแสดงที่หน้าเว็บไซต์
โดย jamepiyawat พฤ 30 ม.ค. 2020 5:47 pm บอร์ด Joomla Developing Knowledge
0
195
พฤ 30 ม.ค. 2020 5:47 pm โดย jamepiyawat
Python GUI (Tkinter) : การ Browse file แบบ multiple file จากการกดปุ่ม Button
โดย benzas00123 พฤ 30 ม.ค. 2020 5:46 pm บอร์ด Python Knowledge
0
175
พฤ 30 ม.ค. 2020 5:46 pm โดย benzas00123
ทำความรู้การปิดบัญชี เพื่อให้ทราบผลการดำเนินไปประกอบในการตัดสินใจวางแผนธุรกิจ
โดย nutchasn พฤ 30 ม.ค. 2020 5:06 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
164
พฤ 30 ม.ค. 2020 5:06 pm โดย nutchasn
ทำความเข้าใจในการปิดงบบัญชี เพิ่อให้เป็นการปิดงบที่สมบูรณ์
โดย nutchasn พฤ 30 ม.ค. 2020 4:36 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
130
พฤ 30 ม.ค. 2020 4:36 pm โดย nutchasn
อยากทราบวิธีการดึงค่าเลขเวอร์ชั่นในไฟล์ XML ของ components joomla
โดย jamepiyawat พฤ 30 ม.ค. 2020 3:28 pm บอร์ด Joomla Development
3
2368
พฤ 30 ม.ค. 2020 5:34 pm โดย tsukasaz
อัพเดทกันหรือยัง! Joomla 3.9.15 ปรับปรุงความปลอดภัยและแก้ไขข้อผิดพลาดต่างๆ
โดย tsukasaz พฤ 30 ม.ค. 2020 11:37 am บอร์ด MindPHP News & Feedback
0
1794
พฤ 30 ม.ค. 2020 11:37 am โดย tsukasaz
วิธีการนำข้อความที่ผู้ใช้กรอกให้เข้าไปอยู่ในไฟล์ pdf ด้วยภาษา php
โดย jamepiyawat พ 29 ม.ค. 2020 6:53 pm บอร์ด PHP Knowledge
0
159
พ 29 ม.ค. 2020 6:53 pm โดย jamepiyawat
ติดตั้ง module flaskwebgui ไม่ได้ครับ
โดย benzas00123 พ 29 ม.ค. 2020 6:53 pm บอร์ด Programming - C/C++ & java & Python
2
184
พฤ 30 ม.ค. 2020 11:52 am โดย jirawoot