[TOC] >[success] # 前端的簡單概念 >[danger] ##### 編寫一個簡單的控制臺輸出函數 ~~~ 1.平常在控制臺輸入我們使用console.log('1111') 2.簡單的縮寫定義一個函數，調用這個函數觸發console.log ~~~ ~~~ var log = function() { console.log.apply(console, arguments) } log("代碼開始") ~~~ >[danger] ##### 基本概念介紹 ~~~ 1.js 的注釋 單行注釋 // 2.js 的注釋 多行注釋/* */ 3.變量聲明 var a = 1 4.多行變量聲明 使用 ` `包裹住反引號(數字 1 左邊的按鍵) 5.js 的布爾值是 true 和 false 6.js 用來表示空的關鍵字有 undefined 和 null 兩個，第一個是未定義，第二個是對象為空 7.函數的定義 兩種，第一種正常定義函數，第二種匿名函數 8.js 列表叫數組，只是 append 變成了 push 9.js 中字典叫做對象，并且可以省略 key 的引號 ~~~ * 下面的代碼是對 7,8,9 的一展示 ~~~ // 命名函數 function greeting(){ log('hello') } // 匿名函數 var greeting = function() { log('hello') } ~~~ ~~~ var arr = [1, 2, 3] arr.push(4) ~~~ ~~~ var obj = { 'key': 'value', name: 'gua', } log('object key', obj.key, obj['key']) ~~~ >[success] # 簡單的事件操作 ~~~ 1.js 是操作 DOM對象的 ，介紹一個比較好用的獲取方法，但在特定瀏覽器會出現不兼容的問題querySelector // 元素選擇器 var body = document.querySelector('body') // class 選擇器, 用的是 .類名 var form = document.querySelector('.login-form') // id 選擇器, 用的是 #id var loginButton = document.querySelector('#id-button-login') ~~~ >[danger] ##### 簡單案例了解 -- querySelector ~~~ <div class="login-form"> <input id="id-input-username" class='gua-input' type="text" value="gua"> <br> <input id="id-input-password" class='gua-input' type="password" value="123"> <br> <button id="id-button-login">登錄按鈕</button> </div> <h1 id='id-msg'></h1> <script> var user = document.querySelector('#id-input-username') var userValue = user.value user.value = 'set value' </script> ~~~ >[danger] ##### 將文字插入標簽的指定位置 -- insertAdajcentHTML ~~~ 四個指定位置的值： 1.beforeBegin --插入到標簽開始前 2.afterBegin -- 插入到標簽開始標記之后 3.beforeEnd --插入到標簽結束標記前 4.afterEnd --插入到標簽結束標記后 使用的方法： ele.insertAdjacentHTML('beforeend', '<h1 class="gua-h1">你好</h1>') // ele 是標簽對象 ~~~ >[danger] ##### 刪除標簽對象 -- remove() ~~~ var pwd = document.querySelector('#id-input-password') pwd.remove() ~~~ >[danger] ##### 對非input 標簽內添加文本 ~~~ var msg = document.querySelector('#id-msg') msg.innerHTML = '<button>你好</button>' // innerHTML 不會轉義字符串 // innerText 會轉義字符串 msg.innerText = '<button>text</button>' ~~~ >[danger] ##### 綁定點擊事件 -- addEventListener ~~~ 1. ie8 不支持 2.ele.addEventListener(1,2,3) 三個參數第一個參數是觸發的事件，第二個是函數，第三個是否冒泡 ~~~ ~~~ // 1, 獲得按鈕 var loginButton = document.querySelector('#id-button-login') // 2, 聲明一個函數, 用于在按鈕點擊后執行 var clicked = function() { log('按鈕被點擊到了') } // 3, 添加事件, 使用 addEventListener 函數 // 它有兩個參數 // 第一個是事件的名字, 'click' 表示點擊 // 第二個是事件發生后會被自動調用的函數 loginButton.addEventListener('click', clicked) ~~~ >[danger] ##### json ~~~ 1.有一個常見的需求是在 字典/數組 和 字符串 之間相互轉換 2.這個過程叫做 序列化/反序列化 ~~~ ~~~ var s = JSON.stringify([1, 2, 3, 4]) log('序列化后的字符串', typeof s, s) var a = JSON.parse(s) log('反序列化后的數組', typeof a, a) 打印結果： 序列化后的字符串 string [1,2,3,4] todo.js:9 反序列化后的數組 object (4)?[1, 2, 3, 4] ~~~ >[success] # 案例  >[danger] ##### 代碼 ~~~ 1.${} js 綁定模板的使用 2.使用點擊事件綁定 3.addEventListener 4.刪除寫法看一看學習套路 ~~~ ~~~ <input id='id-input-todo'> <button id='id-button-add'>add</button> <div class="todo-list"> <div class="todo-cell"> <button class="todo-delete">刪除</button> <span>吃飯</span> </div> </div> <script src='todo.js'> function log() { console.log.apply(console, arguments) } function e(ele) { return document.querySelector(ele) } // 創建一個 添加模板 var todoTemplate = function (todo) { var t = ` <div class="todo-cell"> <button class="todo-delete">刪除</button> <span>${todo}</span> </div> ` return t } // 將模板插入指定位置 var insertTodo = function (todo) { var todoCell = todoTemplate(todo) var todoList = e('.todo-list').insertAdjacentHTML('beforeend',todoCell) } // 綁定添加事件 var addObj = e('#id-button-add') addObj.addEventListener('click',function () { var inputVal = e('#id-input-todo').value // 調用創建模板的方法 insertTodo(todo) }) // ----------------- 刪除 ------------------- var todolist = e('.todo-list') todoList.addEventListener('click',function (e) { var self = e.target if (self.classList.contains('todo-delete')) { log('點到了 刪除按鈕') // 刪除 self 的父節點 // parentElement 可以訪問到元素的父節點 self.parentElement.remove() } else { // log('點擊的不是刪除按鈕******') } }) </script> ~~~