前端
对HTML的理解
用正确的标签做正确的事情。 html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
前端特殊css样式
nth-child（N）
选择父元素下的第N个子元素，N可以为数字、关键字、或公式（odd代表奇数行，even代表偶数行）
<style type="text/css">
/* odd:奇数行 */
li:nth-child(odd){
color:red;
}
/* even:偶数行*/
li:nth-child(even){
color:yellow;
}
</style>
</head>
<body>
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
</ul>
</body>
</html>
禁止用户复制文本
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- -webkit 代表safari、chrome私有属性
- -khtml Safari浏览器
- -moz 代表firefox浏览器私有属性
- -ms 代表ie浏览器私有属性
-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示。
-user-select 选中文本【取值】
- none：文本不能被选择
- text：可以选择文本
- all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
- element：可以选择文本，但选择范围受元素边界的约束
数组去重
// indexOf实现
var arr= [a, a, 'a'];
function unique(array) {
var res = [];
for (var i = 0, len = arr.length; i < len; i++) {
var current = arr[i];
if (res.indexOf(current) === -1) {
res.push(current)
}
}
return res;
}
console.log(unique(array));
// 排序后去重(不推荐使用) concat() -- 连接两个或多个数组，并将新的数组返回,该方法不会对原数组产生影响
// sort() 默认的是字母排序，而不是按照数字大小排序，而在比较数字时它会先将开头的第一个数字变成字符串后比较 [12,25,6,30]排序后为[12,25,30,6]
var array = [1, 1, '1'];
function unique(array) {
var res = [];
var sortedArray = array.concat().sort();
var seen;
for (var i = 0, len = sortedArray.length; i < len; i++) {
// 如果是第一个元素或者相邻的元素不相同
if (!i || seen !== sortedArray[i]) {
res.push(sortedArray[i])
}
seen = sortedArray[i];
}
return res;
}
console.log(unique(array));
//过滤方法实现
var array = [1, 2, 1, 1, '1'];
function unique(array) {
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})
return res;
}
console.log(unique(array));
// 排序后过滤去重
var array = [1, 2, 1, 1, '1'];
function unique(array) {
return array.concat().sort().filter(function(item, index, array){
return !index || item !== array[index - 1]
})
}
console.log(unique(array));
// Object键值对去重
var array = [{value: 1}, {value: 1}, {value: 2}];
function unique(array) {
var obj = {};
return array.filter(function(item, index, array){
console.log(typeof item + JSON.stringify(item))
return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
})
}
console.log(unique(array)); // [{value: 1}, {value: 2}]
// ES6 Set实现
var unique = (a) => [...new Set(a)]
正则表达式
vue父子组件生命周期的顺序及作用
网页验证码作用
主要是为是防止黑客的入侵。有些黑客为了故意攻击一个系统，可能会使用攻击工具，连续不断地重试用户名或密码登录系统。如果我们不加入验证码，那么就有可能会被破解用户名和密码的。所以加入验证码是非常有必要的。
标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
标准的css盒子模型宽高就是内容区宽高；
低端IE css盒子模型宽高 内边距﹢边界﹢内容区；
position的值relative和absolute定位原点
absolute生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。
浏览器的兼容性问题
浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。*
- IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
- IE下,even对象有x,y属性,但是没有pageX,pageY属性;
- Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 - Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。 - 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
CSS优化、提高性能的方法
- 提取项目的通用公有样式，增强可复用性，按模块编写组件；
- 增强项目的协同开发性、可维护性和可扩展性;
- 使用预处理工具或构建工具（对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
修改chrome记住密码后自动填充表单的黄色背景
情景一：input文本框是纯色背景的
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
思路二： 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码
<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">
将浮点数点左边的数每三位添加一个逗号
function commafy(num){
return num && num
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
return $2 + ',';
});
}
This对象的理解
this总是指向函数的直接调用者（而非间接调用者）； 如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
eval
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
(不建议使用 不安全，非常耗性能（2次，一次解析成js语句，一次执行）)
什么是window对象? 什么是document对象
- document是window的一个对象属性。
- Window 对象表示浏览器中打开的窗口。
- 区别
1、window 指窗体。document指页面。document是window的一个子对象。
2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location ( 用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
1827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
