บทที่ 4 jQuery Event Funtions
Event คือเหตุการณ์ต่าง ๆ ที่ผู้ใช้งานมีต่อเว็บไซต์ ซึ่งมีการควบคุมโดยการใช้ฟังก์ชั่นของ jQuery จัดการ ตัวอย่างของ Event เช่น การคลิก,การดับเบิลคลิก,การกำหนดโฟกัส,เกิดเหตุการณ์เมื่อนำเมาส์เลื่อนอยู่ เหนืออิลิเมนต์ที่เลือก
| Event |
คำอธิบาย |
| $(document).ready(function) | เหตุการณ์จะเกิดขึ้นเมื่อมีการโหลดเอกสาร html เสร็จเรียบร้อยแล้ว |
| $(selector).click(function) | เหตุการณ์จะเกิดขึ้นเมื่อมีการคลิกอิลิเมนต์ที่เลือก |
| $(selector).dblclick(function) | เหตุการณ์จะเกิดขึ้นเมื่อมีการดับเบิลคลิกอิลิเมนต์ที่เลือก |
| $(selector).focus(function) | เหตุการณ์จะเกิดขึ้นเมื่อเมาส์ไปอยู่ในตำแหน่งโฟกัส |
| $(selector).mouseover(function) | เหตุการณ์จะเกิดขึ้นเมื่อเมาส์อยู่เหนืออิลิเมนต์ที่เลือก |
การใช้งาน jQuery Event Funtions นั้นจะใช้อยู่ในลักษณะ เมธอดที่ถูกเรียกเมื่อเหตุการณ์นั้นเกิดขึ้น อย่างเช่น
เมธอดที่ใช้กำหนดการทำงานให้กับ selector
*** หมายเหตุ <meta charset="utf8"> แท็กนี้เป็นแท็กที่ใส่เพื่อให้ web browser สามารถแสดงภาษาไทยได้ ซึ่งจะใส่ในส่วนของแท็ก <head>
ตัวอย่างที่ 1 (click method) $(selector).click(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>คลิกซิจ๊ะ แล้วฉันจะหายไปทันที</p>
<p>คลิกอีกทีนะ</p>
</body>
</html>คลิกดูตัวอย่าง click method
ตัวอย่างที่ 2 (dbclick method) $(selector).dblclick(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>ดับเบิ้ลคลิกซิจ๊ะ แล้วฉันจะหายไปทันที</p>
<p>คลิกอีกทีนะ</p>
</body>
</html>คลิกดูตัวอย่าง dbclick method
ตัวอย่างที่ 3 (focus method) $(selector).focus(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","pink");
});
$("input").blur(function(){
$(this).css("background-color","white");
alert('please insert your information');
});
});
</script>
</head>
<body>
ชื่อ: <input type="text" name="fullname"><br>
อีเมล: <input type="text" name="email">
</body>
</html>คลิกดูตัวอย่าง focus method
ตัวอย่างที่ 4 mouseover method $(selector).mouseover(function)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("#h").mouseover(function(){
alert("www.mindphp.com!");
});
});
</script>
</head>
<body>
<h id="h">บทความสอน CSS , HTML, javascript, jQuery</h>
</body>
</html>คลิกดูตัวอย่าง mouseover
ข้อมูลอ้างอิง
http://www.w3schools.com
