[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> ~~~