ล่าสุดการพัฒนาเว็บบทเรียน
 

jQueryวิธีการจัดกิจกรรม

❮ก่อนหน้า ถัดไปบท❯

jQuery เป็น tailor-made เพื่อตอบสนองต่อเหตุการณ์ที่เกิดขึ้นในหน้าเว็บ HTML

อะไรคือเหตุการณ์?

ทุกการกระทำที่แตกต่างกันของผู้เข้าชมที่หน้าเว็บที่สามารถตอบสนองต่อเหตุการณ์ที่เกิดขึ้นจะเรียกว่า

เหตุการณ์ที่แสดงให้เห็นถึงช่วงเวลาได้อย่างแม่นยำเมื่อสิ่งที่เกิดขึ้น

ตัวอย่าง:

  • เลื่อนเมาส์มากกว่าองค์ประกอบ
  • เลือกปุ่ม
  • คลิกที่องค์ประกอบ

คำว่า "fires/fired" มักจะใช้กับเหตุการณ์ที่เกิดขึ้น ตัวอย่าง: "การ keypress เหตุการณ์ถูกยิงขณะที่คุณกดปุ่ม"

นี่คือบางส่วนเหตุการณ์ DOM ทั่วไป:

เหตุการณ์ของเมาส์ เหตุการณ์แป้นพิมพ์ เหตุการณ์แบบฟอร์ม เหตุการณ์เอกสาร / หน้าต่าง
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

jQuery ไวยากรณ์สำหรับวิธีการจัดกิจกรรม

ใน jQuery ส่วนใหญ่เหตุการณ์ DOM มีวิธี jQuery เทียบเท่า

การกำหนดเหตุการณ์คลิกวรรคทั้งหมดบนหน้าเว็บที่คุณสามารถทำสิ่งนี้:

$("p").click();

ขั้นตอนต่อไปคือการกำหนดสิ่งที่ควรจะเกิดขึ้นเมื่อเหตุการณ์ไฟไหม้ คุณจะต้องผ่านฟังก์ชั่นที่จะมีเหตุการณ์นี้:

$("p").click(function(){
  // action goes here!!
});

ที่นิยมใช้วิธีการจัดกิจกรรม jQuery

$(document).ready()

$(document).ready() วิธีการช่วยให้เราสามารถดำเนินการฟังก์ชั่นเมื่อเอกสารถูกแปล้ เหตุการณ์นี้จะมีการอธิบายแล้วใน jQuery ไวยากรณ์ บท

click()

click() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์องค์ประกอบ HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อผู้ใช้คลิกที่องค์ประกอบ HTML

ตัวอย่างต่อไปนี้กล่าวว่าเมื่อเกิดเพลิงไหม้คลิกเหตุการณ์ใน <p> องค์ประกอบ; ซ่อนปัจจุบัน <p> องค์ประกอบ:

ตัวอย่าง

$("p").click(function(){
    $(this).hide();
});
ลองตัวเอง»

dblclick()

dblclick() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์องค์ประกอบ HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อผู้ใช้ดับเบิลคลิกที่องค์ประกอบ HTML:

ตัวอย่าง

$("p").dblclick(function(){
    $(this).hide();
});
ลองตัวเอง»

mouseenter()

mouseenter() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์องค์ประกอบ HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อตัวชี้เมาส์เข้าองค์ประกอบ HTML นี้:

ตัวอย่าง

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
ลองตัวเอง»

mouseleave()

mouseleave() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์องค์ประกอบ HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อตัวชี้เมาส์ออกจากองค์ประกอบ HTML นี้:

ตัวอย่าง

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
ลองตัวเอง»

mousedown()

mousedown() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์องค์ประกอบ HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อซ้ายปุ่มตรงกลางหรือขวาของเมาส์จะถูกกดลงในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML นี้:

ตัวอย่าง

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});
ลองตัวเอง»

mouseup()

mouseup() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์องค์ประกอบ HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อซ้าย, ปุ่มกลางของเมาส์หรือขวาถูกปล่อยออกมาในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML นี้:

ตัวอย่าง

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
ลองตัวเอง»

hover()

hover() วิธีการจะใช้เวลาสองฟังก์ชั่นและมีการรวมกันของการ mouseenter() และ mouseleave() วิธีการ

ฟังก์ชั่นแรกจะถูกดำเนินการเมื่อเมาส์เข้าองค์ประกอบ HTML และฟังก์ชั่นที่สองคือการดำเนินการเมื่อเมาส์ออกจากองค์ประกอบ HTML นี้:

ตัวอย่าง

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});
ลองตัวเอง»

focus()

focus() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์ไปยังเขตข้อมูลฟอร์ม HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อฟิลด์แบบฟอร์มที่ได้รับโฟกัส:

ตัวอย่าง

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
ลองตัวเอง»

blur()

blur() วิธีการแนบฟังก์ชั่นการจัดการเหตุการณ์ไปยังเขตข้อมูลฟอร์ม HTML

ฟังก์ชั่นจะถูกดำเนินการเมื่อเขตข้อมูลฟอร์มสูญเสียโฟกัส:

ตัวอย่าง

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});
ลองตัวเอง»

on() วิธี

on() วิธีการยึดติดอย่างใดอย่างหนึ่งหรือเหตุการณ์อื่น ๆ รถยกสำหรับองค์ประกอบที่เลือก

แนบเหตุการณ์คลิกไปยัง <p> องค์ประกอบ:

ตัวอย่าง

$("p").on("click", function(){
    $(this).hide();
});
ลองตัวเอง»

แนบจัดการเหตุการณ์หลายไปยัง <p> องค์ประกอบ:

ตัวอย่าง

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »

วิธีการจัดกิจกรรม jQuery

สำหรับเต็มอ้างอิงเหตุการณ์ jQuery โปรดไปที่เรา jQuery เหตุการณ์อ้างอิง


❮ก่อนหน้า ถัดไปบท❯