一、填空题
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绑定点击事件的两种写法
$ ( 选 择 器 ) . o n ( 事 件 类 型 , 回 调 函 数 ) 和 (选择器).on(事件类型,回调函数)和 (选择器).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、以下哪个符号在使用时,可以直接写,不需要做转意?
<font color=''>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分)
<style>
.box{
height: 2000px;
background: red;
}
button {
display:none;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
<body>
<div class="box">
<button>回到顶部</button>
</div>
</body>
// 答案
<script>
let button = document.querySelector('button');
window.onscroll = function () {
if (document.documentElement.scrollTop > 50) {
button.style.display = 'block'
} else {
button.style.display = 'none'
}
}
button.onclick = function () {
document.documentElement.scrollTop = 0
}
</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
}
若有收获,就点个赞吧