JS-WebAPI-DOM-2

Web API(2)

DOM–DOM基础

节点操作

为什么学节点操作

除了之前通过DOM提供的方法获取元素

包括:

document.getElementById()
document.getElementByTagName()
document.querySelector等

还可以: 利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强, 但是兼容性稍差

这两种方式都可以获取元素节点, 我们后面都会使用, 但是节点操作更加简单

概述

三种节点

元素节点 nodeType 1

属性节点 nodeType 2

文本节点 nodeType 3

文本节点包括文字, 空格, 换行

获取节点

获取父级节点: 父级节点 parentNode

<div class="demo">
    <div class="box">
        <span class="erweima">x</span>
    </div>
</div>

var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
erweima.parentNode;
console.log(erweima.parentNode); //可以获取到div这个元素

注意: 得到的是离元素最近的父级节点(亲爸爸), 如果找不到父节点 则返回为null

获取子级节点element.children[*]

<ul>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ul>
<ol>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ol>

获取ul下面的所有li

// DOM提供的方法
     var ul = document.querySelector('ul');
     //var lis=ul.querySelectorAll('li');

现在利用子节点获取ul的li

已得到的父节点.childNodes(标准)

ul.childNodes
会得到所有的子节点 包括元素节点 文本节点(换行)等等
如果只想要获得里面的元素节点, 则需要专门处理. 所以我们一边不提倡使用childNodes

[常用]—-已得到父元素节点.children(非标准)

获取所有的子元素节点——实际开发常用
ul.children

子节点:获取第一个子元素和最后一个子元素

• parentNode.firstChild

  返回第一个子节点, 找不到则返回null.同样也是包含所有的节点 不管是文本节点 还是元素节点等

• parentNode.lastChild

parentNode.firstElementChild 返回第一个子元素节点

console.log(ol.firstElementChild); 可以拿到第一个li元素

parentNode.lastElementChild 返回最后一个子元素节点

console.log(ol.lastElementChild); 可以拿到最后一个li元素

实际开发的写法(照顾兼容性)

返回第一个子元素 ol.children[0]

返回最后一个子元素 console.log(ol.children[3]); // li4

返回最后一个子元素, 但是不确定有多少个子元素 console.log(ol.children[ol.children.length - 1]); // li4

案例:新浪网的下拉菜单

分析

① 导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件
② 核心原理： 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏

兄弟节点 node.nextSibling

node.nextSibling

返回当前元素的下一个兄弟节点,找不到返回null.
同样包含所有的节点

console.log(div.nextSibling); //#text 换行

node.previousSibling

上一个兄弟节点
console.log(div.previousSibling); //#text 换行

node.nextElementSibling

下一个兄弟元素节点
console.log(div.nextElementSibling);// 得到span元素

node.previousElementSibling

上一个兄弟元素节点

兼容性IE9 封装一个函数解决

创建节点

语法

document.createElement('tagName')

说明

这个方法创建由tagName指定的HTML元素.应为这些元素原先不存在, 是根据我们的需求动态生成的, 所以我们也称为创建元素节点.

<ul>
    <li>123</li>
</ul>

实施

var li = document.createElement('li');

添加节点

追加元素

node.appendChild(child)

说明:

这个方法将一个节点添加到指定父节点的子节点列表末尾.类似于css里面的after伪元素.

var ul =document.querySelector('ul');
ul.appendChild(li);

追加元素到指定位置

node.insertBefore(child, 指定元素)

说明:

将一个节点添加到父节点的指定子节点的前面.类似与css里面的before伪元素

var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

因此 我们想要页面添加一个元素:

1.创建元素,

2. 添加元素

案例:简单版发布浏览案例

分析:

① 核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。
② 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li
③ 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore

实施:

<textarea name="" id=""></textarea>
<button>发布</button>
<ul>

</ul>
<script>
    //1.获取元素
    var btn = document.querySelector('button');
    var text = document.querySelector('textarea');
    var ul = document.querySelector('ul');
    //2.注册事件
    btn.onclick = function () {
        if (text.value == '') {
            alert('你没有输入内容')
            return false
        } else {
            // console.log(text.value);

            //(1)创建元素
            var li = document.createElement('li');
            // 现有li 才能赋值
            li.innerHTML = text.value;
            //(2)添加元素
            // ul.appendChild(li); //在后面追加留言
            ul.insertBefore(li,ul.children[0])  //最新的留言 最前面显示
        }
    }
</script>

删除节点

<button>删除</button>
<ul>
    <li>大姐姐</li>
    <li>大哥哥</li>
    <li>小弟弟</li>
</ul>

1. 获取元素

   var ul = document.querySelector('ul');
   var btn = document.querySelector('button');

2. 删除元素 node.removeChild(child);

   ul.removeChild(ul.children[0]); //能够删除

   说明: 删除父元素里面的一个子元素

3. 点击按钮 一次 删除里面的孩子

   btn.onclick = function () {
       if (ul.children.length == 0) {
           this.disabled = true  //如果里面的li没有了 则禁用按钮
       } else {
           ul.removeChild(ul.children[0]);
       }
   }

   案例:删除留言

复制节点

语法:

node.cloneNode() 括号为空或者false 则是浅拷贝 只复制标签 不复制内容

node.cloneNode(true); 括号为true 则是深拷贝 复制标签与子内容

说明:

返回调用该方法的节点的第一个副本. 克隆节点/拷贝节点

<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>

实例

<script>
    var ul =document.querySelector('ul');
    //1. node.cloneNode(); 括号为空或者false 则是浅拷贝 只复制标签  不复制内容
    //1. node.cloneNode(true); 括号为true 则是深拷贝 复制标签与子内容
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili); //追加一个li
</script>

案例:动态生成表格

分析

① 因为里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好数据。 数据我们采取对象形式存储。
② 所有的数据都是放到tbody里面的行里面。
③ 因为行很多，我们需要循环创建多个行（对应多少人）
④ 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
⑤ 最后一列单元格是删除，需要单独创建单元格。
⑥ 最后添加删除操作，单击删除，可以删除当前行。

三种动态创建元素区别

document.write

直接在js中 写 document.write(‘

123

‘)
是直接讲内容写入页面的内容流, 但是文档流执行完毕, 会导致页面重绘.

element.innerHTML

示例: 追加100个相同的a链接

   for (var i = 0; i <= 100; i++) {
   inner.innerHTML += '<a href="#">百度</a>'
}

这种速度很慢

解决方案: 采用数组形式拼接, 但是结构稍微复杂 稍快

<div class="inner"></div>
<div class="create"></div>
<script>
    var inner = document.querySelector('.inner');
    var arr = [];
    for (var i = 0; i <= 100; i++) {
        arr.push('<a href="#">百度</a>');  //给数组追加100个a链接 
    }
    inner.innerHTML = arr.join(''); //join 数组转为字符串   ''内是数组内数据的分隔符  这里不加
 </script>

document.createElement

大量创建标签 用createElement
结构清晰 较快

var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
    var a = document.createElement('a');  //先创建a
    create.appendChild(a);  //再选择要添加的位置
}

总结: 在不同浏览器下, 通过数组方式的innerHTML方法效率要比createElement高

DOM重点核心

DOM说明

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。

作用

1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
2. 对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点

注意

我们获取过来的DOM元素是一个对象（object），所以称为 文档对象模型

DOM操作

说明

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

1. document.write
2. innerHTML
3. createElement

增加

1. appendChild 后面添加
2. insertBefore 前面添加

删除

1. removeChild

修改

主要修改dom元素, dom元素的内容, 属性, 表单的值

1. 修改元素属性： src、href、title等
2. 修改表单元素： value、type、disabled等
3. 修改元素样式： style、className

查询

1. DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
2. H5提供的新方法： querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

属性操作

主要针对于自定义属性。

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute移除属性

事件操作

给元素注册事件， 采取 事件源.事件类型 = 事件处理程序
鼠标事件

DOM事件高级

注册事件(绑定事件)的方法

概述

给元素添加事件

方式一: 传统注册事件

利用on开头的事件onclick

<button onclick="alert('hi~')"></button>
btn.onclick = function() {}

特点:注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数, 最后注册的处理函数将会覆盖前面注册的处理函数

(推荐)方式二: 方法监听注册方式

w3c标准 推荐方法

addEventListener() 它是一个方法

特点:同一个元素同一个事件可以注册多个监听器

addEventListener 事件监听方式(重点)

语法

eventtarget.addEventListener(type, listener[, useCapture])

type:

​ 事件类型字符串,名字要加引号, 比如click, mouseover, 注意这里不要带on

listener:

​ 事件处理函数, 事件发生时, 会调用该监听函数

useCapture:

​ 可选参数, 是一个布尔值, 默认是false. 学完DOM事件流后,我们再进一步学习

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上, 当该对象触发指定的事件时, 就会执行事件处理函数

实例

btns[1].addEventListener('click', function () {
    alert('22');
}
)

注意

1. 事件类型要加引号
2. listener 写在括号里面

好处

同一个元素可以添加多个侦听器(事件处理程序), 只要触发这个事件, 多个事件处理程序会依次执行

完全没用 (了解):attachEvent 事件监听方式

删除绑定的事件

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs=document.querySelectorAll('div');

传统注册事件的删除

evenTarget.onclick = null

divs[0].onclick = function() {
    alert('11');
    divs[0].onclick = null;
}

方法监听注册事件的删除

eventTarget.removeEventListener(type, listener[,useCapture]

注意: 要删除的话,建立函数的时候必须是独立函数, 才能指定到要删除的函数

实施

divs[1].addEventListener('click',fn)  //里面的fn不需要调用加小括号
function fn() {   //fn是函数名  你不记得了吗?
    alert(22);
    divs[1].removeEventListener('click', fn);
}

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件

比如我们给一个div 注册了点击事件：

​ DOM 事件流分为3个阶段：

1. 侦听阶段: 从父级到子级的元素 依次监听鼠标的点击动作
2. 当前目标阶段: 当前目标绑定点击事件 则触发绑定的点击事件
3. 冒泡阶段: 从目标往回走,
   要么有1—2
   要么就是2—-3

事件冒泡

IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过

事件捕获

网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

代码验证

<div class="father">
    <div class="son">son盒子</div>
</div>

​ 注意

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。

验证捕获阶段

        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
//先弹出father
//后弹出son

捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son

验证冒泡阶段

        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
//先弹出son
//后弹出father

冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document

事件对象

事件对象概述与使用

官方解释

• event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
• 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象
• event，它有很多属性和方法。

语法: 填在执行函数的参数中

eventTarget.onclick = function(event) {} 
eventTarget.addEventListener('click', function(event) {}）

作用

通过该对象, 我们可以知道

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

注意: 这个 event 就是事件对象，我们还喜欢的写成 e 少evt

实例

 var div = document.querySelector('div');
 //  div.onclick = function (e) {
 //    console.log(e);  //PointerEvent
//   }
 div.addEventListener('click', function(event){
     console.log(event); // PointerEvent
 })

事件对象的常见属性和方法

e.target

返回触发事件的对象// 返回的是触发事件的对象(元素) 标准

与this的区别:

• ​ e.target点击了哪个元素　就返回哪个元素
• ​ this是 哪个元素绑定了这个点击事件 那么就返回谁

实例

<script>
    //1.e.target 返回的是触发事件的对象(元素)
    // 区别:e.target点击了哪个元素　就返回哪个元素
    //　this是  哪个元素绑定了这个点击事件 那么就返回谁
    var div = document.querySelector('div');
    div.addEventListener('click', function (e) {
        console.log(e.target); //div123
    })  

    var ul =document.querySelector('ul');
    ul.addEventListener('click', function(e) {  //(利用了事件委托)
        console.log(this); //ul       我们给ul绑定了事件  那么this 就指向ul
        console.log(e.target);  //li     e.target指向我们点击的那个对象 谁出发了这个事件 我们点击的是li  e.target指向的就是li
    })
</script>

e.type

返回事件的类型 比如click mouseover 不带on

var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
    console.log(e.type); //返回事件类型 click /mouseover  / mouseout
}

e.cancelBuble

该属性阻止冒泡 非标准 ie6-8

e.returnValue

该属性 阻止默认事件(默认行为) , 非标准 ie6-8使用 比如不让链接跳转

e.preventDefault()

该方法 阻止默认事件(默认行为) 标准 比如不让链接跳转

var a = document.querySelector('a');

监听事件下的写法

a.addEventListener('click', function(e) {
    e.preventDefault();  // a链接没有跳转  dom标准写法
})

传统注册事件的方法

a.onclick = function(e) {
    // 普通浏览器   方法
    e.preventDefault();  
    //低版本浏览器  属性
    e.returnValue;
    //我们可以利用利用 return false 也能阻止默认行为  特点:retur后面的代码就不执行了  而且只限于传统的注册方式
    return false;
} 

e.stopPropagation() (实际开发/面试问题)

阻止冒泡 标准

阻止事件冒泡

事件冒泡

开始时,由最具体的元素接收, 然后逐级向上传播到DOM最顶层节点.
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

做法:e.stopPropagation()

标准写法

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // 只点击son  则father与document 都不会弹出来了
            e.cancelBubble = true ; // 兼容写法
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

事件委托(代理,委派)

情景

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：
咱们班有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需
要排队领取，也花费时间较长，何如？
解决方案： 快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势： 快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任

实际问题

<ul>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
</ul>

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，

而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

解决:

介绍

事件委托也称为事件代理， 在 jQuery 里面称为事件委派

事件委托的原理(面试问题)

• 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
• 以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。

作用

我们只操作了一次 DOM ，提高了程序的性能

实例: 父级添加监听器 子级点击有弹窗

//事件委托的核心原理: 给父节点添加侦听器, 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function () {
    alert('知否知否，点我应有弹框在手！');
})

实例: 点击子级变色效果

<script>
    //事件委托的核心原理: 给父节点添加侦听器, 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        // alert('知否知否，点我应有弹框在手！');
        //e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';  //点击的子级变粉色
    })
</script>

常用的鼠标事件

鼠标事件

onclick
鼠标点击左键触发
onmouseover
鼠标经过触发
onmouseout
鼠标离开触发
onfocus
获得鼠标焦点触发
onblur
失去鼠标焦点触发
onmousemove
鼠标移动触发
onmouseup
鼠标弹起触发
onmousedown
鼠标按下触发

1. 禁用鼠标右键菜单

​ contextmenu主要控制应该如何显示上下文菜单, 主要取决于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2. 禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
e.preventDefault();
})

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象KeyboardEvent

e.clientX
返回鼠标相对于浏览器窗口可视区的X坐标
用户可视区来讲
e.clientY
返回鼠标相对于浏览器窗口可视区的Y坐标
用户可视区来讲

e.pageX (常用)
返回鼠标相对于文档页面的X坐标 ie9+
相对于文档页面的左边距离

e.pageY (常用)
返回鼠标相对于文档页面的Y坐标 ie9+
相对文档页面的顶部的距离

e.screenX
返回鼠标相对于电脑屏幕的X坐标
e.screenY
返回鼠标相对于电脑屏幕的Y坐标

案例:跟随鼠标的天使

分析:

① 鼠标不断的移动，使用鼠标移动事件： mousemove
② 在页面中移动，给document注册事件
③ 图片要移动距离，而且不占位置，我们使用绝对定位即可
④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片

    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        });
    </script>
</body>

常用的键盘事件(KeyboardEvent)及键盘事件对象

键盘事件

onkeyup
某个键盘被松开时触发
onkeydown
某个键盘被按下时触发
onkeypress
某个键盘按键被按下时触发, 但是不识别功能键比如ctrl shift 箭头等

<script>
    document.onkeyup = function () {
        console.log('我演起来了');  //确实可以
    }
    document.addEventListener('keyup', function () {
        console.log('哈哈');
    })

    document.addEventListener('keydown', function () {
        console.log('键盘按下才会触发keydown');
    })
    document.addEventListener('keypress', function () {
        console.log('键盘按下才会触发keypress');
    })
</script>

注意:

三个事件的执行顺序

1. keydown
2. keypress
3. keyup

键盘事件对象 e.keyCode

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

document.addEventListener('keyup',function(e){
    console.log(e);
    console.log(e.keyCode); //65
    //1. 我们的keyup和keydown事件不区分字母大小写 a和A 得到的都是65;
    //2. 我们的keypress事件区分字母大小写 a和A 得到的
})

document.addEventListener('keypress',function(e){
    console.log('keypress');
    console.log(e.keyCode); //  a 97   A65
    //2. 我们的keypress事件区分字母大小写 a和A 得到的 A 97 a 65
})

用来判断用户按下了哪个按键

if(e.keyCode ===65) {
    alert('您按下的是A/a键哦');
} else {
    alert('你按下的不是A/a键')
}

注意

onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

案例:模拟京东按键输入内容

要求:

当我们按下 s 键， 光标就定位到搜索

分析:

① 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
② 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
③ 搜索框获得焦点： 使用 js 里面的 focus() 方

<input type="text">
<script>
    var search = document.querySelector('input');
    document.addEventListener('keyup', function(e) {  //用keydwon不太合适  会把s也输入进去
        console.log(e.keyCode); //83
        if(e.keyCode ===83) {
            search.focus();
        }
    })
</script>

案例:模拟京东快递单号查询

要求: 当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。