js练习题第17天 答案及解析

本篇文章是js基础练习题第十七天的答案及解析部分，纯题目部分请移步js基础练习题 第17天

正文

1.获取页面中的第一个<button>元素，并添加一个点击事件，在点击事件中判断该元素是否具有类名"color_change"，如果没有，就加上；如果有，就移除掉。试用代码实现之。

答案：如下代码段所示：

// 方法1
var button = document.querySelector("button");
button.onclick = function() {
  var class_list = button.classList;
  if(class_list.contains("color_change")) {
    class_list.remove("color_change");
  } else {
    class_list.add("color_change");
  }
}

// 方法2
var button = document.querySelector("button");
button.onclick = function() {
  button.classList.toggle("color_change");
}

2.简述元素的offsetWidth()、clientWidth()、scrollWidth()的区别。

答案：区别如下所示

• offsetWidth表示元素的实际宽度，包括width、padding、垂直滚动条的宽度以及border的宽度。
• clientWidth指元素的可视区宽度，包括width和padding。
• scrollWidth指实际内容的宽度，包括width、padding和溢出可视区的宽度，在无溢出的情况，与clientWidth相同。

3.网页上常见的“回到顶部”的JS代码应如何设计？

如下所示：

function scrollToTop(element) {
  if(element.scrollTop != 0) {
    element.scrollTop = 0 ;
  }
}

4.试解释JS中的事件流和事件执行的三个阶段。

答案：JS中的事件流包括事件冒泡和事件捕获；事件冒泡是向上生长型，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点；事件捕获是向下传播型，即事件开始时由最不具体的元素接收，然后逐渐向下传播到最具体的节点；js事件执行的三个阶段为捕获过程 -> 处于目标阶段 -> 冒泡过程

5.写一个方法，找出字符串"abghiabjeabbabeab"中"ab"出现的次数和位置。

答案：如下方代码段所示

function findRepeat(str, s) {
  let count = 0;
  let pos = [];
  let i = 0;
  while(str.indexOf(s, i) > -1 && i < str.length) {
    count++;
    pos.push(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
  }
  return { pos, count };
}
findRepeat("abghiabjeabbabeab", "ab");

6.

var a = 10;   
function test() { 
  a = 100;   
  alert(a);   
  alert(this.a);   
  var a;   
  alert(a); 
} 

则运行test()后页面中将按顺序弹出___________，___________，___________。

答案：100、10、100

7.for循环和forEach循环有什么区别？

for循环可以跳过（continue）或者终止循环（break），而forEach不能这样操作，否则会报错。此外forEach是ECMA5引入的，在低版本浏览器下可能不兼容。

说明

1. 题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

2. 答案中，若有错误和需完善的地方，可在下方留言反馈哈~~

3. 查看纯习题版，请点击js基础练习题 第17天