In this example we'll create a simple to-do list, with a series of default items that can be checked off. We can also allow new items to be added to the list and will apply the highlight
effect to new items as they are added.
Add the following HTML code to the
<body>
element of the template file:<div id="todo"> <h2>Todo List</h2> <ul> <li><label><input type="checkbox">Item 1</label></li> <li><label><input type="checkbox">Item 2</label></li> <li><label><input type="checkbox">Item 3</label></li> </ul> <input type="text" id="new"> <button id="add">Add</button> </div>
Add the behavior for our to-do list using the following code:
$("#add").click(function() { var newItem = $("#new"), text = newItem.val(); if (text) { var li = $("<li>"), label = $("<label>")...