Binding Events in jQuery

Almost every JavaScript event has its own jQuery method. For example, clicks on elements can be caught like this: $(selector).click(function).

Consider the following HTML code:

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

The CSS for it is:

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

Let's make it so that when you click on any li, an exclamation mark is displayed. Click on the list items:

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

Inside the bound function, this is available, referencing the element where the event occurred (in our case, the li that was clicked). This this can be used in JavaScript style, for example this.innerHTML or in jQuery style - for this, this this should be wrapped in $, like this: $(this).

Let's take the HTML code:

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

The following CSS styles are written to this code:

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

Let's make it so that when you click on li, '!' is added to the end. To check the work, click on the list items:

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

Make it so that when you click on every li, '?' is added to the beginning.

Given paragraphs. Make it so that when you click on each paragraph, its contents are displayed on the screen.

Given paragraphs with numbers. When you click on a paragraph, a square of the number it contains should appear in it.