blog
blog copied to clipboard
yongheng2016
## 题目1： 实现如下图Tab切换的功能  代码：[http://js.jirengu.com/hucop/2/edit](http://js.jirengu.com/hucop/2/edit) ## 题目2：实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏  代码：[http://js.jirengu.com/qidir/1/edit](http://js.jirengu.com/qidir/1/edit)
## 题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？ DOM0：行内样式或js标签中直接写事件以及所对应的处理函数，它是一种表达式的写法；所以点遇到同名函数的时候会发生重置； ``` ``` DOM2：是一种方法，所以可以重复调用这种方法而不冲突； + 标准浏览器： * 监听事件：`addEventListener( )` * 删除事件：`removeEventListener( )` 事件中的this指的是触发事件的元素 + 老式IE浏览器（IE8及以下）： * 监听事件：`attachEvent( )` * 删除事件：`detachEvent( )` 事件中的this指向的是window ## 题目2： attachEvent与addEventListener的区别？ 1....
## 题目1： dom对象的innerText和innerHTML有什么区别？ **区别：** + `innerHTML`获取的是包括标签在内的所有字符，且它是w3c的标准属性 + `innerText`只能获取text节点，不包括标签，不是w3c的标准属性； + 兼容性： * `innerHTML`所有浏览器兼容；`innerText`与`outerHTML`虽然主流浏览器，如谷歌，火狐，IE7-IE11，QQ等都已支持（这里提到的谷歌火狐等都是最新浏览器的版本），但是W3C的标准属性就是`innerHTML`,因此，尽可能地去使用`innerHTML`，而少用`innerText`与`outerHTML`。 + html代码示例： ``` 我是内容嘿嘿 ```  + 参考： [https://segmentfault.com/a/1190000000410375](https://segmentfault.com/a/1190000000410375) [https://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript](https://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript) ## 题目2： elem.children和elem.childNodes的区别？ 区别： + elem.children 匹配的是elem下的Element类型节点 +...
## 题目1： \d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$分别是什么? `\d`：匹配拉丁字母表中的一个数字字符。等价于`[0-9]` `\w`：匹配拉丁字母表中的字母、数字字符，还包括下划线。等价于`[A-Za-z0-9_]` `\s`：匹配一个空格字符，包括空格、制表符、换页符、换行符、其它Unicode空格 `[a-zA-Z0-9]`：匹配集合中的任意字符 `\b`：匹配一个零宽单词边界，如一个字母与一个空格（小心与[\b]混淆） > 例如，`/\bno/ `匹配 "at noon" 中的 "no"，`/ly\b/` 匹配 "possibly yesterday." 中的 "ly"。 `.`：匹配任意单个字符，但回车`\r`、换行`\n`符除外 `*`：匹配前面模式的0次或多次 `+`：匹配前面模式的1次或多次。等价与`{1,}` `?`:匹配前面模式的0次或1次； > 如果在数量词 *、+、? 或 {}, 任意一个后面紧跟该符号（?），会使数量词变为非贪婪（...
## 命名规范 + ### 语义化： + 1. 语义化标签优先 + 2. 基于功能命名、基于表现命名，尽量不要不要通过外观命名 + 3. 简略、明了、无后患 ## 书写规范 + tab 用两个空格表示 + css的 :后加个空格， {前加个空格 + 每条声明后都加上分号 + 换行，而不是放到一行 + 颜色用小写，用缩写, #fff...
## CSS和JS在网页中的放置顺序是怎样的？ 根据各个浏览器对页面的处理机制不同，实际网页呈现考虑因素不同，其放置的顺序也存在差异： **一.** Chrome和Safari看到css会立即停止渲染，去加载css；所以放置位置要求不高；（白屏问题） **二.** Firefox 1. css放置在head中的处理机制和Chrome/Safari完全一致；（白屏问题） 2. css放置在body中和IE/Edge的处理机制一样，尽量靠后放；（闪烁问题） **三.** IE/Edge中css会阻塞后面样式的显示，尽量靠后放；（闪烁问题） **四.** js加载会阻塞后面的内容；所以存在白屏问题；尽量放置在后面； #### 综上结合各个浏览器，如果要避免闪烁，css放在head头部，如果要避免白屏，css尽量放置在后面； ## 解释白屏和FOUC ### 白屏或闪烁是无法避免的，只能二选一；(1.化好妆,才出门 2.先出门,中途化妆) 根据各个浏览器的侧重点不同，白屏和闪烁的处理机制也不同： + Chrome和Safari。当发现后即停止渲染，在所有css加载完成之前，页面上不会显示任何东西。 + Firefox。head标签中的行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容；而body标签中的则不阻塞任何内容显示。 + IE/Edge。未加载完成的标签只阻塞其后面的HTML内容显示，而对其前面的HTML内容则不阻塞。 参考：[http://blog.shaochuancs.com/new-css-loading-method/](http://blog.shaochuancs.com/new-css-loading-method/)...
## 1.JavaScript 定义了几种数据类型? 哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么? + ### 6种原始类型： + `String` + `Number` + `Boolean` + `Null` + `Undefined` + `Symbol` （ECMAScript6新定义） + ### 复杂类型： + `Object`（对象可以分成三个子类型） + 狭义的对象 + 数组 +...
## 1.函数声明和函数表达式有什么区别 **函数声明：** + 函数声明必须写函数名，否则无法调用； + 函数声明的位置可以放在函数调用的前面或者后面，都可以成功调用；（函数声明方式是整体提升到头部） **函数表达式：** + 函数表达式中，function后面的函数名可以不写，如果写了也只能在函数内部识别； + 函数的调用必须放置在函数表达式后面才能成功调用，否则会报错；（函数表达式的提升知识提升了变量名） ``` F( ) var F = function ( ){ console.log('a'); } ``` 等同于： ``` var F； F( );...
## 1.引用类型有哪些？非引用类型有哪些2.如下代码输出什么？为什么 **基本类型：**`number`、`boolean`、`string`、`null`、`undefined` **引用类型：**`object`、`function`、`regexp`、`array` ``` var obj1 = {a:1, b:2}; var obj2 = {a:1, b:2}; console.log(obj1 == obj2); //false 地址不相等 console.log(obj1 = obj2); //{a:1,b:2} 浅拷贝，obj1拷贝obj2的地址 console.log(obj1 == obj2); //ture 两个对象相等...
## 1.使用数组拼接出如下字符串 ``` var prod = { name: '女装', styles: ['短款', '冬季', '春装'] }; function getTpl(data){ //todo... }; var result = getTplStr(prod); //result为下面的字符串 ``` ``` 女装 短款 冬季 春装 ```...