jQuery

1. 事件發生 (event) 2. 找到目標 (traversing & DOM) 3. 處理 (manipulate)

Back to top

點擊按鈕 (click)，取得連結 (prop)，定位連結 (offset)，滑行到頂端 (scrollTop)。 參考：https://codepen.io/mistborn/pen/gQdNeB

<div id="header">header</div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium distinctio repudiandae commodi excepturi unde assumenda voluptatibus aperiam molestias ab sunt culpa, aliquid nulla ex ea tempore animi esse? Laudantium quas vero tempore. Ipsum totam consequuntur veritatis adipisci animi aliquam veniam, quisquam, cumque sit voluptatum sunt similique illum, error quia? Natus expedita quibusdam voluptatum quod voluptatem tempore, aliquid sequi accusantium suscipit adipisci temporibus consequuntur, et assumenda, praesentium quo aspernatur architecto. Nulla quae eveniet, provident dolor dicta, veritatis velit optio perspiciatis officiis quidem suscipit ducimus sint nam ex porro cum doloribus iusto deserunt. Porro labore tenetur praesentium consectetur, rerum iusto ratione dolorum ad aperiam provident? Molestiae quaerat optio recusandae nostrum adipisci amet dolorum eaque, ab odit qui distinctio provident aperiam tenetur! Ullam tempora voluptas libero minus magni quia sequi autem reprehenderit deserunt, dolorem nemo illum officiis tempore voluptatem corporis provident ratione sed vel laudantium omnis aperiam! In, illum iste molestiae provident iusto sit obcaecati necessitatibus voluptatem dolores delectus facilis explicabo fuga voluptatum nihil consectetur blanditiis ut consequuntur alias voluptates eveniet maiores odit autem corrupti natus! Odio, mollitia? Accusamus voluptate accusantium aspernatur ad dolores, voluptatibus, quam rerum et totam architecto, odio ullam enim nulla incidunt. Esse cupiditate, nisi voluptatum fugit dolores nemo maxime error atque? Cum odit rem eius illum aliquam mollitia, facere deleniti consequuntur quae! Recusandae ipsa velit provident voluptatem laborum quae dolore eos, ut illum quod praesentium, quasi, architecto voluptatum vero eum minima sapiente facere! Perspiciatis quo maiores doloremque ipsa ratione repudiandae ad cumque minus asperiores? Ipsa odio dolorum quisquam quis saepe cupiditate assumenda exercitationem ipsum, veritatis veniam aliquam harum magnam voluptas neque! Modi distinctio officia nam magnam non. Maxime atque ad id? Nesciunt perspiciatis quod optio tempora doloribus doloremque facilis eos corporis quia ducimus mollitia voluptatem quaerat neque, in placeat veniam vitae illum labore quas maiores officia deleniti corrupti ipsum? Voluptatum est tempora doloremque. Rerum soluta dolore facilis, harum cumque quo dolor. Nisi eius sequi facere nemo illo? Assumenda impedit incidunt magnam atque neque optio doloremque. Ipsa explicabo recusandae officiis, provident in ipsum sint ad quidem, sed vitae asperiores maiores? Pariatur illum omnis nobis laudantium nulla, molestiae aspernatur consequatur magnam placeat sequi blanditiis iste ex quidem magni quae ducimus ipsam delectus ipsa adipisci sunt autem impedit harum reprehenderit rem! Harum nam atque vero tempore sapiente vel libero sed ducimus quo dolorum quaerat, neque adipisci reprehenderit qui quod tempora cupiditate officiis sit, nostrum laudantium! Exercitationem modi sint quasi magni iure quas maiores obcaecati quod id ullam? Quisquam sequi perferendis praesentium ipsum nostrum doloribus officiis commodi est dolor repellat velit voluptates provident non excepturi incidunt delectus quia atque, repellendus unde suscipit reiciendis. Tempora, temporibus repudiandae? Delectus atque aperiam voluptatum doloremque laboriosam. Assumenda deserunt dolorum hic illo eius, suscipit consequuntur blanditiis delectus quo labore sit accusamus asperiores beatae magnam doloremque eveniet natus excepturi obcaecati tempore quos, inventore est, eos ducimus aliquam. Voluptatem, similique accusantium. Perferendis, repudiandae quaerat! Esse saepe accusamus, harum atque molestias illum, non, quod voluptas laudantium eaque ut repellat? Accusantium aliquam explicabo veniam modi, voluptatibus debitis fugiat consectetur odio ullam reiciendis magni libero nobis molestiae dicta aut rem eveniet excepturi, minus, dolorem hic! Eum excepturi eaque tempora deleniti quasi ratione aperiam adipisci qui quia odio praesentium aliquam molestiae, ea magnam voluptatibus obcaecati veniam a consectetur laborum? Molestias eveniet quas provident voluptatem tenetur ipsum qui praesentium, fugit numquam non? Amet nihil assumenda fugiat voluptatibus nobis quidem fuga sint, harum magni, vitae impedit eveniet id illum. Quidem accusantium ipsum perferendis rem dolor placeat, nesciunt natus! Eius commodi et quaerat autem rem quo magni, obcaecati similique incidunt laboriosam natus sed vitae aspernatur? Porro nobis accusantium eveniet vitae eum ut ratione assumenda error expedita unde! Aliquam odio eligendi, perferendis sed placeat eos nulla dolor impedit aut nihil dignissimos possimus sint ipsum. Eius aliquam eligendi distinctio dolorum accusamus necessitatibus magni in doloribus labore. Quasi a nostrum dolorem quos tenetur voluptatum sit similique odio modi, quisquam fugiat hic deserunt harum mollitia assumenda recusandae saepe veritatis reiciendis. Vero quis nemo quos sed veniam saepe minus voluptate neque, delectus harum quo inventore magni nesciunt accusantium debitis? Voluptatum, laborum aliquid. Et, adipisci mollitia earum nostrum laborum consequatur corrupti blanditiis. Unde a amet veniam repellat necessitatibus est fuga natus ut, quis blanditiis tenetur id libero ipsum, quasi totam aliquid. Delectus id nihil repellendus quaerat quisquam quas consequuntur, velit iusto aliquid, commodi similique mollitia veniam ipsa dignissimos tempore sequi maxime quidem sapiente hic ipsum! Esse labore molestiae excepturi corporis cum non ea, numquam quisquam nihil nisi libero est quasi pariatur rem suscipit delectus dolore, voluptate facilis nulla dignissimos iure voluptatibus aspernatur exercitationem! Repellendus odit dignissimos natus in rem reprehenderit, ipsam cupiditate consequuntur, error facere aliquid labore. Voluptates qui quis soluta totam consequatur! Ab aut nisi eum dolorum exercitationem officiis quidem dolores cupiditate molestiae harum vitae veniam numquam tempore, qui minima quia distinctio architecto nihil enim eius iure corrupti! Mollitia aperiam, a eveniet dignissimos velit natus nostrum quisquam laborum suscipit enim nihil tempora recusandae! Fugiat molestias animi iure dolor eaque amet nemo fugit itaque dicta commodi ipsa exercitationem hic similique quo facilis, consequuntur delectus et nam quas earum necessitatibus! Quas natus debitis, maiores rerum vero illo vel temporibus fugiat non quae accusantium ipsa at amet a sed reiciendis dignissimos, doloremque sunt pariatur dolorem assumenda iure quibusdam provident quaerat! Voluptatum id mollitia at itaque minus perspiciatis et ab saepe iste vitae aut, ex amet, ut deleniti, cum explicabo. Corrupti rem eligendi quas repudiandae! Sequi vero id labore ea! Vitae deserunt beatae quibusdam minus maiores quisquam incidunt cumque neque natus reprehenderit? Impedit dignissimos exercitationem non repudiandae explicabo nemo cupiditate reiciendis praesentium quasi vel laborum voluptatibus ipsam, fugit, quae deleniti? Illo animi obcaecati soluta excepturi, magni temporibus culpa deleniti in nemo, blanditiis eaque provident placeat ratione non dolorum delectus porro natus quaerat quibusdam. Hic ratione ea aliquam voluptate sequi inventore sit quos totam facere cupiditate perferendis, magnam saepe aspernatur rerum et quod corrupti ullam distinctio reprehenderit consectetur! Magni suscipit blanditiis veniam qui, mollitia amet, labore hic alias fuga enim adipisci laborum est animi? Incidunt atque temporibus maiores perferendis, consequatur, quae ad numquam adipisci cupiditate veniam id?</div>
<div class="footer">footer</div>
<a href="#header" class="back">top</a>

body {
  text-align: center;
  margin: 0;
}

#header {
  font-size: 40px;
  color: #fff;
  background: #555;
}

.footer {
  font-size: 40px;
  color: #fff;
  background: #555;
}

.content {
  margin: 10px auto;
  width: 50%;
}

.back {
  position: fixed;
  top: 90%;
  left: 90%;
  padding: 10px;
  color: #eee;
  background: #999;
  text-decoration: none;
}

$(document).ready(function(e){

  //click
  $('.back').click(function(e){
    //stop go to top
    e.preventDefault();
    //get header href 
    var url = $(this).attr('href');
    //offset header
    var offset = $(url).offset();
    //scroll top
    $('html, body').animate({scrollTop: offset.top});
  });
  
});

Scroll trigger

滾輪移動 (scroll) 到定點 (scrollTop)，照片顯現 (opacity)，可以用 2 種方法 1.jQuery (animate) 2.CSS (transition)。 參考：https://codepen.io/mistborn/pen/MzPgyB

<div id="header">header</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam voluptatibus ipsum iste? Vel, quasi! Deserunt veniam reiciendis repudiandae sit dicta deleniti, hic nulla magni eligendi voluptatum. Et quo ipsam aliquid sunt mollitia illo ipsa reiciendis pariatur, ad voluptate iure eum minus, velit eveniet dolorum expedita neque nobis dolore eos dolor quas veniam? Excepturi laborum qui harum voluptas quis, obcaecati quo eos corporis odit aspernatur dolorem et doloremque at! Harum excepturi odio quidem sed. Nam sapiente laudantium, error sequi fuga veniam obcaecati fugit consequuntur quam quod ad eum aliquam ut non neque vero voluptatibus minus corporis sint libero distinctio omnis quia possimus! Nisi iusto, eligendi nostrum architecto et minima debitis voluptatum laudantium suscipit, a, nobis sed. Corporis, repellat dolorum debitis distinctio quam molestiae asperiores porro unde, optio vero, incidunt modi saepe! Fugit quae voluptatibus ab vero a tenetur quaerat ipsum facere, exercitationem ducimus cupiditate blanditiis dicta aliquam laboriosam similique possimus sit aspernatur iste numquam dolore non ipsam. Facilis quae ullam repudiandae nobis sequi, repellat molestiae ea cumque voluptas, sed nam totam deleniti necessitatibus eius dolores saepe facere voluptate recusandae eaque optio animi maxime repellendus! Aliquam voluptatem nostrum dicta aut eveniet repellat iure amet ipsam voluptates, pariatur error et tempore debitis consequatur tempora, inventore, ratione sapiente quam magnam. Itaque sint commodi veniam numquam repellat iure, ipsum eaque neque fugit, expedita laboriosam consequuntur quod dolor modi! Quasi, atque. Nihil magnam ullam, sunt, accusamus earum minima aspernatur placeat cupiditate vitae voluptas blanditiis, quaerat accusantium aut sapiente autem perspiciatis eius voluptatem rerum quod at dignissimos sed voluptate impedit similique. Error enim expedita rerum officia ratione quod ab quae animi vitae ullam quaerat, illo quisquam soluta deleniti beatae amet nesciunt iusto alias adipisci fuga facilis praesentium necessitatibus? Beatae tempora natus accusamus vitae voluptate quis quam impedit, fugiat provident doloremque distinctio voluptates necessitatibus. Eos fuga, quisquam tenetur veniam ullam quaerat voluptatum eveniet delectus. Neque inventore est nam vitae fugit, voluptatum assumenda, dicta alias architecto iste voluptate aliquam animi omnis consectetur tempora labore, numquam rerum. Ipsam ipsum earum et cum vel maxime porro, tempore beatae nam consequuntur, unde ratione. Quaerat consectetur at quo harum similique atque totam earum ipsam commodi inventore blanditiis, neque ab eaque, a libero cumque corporis labore placeat beatae. Explicabo consequuntur ipsa, eligendi illo laboriosam quasi ducimus unde ad eveniet at sed amet eum atque! Incidunt ipsum sint tempore fugit? Fuga unde eligendi fugit nobis porro. Nostrum possimus impedit quisquam quasi voluptate accusantium placeat molestiae consectetur! Quos, ad. Quibusdam ipsam similique veritatis ad voluptatem! Modi architecto cum, labore, illo rerum itaque, qui sunt voluptatem necessitatibus debitis iusto libero animi aliquam vel voluptates! Tempora totam rem corporis sapiente optio perspiciatis praesentium dolorem tempore explicabo. Possimus sapiente officiis maxime delectus dolor, dolore laboriosam accusamus maiores vitae ex, minus ab? Labore possimus, maxime sint architecto nobis suscipit quidem quis minus deserunt laudantium cumque eos dicta facere asperiores, ipsa est ipsum! Dolore earum id quis fuga illum. Omnis, quibusdam. Numquam, a obcaecati consequatur quos voluptatum accusantium, quae expedita reiciendis suscipit corrupti maiores temporibus laudantium architecto, perspiciatis provident quo dolore.</p>
  <div class="image">
    <img src="http://lorempixel.com/1920/1080" alt="image">
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque autem nobis distinctio iste labore? Nemo beatae voluptate ut necessitatibus non inventore earum ducimus? Odit neque sequi aperiam adipisci minus aliquam possimus assumenda illum in! Quidem rem officiis, ex expedita possimus modi maxime commodi perspiciatis aspernatur quae vitae laboriosam illo dolorum ratione distinctio quis obcaecati mollitia quasi repellat rerum. Quos quisquam facilis dolorum velit rerum quas reprehenderit, perferendis beatae est optio ducimus deserunt incidunt voluptatibus aliquid. Accusamus nesciunt veritatis facere exercitationem expedita a aspernatur labore repellendus. Quae sunt excepturi accusantium natus veniam inventore soluta eius aperiam nemo asperiores repellat necessitatibus odio, facilis itaque vel voluptatem magnam distinctio, ullam exercitationem. Placeat laborum nisi mollitia reprehenderit cupiditate architecto ea omnis corporis? Dolorem mollitia amet maiores animi reiciendis, modi totam similique excepturi sint laborum a, magnam ab, illo itaque accusantium. Non nisi cupiditate facilis. Cumque optio amet, in suscipit saepe ad vero dolore asperiores facere autem eum nobis deleniti assumenda, dolor rem quos repudiandae praesentium inventore nihil aspernatur quam officiis blanditiis velit ipsum. Minus accusantium velit, ut, aut quidem deleniti corporis vitae voluptate voluptatum libero id sequi doloribus, fuga aliquam perferendis sunt nam eius doloremque porro harum rem! Consectetur iusto perspiciatis reiciendis explicabo modi aspernatur. Iste doloremque fuga laborum maiores aperiam dolores velit veniam placeat? Error consequatur laboriosam esse dolores earum est, molestiae sit tenetur commodi eveniet ullam fugiat, nobis consectetur. Possimus non quia illo commodi. Illo repudiandae sint, ut molestias a magni eveniet consectetur explicabo quibusdam porro excepturi sunt quas molestiae sapiente, quidem delectus consequuntur, numquam deleniti placeat aspernatur provident reprehenderit ipsa? Doloremque facilis labore fugiat asperiores dolores maxime, quaerat exercitationem reiciendis accusamus nemo, nobis iusto architecto. Perspiciatis voluptatibus repellat esse, ipsa accusantium quod error aliquam voluptate. Sit maiores cum est nulla in ex nostrum esse adipisci temporibus? Dolores eos maxime molestias explicabo quia similique excepturi ex, saepe facere hic aperiam reprehenderit ad optio esse magni cupiditate animi ratione nostrum numquam. Eum modi quis possimus, in ipsum omnis quod iusto magni asperiores dignissimos, iste dolorum error est rem excepturi iure velit nam tempora maxime perferendis delectus necessitatibus facilis soluta? Fuga nobis, natus assumenda modi unde nemo possimus quis blanditiis beatae velit porro consequuntur omnis debitis adipisci itaque iusto odio nisi perferendis. Eveniet fugit a, sit eligendi ab nam, obcaecati iusto consequuntur magnam veritatis temporibus eius. Consequuntur facilis voluptas laborum, saepe quisquam reprehenderit commodi odio magnam, animi, blanditiis excepturi iusto harum praesentium officia enim aperiam eveniet dicta minima voluptatibus molestias! Consectetur fuga animi deleniti, harum reprehenderit nulla veritatis illum delectus, quo nisi aperiam voluptatem iste eius amet, laboriosam neque ullam fugiat ducimus cum! Atque suscipit tempore velit quia adipisci delectus doloribus aut porro necessitatibus doloremque maiores natus consequuntur inventore temporibus totam dolorem iure nulla rem quidem, a repudiandae laudantium beatae dignissimos! Itaque laborum ducimus eligendi voluptate. Odio corrupti debitis itaque. Perferendis iusto tenetur placeat laborum, aliquam magni quidem delectus atque officiis eius perspiciatis et, esse impedit id dolorem nam. Iusto eligendi quaerat beatae. Officiis modi aliquid debitis veniam iure consequatur nisi reprehenderit nostrum blanditiis.</p>
</div>
<div class="footer">footer</div>

body {
  text-align: center;
  margin: 0;
}

#header {
  font-size: 40px;
  color: #fff;
  background: #555;
}

.footer {
  font-size: 40px;
  color: #fff;
  background: #555;
}

.content {
  margin: 10px auto;
  width: 50%;
}

img {
  opacity: 0.3;
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 4s;
}

img.show {
  opacity: 1;
}

$(document).ready(function(e){
  
  //scroll to trigger
  $(document).scroll(function(e){
     if($(this).scrollTop() > 700){
       //change opacity
       // $('img').stop().animate({opacity: 1});
       $('img').addClass('show');
     };
  });

});

Full page alert box

點擊按鈕 (click)，資訊出現 (fadeIn)，點擊按鈕 (click)，資訊消失 (fadeOut)，可以用 opacity，但按鈕 (open) 要設定 position + z-index。 參考：https://codepen.io/mistborn/pen/VVEmxa

<button class="open">more</button>

<div class="container">
  <div class="box">
    <div class="title">
      Hello
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa voluptatem eligendi reiciendis esse at harum, aut ipsam omnis alias.
    </div>
    <div class="close">
      <button>close</button>
    </div>
  </div>
</div>

.container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
}

.box {
  margin: 0 auto;
  margin-top: 10%;
  width: 500px;
  padding: 30px;
  border: 3px solid #ddd;
  text-align: center;
}

.content {
  margin: 10px 0;
}

$(document).ready(function(e){
  
  //click open
  $('.open').click(function(e){
    //display change 
    $('.container').fadeIn();
  });
  
  //click close
  $('.close').click(function(e){
    //display change 
    $('.container').fadeOut();
  }); 
  
});

Show bigger image

點圖片停止連結 (e.preventDefault)，取出 (prop) 圖片網址 (url)，創造一個標籤，網址寫進 (prop) 標籤，標籤丟到容器裡面 (html)。 參考：https://codepen.io/mistborn/pen/wQxwLO

<a href="http://lorempixel.com/1920/1080">
  <img src="http://lorempixel.com/400/200" alt="image">
</a>

<div class="container">
  <div class="picture"></div>
</div>

.container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
}

.picture {
  margin: 0 auto;
  margin-top: 10%;
  max-width: 80%;
  height: auto;
}

.picture img {
  width: 100%;
  height: auto;
}

$(document).ready(function(e){
  
  //click image
  $('a').click(function(e){
  //stop link to website
    e.preventDefalt;
  //take href create img tag
    var url = $(this).prop('href');
    var image = $('<img>');
    image.prop('src', url);
  //show on screen
    $('.picture').html(image);
    $('.container').fadeIn();
    
  });

  //click back to original screen
  $('.container').click(function(e){
    $(this).fadeOut();
  });
  
});

Tabs

點擊連結 (click)，取得點擊連結順序 (index)， 清掉 (removeClass) 原連結的 class (active)，加上 (addClass) 點擊連結的 class (active)，清掉 (removeClass) 原內容的 class (active)，加上 (addClass) 點擊連結的 class (active)。 參考：https://codepen.io/mistborn/pen/QJVJBW

<ul class="tabs">
  <li class="active">tab-1</li>
  <li>tab-2</li>
  <li>tab-3</li>
</ul>

<div class="container">
  <div class="content active">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, nam.
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, rerum consequuntur. Illo non est doloremque nulla, corrupti quidem ex. Veniam!
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt cupiditate recusandae, voluptatibus enim in praesentium minima repudiandae veniam vero optio sunt voluptate eos iure pariatur atque ipsum. Atque, quia?
  </div>
</div>

.tabs {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

.tabs:after {
  content: "";
  display: table;
  clear: both;
}

.tabs li {
  padding: 5px;
  margin-right: 10px;
  float: left;
  background: #ccc;
  cursor: pointer;
}

.tabs li.active, .tabs li:hover {
  background: #666;
  color: #fff;
}

.container {
  width: 300px;
  padding: 10px;
}

.content {
  display: none;
}

.content.active {
  display: block;
}

$(document).ready(function(e){
  
  //click tabs
  $('.tabs li').click(function(e){
    //get tabs order
    var index = $(e.currentTarget).index();
    //remove active from li and add active to click li
    $('.tabs li').removeClass('active').eq(index).addClass('active');
    //remove active from content and add active to click content
    $('.content').removeClass('active').eq(index).addClass('active');
  });
  
});

To do list

Create 點擊 (click) 按鈕 (+)，跳出視窗 (prompt) 輸入內容，複製 (clone) 第一個項目 (li)，把內容換成新的 (html、val)，放到清單的最後一個 (append)。 Update 雙擊項目 (on dblclick)，顯示修改框 (addClass)，輸入內容，離開 (on blur)，將項目換成新內容 (html)。 Delete 點擊按鈕 (x)，跳出警示框 (confirm)，刪除內容 (remove)。 參考：https://codepen.io/mistborn/pen/GwdaxX

<ul id="todo-list">
  <li class="list-item">
    <input type="checkbox" />
    <span class="content">todo</span>
    <input type="text" value="todo" />
    <button class='delete' data-action='delete'>x</button>
  </li>
  <li class="list-item">
    <input type="checkbox" />
    <span class="content">todo</span>
    <input type="text" value="todo" />
    <button class='delete' data-action='delete'>x</button>
  </li>
  <li class="list-item">
    <input type="checkbox" />
    <span class="content">todo</span>
    <input type="text" value="todo" />
    <button class='delete' data-action='delete'>x</button>
  </li>
</ul>

<button class='add'>+</button>

body {
  margin: 0;
  padding: 30px;
}

ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}

#todo-list li.active {
  background: #ccc;
}

li [type="text"] {
  display: none;
}

#todo-list .editing .content {
  display: none;
}

#todo-list .editing [type='text'] {
  display: inline;
  color: black;
}

.delete {
  display: none;
  padding: 3px;
  border: 1px solid #555;
  background: #dde3f1;
}

li:hover .delete{
  display: inline;
}

.add {
  display: block;
  width: 100%;
  background: #f3bab3;
}

$(document).ready(function(){
  
  //create
  $('.add').click(function(e){
    var todo = prompt('what to do');
    var clone = $('#todo-list li').eq(0).clone();
    clone.find('.content').html(todo);
    clone.find('[type="text"]').val(todo);
    $('#todo-list').append(clone);
  });
  
  //update
  $('#todo-list').on('dblclick', 'li', function(e){
    $(this).addClass('editing');
    $(this).find('[type="text"]').focus();
  });
  $('#todo-list').on('blur', '[type="text"]', function(e){
    var write = $(this).val();
    $(this).siblings('.content').html(write);
    $(this).closest('li').removeClass('editing');
  });
  
  //delete
  $('#todo-list .delete').click(function(e){
    var check = confirm('Are you sure?');
    if (check) {
      $(this).closest('li').remove();
    }
  });
});