jQuery'de Olay Bağlama

Hemen hemen her JavaScript olayına karşılık bir jQuery metodu vardır. Örneğin, elementlere tıklama şu şekilde yakalanabilir: $(seçici).click(fonksiyon).

Aşağıdaki HTML kodunu inceleyelim:

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

Bunun için şu CSS yazılmıştır:

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

Herhangi bir li öğesine tıklandığında ünlem işareti çıkmasını sağlayalım. Liste öğelerine tıklayarak deneyin:

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

Bağlanan fonksiyonun içinde, olayın meydana geldiği elemente (bizim durumumuzda tıklanan li) referans eden this kullanılabilir. Bu this, JavaScript tarzında, örneğin this.innerHTML şeklinde veya jQuery tarzında - bunun için bu this $ içine alınmalıdır, şu şekilde: $(this).

Şu HTML kodunu alalım:

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

Bu kod için aşağıdaki CSS stilleri yazılmıştır:

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

Bir li öğesine tıklandığında sonuna '!' eklenmesini sağlayalım. Çalışmasını test etmek için liste öğelerine tıklayın:

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

Her li öğesine tıklandığında başına '?' eklenmesini sağlayın.

Paragraflar verilmiştir. Her paragrafa tıklandığında ekrana içeriğinin yazılmasını sağlayın.

İçinde sayılar olan paragraflar verilmiştir. Paragrafa tıklandığında içerdiği sayının karesi paragrafta görünmelidir.