Gắn sự kiện trong jQuery

Hầu hết mọi sự kiện JavaScript đều có một phương thức jQuery tương ứng. Ví dụ, nhấp chuột vào các phần tử có thể được bắt như sau: $(selector).click(hàm).

Hãy xem xét mã HTML sau:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

CSS được viết cho nó:

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

Hãy làm sao cho khi nhấp vào bất kỳ li nào sẽ hiển thị dấu chấm than. Hãy nhấp vào các mục danh sách:

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

Bên trong hàm được gắn, this có sẵn, tham chiếu đến phần tử mà sự kiện xảy ra (trong trường hợp của chúng ta là li, nơi nhấp chuột diễn ra). this này có thể được sử dụng theo kiểu JavaScript, ví dụ, this.innerHTML hoặc theo kiểu jQuery - để làm điều này, this nên được bọc trong $, như thế này: $(this).

Lấy mã HTML:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Đối với mã này, các kiểu CSS sau được viết:

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

Hãy làm sao cho khi nhấp vào li thêm '!' vào cuối nó. Để kiểm tra hoạt động, hãy nhấp vào các mục danh sách:

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

Hãy làm sao cho khi nhấp chuột vào mỗi li, '?' được thêm vào đầu nó.

Các đoạn văn đã cho. Hãy làm sao cho khi nhấp chuột vào mỗi đoạn văn, nội dung của nó được hiển thị trên màn hình.

Các đoạn văn với số đã cho. Khi nhấn vào đoạn văn bình phương của số mà nó chứa sẽ xuất hiện trong đó.