Итак начнем с основ практики использования jQuery библиотеки, а именно создания to-do list или просто всем известной «тудушки» :). Что такое to-do list? Это список определенных запланированных заданий, которые надо выполнить или просто список событий. Реализовывать задачу будем с помощью браузерного хранения LockalStorage, что бы данные не удалялись во время перезагрузки.

Выглядеть «тудушка» будет следующим образом (демо):

Итак, для начала определим форму:

    <div id="todo">
        <h1>ToDoList</h1>
        <ul class="js_list"></ul>
        <input type="text" class="js_add_input">
        <button class="js_add_button">Add</button>
    </div>
	
    <script type="text/template" id="todo_item_template">
        <button class="js_item_remove_btn" type="button">X</button>
        <button class="js_item_edit_btn btn_edit" type="button">Edit</button>
        <button class="js_item_apply_btn btn_apply" type="button" style="display: none;">Apply</button>
        <input class="js_item_input" type="text" value="{{val}}" style="display: none;">
        <span class="js_item_text">{{val}}</span>
    </script>

Далее основные переменные:

var dom = $('#todo'),
	add_input = dom.find('.js_add_input'),
	add_btn = dom.find('.js_add_button'),
	list = dom.find('.js_list'), 
	list_arr = $.parseJSON(localStorage.getItem('todo') || '[]');
	item_template = $('#todo_item_template').text();

и серию методов:

function save() {
	localStorage.setItem('todo', JSON.stringify(list_arr))
}

function buildList() {
	list.html('');
	$(list_arr).each(function(index, text){
		var item = makeItem(text);
		list.append(item);
		setItemActions(item, index);
	})
};

function makeItem(value) {
	var li = $('<li>');
	li.html(item_template.replace(/{{val}}/g, value));
	return li;
}

function setItemActions(item, index) {
	var remove_btn = item.find('.js_item_remove_btn'),
		edit_btn = item.find('.js_item_edit_btn'),
		edit_input = item.find('.js_item_input'),
		item_text = item.find('.js_item_text');
	var apply_btn = item.find('.js_item_apply_btn');
	
	remove_btn.on('click', function() {
		list_arr.splice(index, 1);
		changeAction();
	});

	edit_btn.on('click', function() {
		edit_input.show();
		apply_btn.show();
		item_text.hide();
		edit_btn.hide();
	})
	
	apply_btn.on('click', function() {
		list_arr[index] = edit_input.val();
		changeAction();
	})
}

function changeAction() {
	buildList();
	save();
}

add_btn.on('click', function() {
	var text = add_input.val();
	list_arr.push(text);
	add_input.val('');
	changeAction();
});
buildList();

Данная реализация to-do list не самая простая, но до начала ее понимания следует прочитать книгу по основам jQuery.

Скачать реализацию можно по ссылке.