H5C3-JS day03

第一题：

有一个元素，需要在pc端显示而在手机端隐藏，需要使用的方法是？

visible-md-8 hidden-sm

第二题：

在 HTML 页面上包含如下所示的层对象，则 javascript 语句 document.getElementById(“info”).innerHTML 的值是（）

<div id=”info” style=”display:block”><p> 请填写 </p></div>

 

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText: 

从起始位置到终止位置的内容, 但它去除Html标签 

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

第三题：

可参考《CSS权威指南（第三版）》中第220页‘百分数和外边距’说明：“百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生变化，百分数也会变化”。

ps:

宽度设置后会自动换行，但以下两种情况设置css也不行
1、过长的不带空格的英文
2、过长的不带空格的数字
原因：可能是浏览器换行是根据单词来决定的，如果一长串英文不带空格，浏览器就认为是一个单词，无法分开，也就不换行了

，解决办法：

over-break: auto; /*若有超出即自动生成滚动条*/

word-break: break-all;/*超出部分自动换行（包含纯数字和纯字母）*/

第四题：

A：a 元素可以没有 href 属性，此时为超链接的一个占位符，则 A错误

B：target 属性可选有：_blank、_self、framename等值

C：rel 属性有多个值时，使用空格 " " 分隔

D：href 属性的可选有：

                          绝对路径（href = "https://www.baidu.com"）

                          相对路径（href = "index.html"）

                          锚（href = "#top"）

      则 D 错误

 

js部分：今天有点惨烈，感觉要补es6的东西，A.js真的不想看到。

第五题：

https://wy310.cn/2019/12/18/what-is-call-and-apply/

讲的很清晰

第六题：

A. concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

B. append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

C. appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

D. pop() 方法用于删除并返回数组的最后一个元素。

 

第七题：

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

本题的exec执行结果是一个数组，但是使用了document.write，所以显示在html中的内容是数组中的元素，即e

 

js还有一个test()方法，用于检测字符串是否匹配某个模式，返回值为boolean

 

exec() 与match方法类似，这个方法只会执行一次，加上修饰符 g 也只会执行一次，当再次调用的时候会从上次查询到的位置继续往后查。

第八题：

执行以下程序段后，x的值是（ ）。

1 2 3 4 5 6 7

var x=0; switch(++x) { case 0: ++x; case 1: ++x; case 2: ++x; }

没有break；会出现穿透现象，x=3

 

第九题：

在阮一峰老师写的es6标准入门中提到：‘Promise 对象代表一个异步操作，有3种状态：Pending(进行中)、Resolved(已完成，又称Fulfilled)和Rejected(已拒绝)’。应该是ACD

第十题：

1. 在 ES6 ***有 7 种基本数据类型：undefined、null、Boolean、String、Number、Object、Symbol
2. undefined（未定义）：表示变量未初始化，属性不存在，函数没有返回值
3.  
   null（空值）：表示变量为空值
4.  
   Boolean（布尔值）：true 或 false
5.  
   String（字符串）：单引号字符串 ‘’ 或 双引号字符串 ""
6.  
   Number（数值）：范围 [-2^53, 2^53]
7.  
   Object（对象）：表示属性的集合，其中每个属性由“名/值对”构成
8.  
   Symbol（符号）：表示独一无二（ES6 新增）

第十一题：

reflow(回流)和repaint(重绘)

 

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）

reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint：如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1：改变窗口大小

2：改变文字大小

3：内容的改变，如用户在输入框中敲字

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

 

第十二题;

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。

 

原生具备 Iterator 接口的数据结构如下。

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

 

http://es6.ruanyifeng.com/#docs/iterator#%E9%BB%98%E8%AE%A4-Iterator-%E6%8E%A5%E5%8F%A3