讓我們用我們所學(xué)的概念來創(chuàng)建一個(gè)To-Do列表項(xiàng)目。

“待辦事項(xiàng)”列表可以將新項(xiàng)目添加到列表中，也可以刪除現(xiàn)有項(xiàng)目。

首先，我們創(chuàng)建HTML：

<h1>My To-Do List</h1>
 <input type="text" placeholder="New item" /> 
 <button id="add">Add
 </button>
 <ol id="mylist"></ol>

點(diǎn)擊按鈕應(yīng)該將輸入字段的值添加到我們的<ol>列表中

 <h1>Some heading</>

    <ol>

      <>One</li>

      <li>Two</li>

    </>

現(xiàn)在，準(zhǔn)備HTML，我們可以開始編寫我們的jQuery代碼。

首先，我們處理按鈕的點(diǎn)擊事件：

$(function() {   $("#add").on("click", function() {     //event handler   }); });

在事件處理程序中，我們選擇輸入字段的值并創(chuàng)建一個(gè)新的<li>元素，并將其添加到列表中：

var val = $("input").val(); 
if(val !== '') 
{   var elem = $("<li></li>").text(val);   
$(elem).append("<button>X</button>");   
$("#mylist").append(elem);   
$("input").val(""); 
//clear the input }

上面的代碼將輸入字段的值分配給val變量。 if語(yǔ)句檢查該值是否為空，然后創(chuàng)建一個(gè)新的<li>元素。 添加一個(gè)刪除它的按鈕，之后將新創(chuàng)建的元素添加到<ol id =“mylist”>列表中。

以下是完整的代碼：

$(function() 
{   $("#add").on("click", function() 
{     var val = $("input").val();     
if(val !== '') 
{       var elem = $("<li></li>").text(val);       
\$(elem).append("<button>X</button>");       
$("#mylist").append(elem);       
$("input").val("");     }   }); });

刪除功能還沒有實(shí)現(xiàn)。 我們將在下一節(jié)中處理它！

var e = $("<div>< >"); ("#test").append( );

剩下要做的就是處理class =“rem”按鈕上的click事件，并從列表中刪除相應(yīng)的<li>元素。

$(".rem").on("click", function() {   $(this).parent().remove(); });

請(qǐng)記住，這是當(dāng)前的對(duì)象。 上面的代碼移除了當(dāng)前對(duì)象的父對(duì)象，在我們的例子中，它是remove按鈕的父對(duì)象，<li>元素。

完整的代碼：

$(function() {
  $("#add").on("click", function() {
    var val = $("input").val();
    if(val !== '') {
     var elem = $("<li></li>").text(val);
     $(elem).append("<button class='rem'>X</button>");
     $("#mylist").append(elem);
     $("input").val("");
     $(".rem").on("click", function() {
      $(this).parent().remove();
     });
    }
  });
});

“待辦事項(xiàng)清單列表”僅僅是一個(gè)簡(jiǎn)短的演示，建立一個(gè)簡(jiǎn)單的項(xiàng)目說明如何處理事件。