study-note

DOM操作実践

目次

基本

課題1

<input type="text" id="itemInput">
<button id="addButton">追加</button>
<ul id="itemList"></ul>


解答例: ```coffeescript $ -> $('#addButton').on 'click', -> text = $('#itemInput').val() return unless text?.trim() li = $("
  • #{text}
  • ") $('#itemList').append li li.on 'click', -> $(this).remove() $('#itemInput').val('') ``` - `$->`:DOM構築完了時に実行する - `text?`:=`text != null`(`null`または`undefined`ではない) - `.trim`:空白入力の排除 - `unless`:早期リターン

    課題2

    <input id="taskInput">
    <button id="addTask">追加</button>
    <ul class="taskList"></ul>
    


    解答例: ```coffeescript $ -> $("#addTask").on 'click', -> text = $("#taskInput").val() return unless text?.trim() li = $("
  • #{text}
  • ") $(".taskList").append li li.on 'click', -> $(this).remove() $("#taskInput").val('') ```

    課題3

    <input id="itemInput">
    <ul id="itemList"></ul>
    


    解答例: ```coffeescript $ -> $("#itemInput").on 'keypress', (evt) -> if evt.which == 13 text = $("#itemInput").val() return unless text?.trim() li = $("
  • #{text}
  • ") $("#itemList").append li li.on 'click', -> $(this).remove() $("#itemInput").val('') ```

    課題4

    <input id="noteInput">
    <button id="addNote">追加</button>
    <button id="clearAll">全削除</button>
    <ul id="noteList"></ul>
    


    解答例: ```coffeescript $ -> $('#clearAll').on 'click', -> $('#noteList .notes').remove() $('#addNote').on 'click', -> text = $('#noteInput').val() return unless text?.trim() li = $("
  • #{text}
  • ") $('#noteList').append li $('#noteInput').val('') ``` </datails>
    ## 応用 ### 課題1:チェック付きToDo ```html ``` - 追加時、`
  • `の中にチェックボックス+ラベルを入れる - チェックされた項目は横線 - チェック解除で横線は外れる
    解答例: ```coffeescript $ -> $("#addTodo").on 'click', -> text = $("#todoInput").val() return unless text?.trim() li = $("
  • ") $("#todoList").append li $("#todoInput").val('') $("#todoList").on 'click', (e) -> checkbox = $(e.target) if checkbox.prop('checked') checkbox.closest('li').css 'text-decoration', 'line-through' else checkbox.closest('li').css 'text-decoration', 'none' ``` - 改善例:`toggleClass('done')`にして、CSS側で`text-decoration`を管理
    ### 課題2:ダブルクリックでリスト項目を編集 ```html
      ``` - `
    • `をダブルクリックすると、入力欄に変わる - 編集後にEnterを押すと確定し、テキスト表示に戻る ### 課題3:リアルタイム検索フィルター ```html
      • Apple
      • Banana
      • Cherry
      ``` - `#filterInput`に文字を入力すると、`filterList li`の中で一致しない要素は非表示になる(大文字小文字は無視)