js综合测试

一、填空题

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分）
let xhr = new XMLHttpRequest;
xhr.open('GET', '/userInfo?id=1'); 
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status == 200) {
        console.log(xhr.response);
    }
};
xhr.send();

2、手写内置call方法（5分）
Function.prototype.call = function() {
    let [thisArg, ...args] = [...arguments];
    if (!thisArg) {
        //context为null或者试undefined
        thisArg = typeof window === 'undefined' ? global : window;
    }
    //this指向试当前函数func
    thisArg.func = this;
    //执行函数
    let result = thisArg.func(...args);
    delete thisArg.func;
    return result;
}
3、标准盒模型与怪异盒模型有什么区别（5分）
标准盒模型
总长=width+padding（左右）+border（左右）+margin（左右）
当width不变时，padding（左右）和borde（左右）的改变都是要改变总长的
怪异盒模型
总长=width+margin（左右）
这里的width等于padding（左右）加内容加上border（左右）
在怪异盒模型的总长中width的大小不变时，padding（左右）和border（左右）的改变只在width中变化，不会改变总长
4、鼠标事件mouseover和mouseenter的区别是什么（5分）
over和out是忽略元素之间的层级关系，只看鼠标在哪个元素显示的范围上，存在事件冒泡
enter和leave会受到元素之间的层级关系，默认阻止了事件冒泡机制
5、jQuery的ajax请求怎么写（5分）
$.ajax({
  url:"接口地址",// 接口就是 路径（地址）
  method:"get",// 请求
  success:function(data){
    // 请求成功的回调函数
  }
});
$.get('url',function(data){
  // 成功的回调函数
});
6、jQuery查找元素的几个方法分别是什么(8分)
parent()
找到该元素的父级元素
next()
找到该元素紧挨的下一个兄弟节点
prev()
找到该元素紧挨的上一个兄弟节点
nextAll()
找到该元素下面所有兄弟节点
传入选择器，找下面符合选择器的兄弟节点
prevAll()
找到该元素上面所有兄弟节点
传入选择器，找上面符合选择器的兄弟节点
siblings()
找到该元素的所有兄弟元素
children()
找到该元素的所有子元素
find()
通过参数类名找该元素下面的元素
四、（25分）
1、获取当前点击事件对象距离可视窗口的上偏移值（7分）
var box = document.getElementsByClassName('box')[0];
box.onclick = function (e) {
    console.log(e.clientY);
}
2、实现需求：点击回到顶部按钮，回到顶部，进入页面不显示回到顶部按钮，滚动一段距离显示(8分)


    

        回到顶部
    

// 答案

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
}
若有收获，就点个赞吧