การผูกเหตุการณ์ใน jQuery

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

พิจารณาโค้ด HTML ต่อไปนี้:

<ul>
	<li>ข้อความ</li>
	<li>ข้อความ</li>
	<li>ข้อความ</li>
</ul>

สำหรับโค้ดนี้ได้เขียน CSS ไว้:

li {
	width: 100px;
	cursor: pointer;
}

มาทำให้เมื่อคลิกที่ li ใด ๆ จะแสดง เครื่องหมายอัศเจรีย์ ลองคลิกที่รายการ รายการ:

$('li').click(function() {
	alert('!');
});

ภายในฟังก์ชันที่ถูกผูก จะสามารถเข้าถึง this ได้ ซึ่งอ้างอิงถึงองค์ประกอบที่เกิด เหตุการณ์ขึ้น (ในกรณีของเราคือ li ที่ ถูกคลิก) this นี้สามารถใช้ในสไตล์ ของ JavaScript ได้ เช่น this.innerHTML หรือ ในสไตล์ของ jQuery - สำหรับการนี้ this ควร ถูกห่อด้วย $ ดังนี้: $(this)

ใช้โค้ด HTML:

<ul>
	<li>ข้อความ</li>
	<li>ข้อความ</li>
	<li>ข้อความ</li>
</ul>

สำหรับโค้ดนี้ได้เขียนสไตล์ CSS ต่อไปนี้:

li {
	width: 100px;
}
li:hover {
	color: red;
	cursor: pointer;
}

มาทำให้เมื่อคลิกที่ li จะเพิ่ม '!' เข้าไปท้าย เพื่อทดสอบการทำงาน ลองคลิก ที่รายการรายการ:

$('li').click(function() {
	$(this).append('!');
});

ทำให้เมื่อคลิก ที่แต่ละ li เพิ่ม '?' เข้าไปที่ต้น

มีย่อหน้า ให้ทำการเมื่อคลิก ที่แต่ละย่อหน้า ให้แสดงเนื้อหาของมัน ออกมาบนหน้าจอ

มีย่อหน้าที่มีตัวเลข เมื่อกดที่ย่อหน้า ควรแสดงกำลังสองของตัวเลข ที่มันบรรจุอยู่