<script>
$(function(){
var $li = $('.list li');
var $button = $('#button1')
var $text = $("#text1");
var $div = $("#div1")
// щелчок мышью
$li.click(function(){
// это относится к объекту, в котором в данный момент происходит событие, но это собственный объект js
// this.style.background = 'red';
// $(this) относится к объекту jquery, где в данный момент происходит событие.
$(this).css({'background':'gold'});
// Получите значение индекса объекта jquery через index() метод
alert($(this).index());
});
// Обычно используется вместе с кнопками.
$button.click(function(){
alert($text.val());
});
// Получите фокус
$text.focus(function(){
$(this).css({'background':'red'});
});
// потерять фокус
$text.blur(function(){
$(this).css({'background':'white'});
});
// мышь, ввод
$div.mouseover(function(){
$(this).css({'background':'gold'});
});
// мышь прочь
$div.mouseout(function() {
$(this).css({'background':'white'});
});
});
</script>
<div id="div1">
<ul class="list">
<li>текст списка</li>
<li>текст списка</li>
<li>текст списка</li>
</ul>
<input type="text" id="text1">
<input type="button" id="button1" value="Нажмите">
</div>
Общие события jQuery: