ให้เรตสมาชิก: 2 / 5

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

บทที่ 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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 27 พฤษภาคม 2562
โดย nanthiya จ 27 พฤษภาคม 2019 10:03 am บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
0
1
จ 27 พฤษภาคม 2019 10:03 am โดย nanthiya
งานประจำวันที่ 27 พฤษภาคม 2562
โดย jamepiyawat จ 27 พฤษภาคม 2019 10:01 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
1
จ 27 พฤษภาคม 2019 10:01 am โดย jamepiyawat
งานประจำวันที่ 27 พฤษภาคม 2562
โดย teenproza7 จ 27 พฤษภาคม 2019 9:58 am บอร์ด M082 - ยศนันท์ ปันคำ
0
1
จ 27 พฤษภาคม 2019 9:58 am โดย teenproza7
เช็คของ ที่ตรวจแล้ว
โดย Kanyarat Kanthawong อ 26 พฤษภาคม 2019 3:48 pm บอร์ด SQL - Database
2
15
อ 26 พฤษภาคม 2019 9:13 pm โดย Kanyarat Kanthawong
B - Error เข้าระบบ อัตโนมัติ ด้วย facebook
โดย mindphp อ 26 พฤษภาคม 2019 5:57 pm บอร์ด phpbbthailand.com
0
2
อ 26 พฤษภาคม 2019 5:57 pm โดย mindphp
วิธีติดตั้ง Joomla 3.9.6 ตอนที่2
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:42 pm บอร์ด Share Knowledge
0
16
ส 25 พฤษภาคม 2019 5:42 pm โดย jamepiyawat
วิธีติดตั้ง Joomla 3.9.6 บน Ubuntu ตอนที่1
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:32 pm บอร์ด Joomla user Guide Knowledge
1
29
ส 25 พฤษภาคม 2019 8:10 pm โดย mindphp
รับค่ามาแล้วแต่แปลงไฟล์ไม่ได้ครับ
โดย teenproza7 ส 25 พฤษภาคม 2019 4:36 pm บอร์ด Programming - C/C++ & java & Python
5
30
ส 25 พฤษภาคม 2019 7:33 pm โดย mindphp
คำศัพท์ที่เจอบ่อยในการทำงาน Master data management
โดย nanthiya ส 25 พฤษภาคม 2019 4:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ส 25 พฤษภาคม 2019 4:29 pm โดย nanthiya
python รับค่าจาก form แล้วสร้างเป็นไฟล์ เพื่อนำไปใช้ต่อ
โดย teenproza7 ส 25 พฤษภาคม 2019 3:19 pm บอร์ด Programming - C/C++ & java & Python
2
23
ส 25 พฤษภาคม 2019 7:14 pm โดย teenproza7
Localhost คืออะไร
โดย jamepiyawat ส 25 พฤษภาคม 2019 3:04 pm บอร์ด Share Knowledge
0
15
ส 25 พฤษภาคม 2019 3:04 pm โดย jamepiyawat
เจอปัญหา จุมล่าขอ Host จริงส่งเมลออกไม่ได้
โดย mindphp ส 25 พฤษภาคม 2019 1:06 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
10
ส 25 พฤษภาคม 2019 1:06 pm โดย mindphp
ที่มาของชื่อกลุ่มดาวคนแบกงู
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:50 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
ส 25 พฤษภาคม 2019 11:50 am โดย jamepiyawat
แปลข้อความเป็นภาษาอื่น ฟีเจอร์ใหม่ใน Microsoft Office
โดย teenproza7 ส 25 พฤษภาคม 2019 11:34 am บอร์ด Microsoft Office Knowledge & line & Etc
0
14
ส 25 พฤษภาคม 2019 11:34 am โดย teenproza7
ราศีที่ 13
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
ส 25 พฤษภาคม 2019 11:22 am โดย jamepiyawat
ทำไมเราถึงเห็นน้ำอยู่กลางถนนนะ?
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:34 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
ส 25 พฤษภาคม 2019 10:34 am โดย jamepiyawat
งานประจำวันที่ 25 พฤษภาคม 2562
โดย nanthiya ส 25 พฤษภาคม 2019 10:21 am บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
4
48
ส 25 พฤษภาคม 2019 7:51 pm โดย nanthiya
งานประจำวันที่ 25 พฤษาภาคม 2562
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
3
28
ส 25 พฤษภาคม 2019 8:15 pm โดย mindphp
งานประจำวันที่ 25 พฤษภาคม 2562
โดย teenproza7 ส 25 พฤษภาคม 2019 9:52 am บอร์ด M082 - ยศนันท์ ปันคำ
1
11
ส 25 พฤษภาคม 2019 7:40 pm โดย teenproza7
ทดลองสอบ TOEIC ก่อนไปลงสนามจริง
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:33 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
ศ 24 พฤษภาคม 2019 7:33 pm โดย teenproza7