Безнадежный программист,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<style>
.hovered {
background-color: green !important;
color: white !important;
}
</style>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<table>
<caption>Table</caption>
</table>
<button>Button</button>
<script>
$('ul li').click(function() { // 1.1
$('<tr><td>' + $(this).text() + '</td></tr>')
.mouseenter(function() { // 1.2
$(this).css({ 'background-color': 'black', 'color': 'white' });
})
.toggle(function() { // 2.2
$(this).addClass('hovered');
}, function() {
$(this).removeClass('hovered');
})
.hide().appendTo($('table')).show(1000);
}).toggle(function(event) { // 3
$(this).css('border', '2px solid ' + (event.shiftKey ? 'red' : 'yellow'));
}, function() {
$(this).css('border', '');
});
$('button').hover(function() { // 2.1
$(this).css({ 'background-color': 'blue', 'color': 'white' });
}, function() {
$(this).css({ 'background-color': '', 'color': '' });
});
</script>
</body>
</html>
!important нужно, чтобы переопределить style-атрибут, который делает css().
Делегирование выглядит так:
$('ul').on('click', 'li', function() { });
$('table').on('mouseenter', 'tr', function() { });