ให้เรตสมาชิก: 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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - ฐานจริง User M017 สร้าง inv จากหน้า sale ไม่ได้
โดย thatsawan ส 18 ส.ค. 2018 4:57 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
ส 18 ส.ค. 2018 4:57 pm โดย thatsawan
B - ยกเลิกจ่ายชำระ เเต่ หัก ณ ที่จ่ายไม่ยกเลิก ทำให้ออกรายงา หัก ณ ที่จ่ายผิด
โดย thatsawan ส 18 ส.ค. 2018 4:44 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 18 ส.ค. 2018 4:44 pm โดย thatsawan
Q - อัพเกรด Joomla 2.5 เป็น Joomla 3.8 แล้ว ขึ้น Error
โดย Parichat ส 18 ส.ค. 2018 3:57 pm บอร์ด Joomla Development
1
3
ส 18 ส.ค. 2018 4:38 pm โดย mindphp
Q - สอบถามวิธีใช้งาน split ครับ
โดย tatiya ส 18 ส.ค. 2018 2:52 pm บอร์ด Programming - C/C++ & java & Python
4
15
ส 18 ส.ค. 2018 3:40 pm โดย tatiya
งานประจำวันที่ 18 สิงหาคม 2561
โดย Lamduan ส 18 ส.ค. 2018 10:33 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
2
ส 18 ส.ค. 2018 10:33 am โดย Lamduan
งานประจำวันที่ 18 สิงหาคม 2561
โดย tatiya ส 18 ส.ค. 2018 10:02 am บอร์ด M065 - ตติยะ นาชัย
0
2
ส 18 ส.ค. 2018 10:02 am โดย tatiya
เปลี่ยน data type จาก numeric เป็น character varying อย่างไร pg AdminIII
โดย kkeinezung ศ 17 ส.ค. 2018 9:43 pm บอร์ด Programming - PHP
0
29
ศ 17 ส.ค. 2018 9:43 pm โดย kkeinezung
จัดการที่อยู่ อำเภอ ตำบล จังหวัด โดยไม่ต้องพิมพ์เองยังไงคะ
โดย mook2LRC1 ศ 17 ส.ค. 2018 8:08 pm บอร์ด Joomla Development
2
22
ส 18 ส.ค. 2018 9:48 am โดย mook2LRC1
B - ใบกำกับภาษี วันที่ตกบรรทัด
โดย taemmynatchapon ศ 17 ส.ค. 2018 6:35 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
2
8
ส 18 ส.ค. 2018 11:26 am โดย taemmynatchapon
คำสั่งตัดสินใจการทำงาน PHP แบบ if และ switch
โดย tai14 ศ 17 ส.ค. 2018 5:53 pm บอร์ด PHP Knowledge
0
12
ศ 17 ส.ค. 2018 5:53 pm โดย tai14
สอบถามวิธีแก้เมื่อกด Start Mysqlไม่ได้ โปรแกรม Xampp
โดย tai14 ศ 17 ส.ค. 2018 5:09 pm บอร์ด Programming - PHP
1
48
ศ 17 ส.ค. 2018 6:53 pm โดย tsukasaz
แนะนำ module nltk ตัดคำที่ไม่จำเป็น
โดย tatiya ศ 17 ส.ค. 2018 4:55 pm บอร์ด Python Knowledge
0
5
ศ 17 ส.ค. 2018 4:55 pm โดย tatiya
ตัวดำเนินการ PHP
โดย tai14 ศ 17 ส.ค. 2018 4:04 pm บอร์ด PHP Knowledge
0
12
ศ 17 ส.ค. 2018 4:04 pm โดย tai14
B - ใบปริ้นบาร์โค้ดแสดงผลไม่ถูกต้อง [2018-08][005]
โดย thatsawan ศ 17 ส.ค. 2018 11:40 am บอร์ด Hachanna - Testter
0
3
ศ 17 ส.ค. 2018 11:40 am โดย thatsawan
ทำความรู้จักกับตัวแปร Array
โดย tai14 ศ 17 ส.ค. 2018 10:41 am บอร์ด PHP Knowledge
0
16
ศ 17 ส.ค. 2018 10:41 am โดย tai14
งานประจำวันที่ 17 สิงหาคม 2561
โดย Lamduan ศ 17 ส.ค. 2018 10:10 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
5
ศ 17 ส.ค. 2018 10:10 am โดย Lamduan
งานประจำวันที่ 17 สิงหาคม 2561
โดย tatiya ศ 17 ส.ค. 2018 9:31 am บอร์ด M065 - ตติยะ นาชัย
1
7
ศ 17 ส.ค. 2018 9:35 pm โดย tatiya
งานประจำวันที่ 17 สิงหาคม 2561
โดย pprn ศ 17 ส.ค. 2018 9:20 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
13
ศ 17 ส.ค. 2018 6:19 pm โดย pprn
งานประจำวันที่ 17 สิงหาคม 2561
โดย prakon ศ 17 ส.ค. 2018 9:19 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
17
ศ 17 ส.ค. 2018 9:20 am โดย prakon
งานที่ต้องทำประจำวันที่ 17 สิงหาคม 2561
โดย tai14 ศ 17 ส.ค. 2018 9:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
12
ศ 17 ส.ค. 2018 7:01 pm โดย tai14