การสร้างเว็บไซต์หรือออกแบบเว็บไซต์ นอกจากจะต้องมีความสวยงามและมีการจัดวางองค์ประกอบทที่เหมาะสม สิ่งหนึ่งที่ขาดไม่ได้คือการเพิ่มลูกเล่นแปลกๆและน่าสนใจ เพื่อสร้างประสบการณ์ดีๆให้กับผู้ใช้ ซึ่งการสร้างลูกเล่นต่างๆโดยส่วนใหญ่เราสามารถใช้ 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>
ผลลัพธ์ที่ได้เมื่อเปิดกับเบราเซอร์
ผลลัพธ์เมื่อกดปุ่ม “Click Me”
ผลลัพธ์ที่คือจะ Alert ปรากฎขึ้นมา เมื่อมีการกดปุ่ม ซึ่งข้อมูลที่จะ alert นั้นเป็นข้อมูลที่ได้มาจาก input box นั้นเอง เพราะว่าได้เขียนฟังก์ชันไว้ว่าเมื่อมีการคลิก ให้แสดง alert โดยใช้ข้อความจาก input ผ่านเมธอด change นั้นเอง
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
