一、填空题（每空二分，共30分）

1、在正则表达式中，[^&]匹配的是 除了&以外的字符
2、设置怪异盒模型的css样式是 box-sizing:border-box;
3、*号用于匹配前面的字符出现 零到多次
4、/^1[3578]\d{9}$/正则的匹配规则什么字符 以1开头，3578中的一个，九个数字（手机号规则）
5、验证只能输入5-20个以字母开头、可带数字、“”、“.”的字串，正则应该怎么写 /^[a-zA-Z]{1}([a-zA-Z0-9]|[.]){4,19}$/
6、获取页面的可视区域宽度 document.documentElement.clientWidth || document.body.clientWidth
7、获取页面滚动卷上去的高度 document.documentElement.scrollTop || document.body.scrollTop
8、阻止默认事件e.preventDefault()
9、什么是事件委托通过点击子级元素来触发父级元素的事件
10、鼠标事件左键单机和左键双击分别是onclick和ondblclick
11、jQuery怎么获取元素$(选择器) 返回的是jQuery对象
12、jQuery绑定点击事件的两种写法$(选择器).on(事件类型,回调函数)和$(‘button’).click(function(){ });

二、选择题（多选题，有非选中项不给分，每题4分；单选题，每题2分。共12分）

1、（多选）var reg = /^[rgb]oo[^ym]$/;以下哪些字符串是与reg匹配的（ ）AC
A: book
B: room
C: good
D: goood
2、（多选）以下哪些表达式与/^th?$/这个正则是匹配的（ ）AB
A: t
B: th
C: thh
D: thhh
3、以下哪个表达式与/aac$/这个正则是匹配的？ （ ）C
A: 789dac
B: bw_oac
C: bwaac
D: ac
4、以下哪个符号在使用时,可以直接写，不需要做转意？A
A: \
B: /
C: $
D: ^

三、问答题（33分）

1、默写原生ajax四步走（5分）

  1. let xhr = new XMLHttpRequest;// 创造一个ajax实例
  2. xhr.open('GET', '/userInfo?id=1'); //=>router Query
  3. // xhr.open('GET', '/userInfo/1'); //=>router Params
  4. //     后端处理: app.get('/userInfo/:id')
  5. // 告诉这个实例以一种什么样的方式(get) 去哪里(路径)获取数据
  6. xhr.onreadystatechange = function () {
  7.     if (xhr.readyState === 4 && xhr.status == 200) {
  8.         //能够进入这个条件中  证明 我们已经获取到了数据
  9.         console.log(xhr.response);
  10.     }
  11. };
  12. xhr.send();

2、手写内置call方法（5分）

  1. Function.prototype.call = function() {
  2.     let [thisArg, ...args] = [...arguments];
  3.     if (!thisArg) {
  4.         //context为null或者试undefined
  5.         thisArg = typeof window === 'undefined' ? global : window;
  6.     }
  7.     //this指向试当前函数func
  8.     thisArg.func = this;
  9.     //执行函数
  10.     let result = thisArg.func(...args);
  11.     delete thisArg.func;
  12.     return result;
  13. }

3、标准盒模型与怪异盒模型有什么区别（5分）

  1. 标准盒模型
  2. 总长=width+padding（左右）+border（左右）+margin（左右）
  3. 当width不变时，padding（左右）和borde（左右）的改变都是要改变总长的
  4. 怪异盒模型
  5. 总长=width+margin（左右）
  6. 这里的width等于padding（左右）加内容加上border（左右）
  7. 在怪异盒模型的总长中width的大小不变时，padding（左右）和border（左右）的改变只在width中变化，不会改变总长

4、鼠标事件mouseover和mouseenter的区别是什么（5分）

  1. over和out是忽略元素之间的层级关系，只看鼠标在哪个元素显示的范围上，存在事件冒泡
  3. enter和leave会受到元素之间的层级关系，默认阻止了事件冒泡机制

5、jQuery的ajax请求怎么写（5分）

  1. $.ajax({
  2.   url:"接口地址",// 接口就是 路径（地址）
  3.   type:"get",// 请求
  4.   success:function(data){
  5.     // 请求成功的回调函数
  6.   }
  7. });
  8. $.get('url',function(data){
  9.   // 成功的回调函数
  10. });

6、jQuery查找元素的几个方法分别是什么(8分)

  1. parent()
  2. 找到该元素的父级元素
  3. next()
  4. 找到该元素紧挨的下一个兄弟节点
  5. prev()
  6. 找到该元素紧挨的上一个兄弟节点
  7. nextAll()
  8. 找到该元素下面所有兄弟节点
  9. 传入选择器，找下面符合选择器的兄弟节点
  10. prevAll()
  11. 找到该元素上面所有兄弟节点
  12. 传入选择器，找上面符合选择器的兄弟节点
  13. siblings()
  14. 找到该元素的所有兄弟元素
  15. children()
  16. 找到该元素的所有子元素
  17. find()
  18. 通过参数类名找该元素下面的元素

四、（25分）

1、获取当前点击事件对象距离可视窗口的上偏移值（7分）

  1. var box = document.getElementsByClassName('box')[0];
  2. box.onclick = function (e) {
  3.     console.log(e.clientY);
  4. }

2、实现需求：点击回到顶部按钮，回到顶部，进入页面不显示回到顶部按钮，滚动一段距离显示(8分)

  1. <style>
  2.     .box{
  3.         height: 2000px;
  4.         background: red;
  5.     }
  6.     button {
  7.         display:none;
  8.         position: fixed;
  9.         right: 50px;
  10.         bottom: 50px;
  11.     }
  12. </style>
  13. <body>
  14.     <div class="box">
  15.         <button>回到顶部</button>
  16.     </div>
  17. </body>
  18. // 答案
  19. <script>
  20.     let button = document.querySelector('button');
  21.     window.onscroll = function () {
  22.         if (document.documentElement.scrollTop > 50) {
  23.             button.style.display = 'block'
  24.         } else {
  25.             button.style.display = 'none'
  26.         }
  27.     }
  28.     button.onclick = function () {
  29.         document.documentElement.scrollTop = 0
  30.     }
  31. </script>

3、把实现一个功能的js代码进行封装的目的是什么？(2分) 封装一个方法 getCss( ele,attr )，实现获取某个元素的某个css样式（8分）

function getCss(ele, attr) {
      let value;
      if ("getComputedStyle" in window) {
                value = getComputedStyle(ele, null)[attr];
      } else {
           if (attr === 'opacity') {
                 value = ele.currentStyle['filter']
                 let reg = /^alpha\(opacity=(.+)\)$/i
                 // if (reg.test(value)) {
                 //   value = reg.exec(value)[1] / 100
                 // } else {
                 //   value = 1
                 // }
                 value = reg.test(value) ? reg.exec(value)[1] / 100 : 1
            } else {
              value = ele.currentStyle[attr]
            }
      }
  // 去单位 "12px" "0.5" px pt rem em display: inline-block
  let reg = /^-?\d+(\.\d+)?(px|pt|rem|em)?$/i
  if (reg.test(value)) {
    value = parseFloat(value)
  }
  return value
}

若有收获，就点个赞吧