---
# System prepended metadata

title: Hi~前端工具們 - jQuery basic 2

---

#  Hi~前端工具們 - jQuery basic 2

```
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">

    <title>jQ</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="jquery-3.6.0.js"></script>
```

## jQuery 示範部分

`<script>`

```
  $(document).ready(function(){
    $('.btn').click(function(e){//按下按鈕後
      const value = $('.todo_input').val() 
      //把質拿出來(jquery裡面呼叫函式沒有傳東西就是get，有傳東西的時候就是set質)
      
      $('.todo_input').css('color','blue')
      //幫這個元素新增一個css
      $('.todo_input').val('') 
      //拿到質後就後清空，變成空字串
      //接著把質增加到.todos上去。
      $('.todos').append(`
        <div class="todo">
          ${value}
          <button class="btn_mark">done</button>
          <button class="btn_delete">delete</button>
        </div>`)
    })
```
  把東西放進去的函式append()類似innerHTML,
  還有一種叫prepend()往前面放

  刪除就是remove()
  
  ```
$('.btn_remove_all').click(function(){
  $('.todos').empty();
})
```
- 清空，同等於innerHTML='';
不可以用romove(),會把整個div刪除


- 刪除功能，要記得使用時間代理addEventListener

對todos監聽，click事件，對btn_delete作代理
在todos底下的每個btn_delete，click後，執行這個function

```
$('.todos').on('click','.btn_delete',function(e){
  $(e.target).parent().fadeOut()//or remove()
})
```

- 標記完成功能

```
$('.todos').on('click','.btn_mark',function(e){
      const todo =  $(e.target).parent();
      if(todo.hasClass('completed')){
        todo.css('text-decoration','none')
        todo.removeClass('completed')
        $(e.target).text('done')
      } else {
        todo.css('text-decoration','line-through')
        todo.addClass('completed')
        $(e.target).text('undone')
      }
    })
  });
```

`</script>`

其他

```
<style>
  .todo{
    padding: 12px;
    border: 1px solid grey;
  }
</style>
</head>

<body>
<input class="todo_input" type="text"/>
<button class="btn">add todo</button>
<button class="btn_remove_all">remove all todos</button>
<div class="todos">

</div>

<script>
</script>

</body>
</html>
```




