第五个工作笔记
1、 浏览器出错处理
错误类型：Error、RangeError、Reference和TypeError。
捕捉错误的目的在于避免浏览器以默认方式处理他们，而抛出错误的目的在于提供发生错误的具体原因。
2、判断一个对象是否为空
var obj = {};
if(JSON.stringfy(obj) == '{}') {
console,log('这是一个空对象');
}
3、for...in和for...of
| for...in | for...of |
|---|---|
| ES5标准 | ES6标准 |
| 常用于循环对象 | 常用于循环数组 |
| 循环的是key | 循环的是value |
for...of是不能遍历普通对象的，可以通过和object.keys()搭配使用，先获取对象的所有key的数组再遍历。
var obj = {
a: 1,
b: 2
}
/* 错误用法 */
for(var i of obj) {
console.log(i);
}
/*正确用法*/
for(var key of Object.keys(obj)) {
console.log(obj[key]);
}
4、false值
在转化为布尔值时，转化为false:
空字符串"",
null,
undefined,
数字0，
数字NaN,
布尔值false
注意：
NaN == NaN 的值为false。
5、null和undefined转化情况
| 转化 | null | undefined |
|---|---|---|
| 转化为数字 | 0 | NaN |
| 转化为布尔值 | false | false |
| 转化为字符串 | 'null' | 'undefined' |
6、巧用filter给Array去重
arr = arr.filter(function(element, index, self) {
return self.indexOf(element) == index;
})
7、解决文字和下划线重叠的问题
1）用CSS3解决
a {
text-decoration-skip: ink;
}
2）使用
border-botoom属性模拟
a {
text-decoration: none;
border-bottom: 1px solid;
}
3）使用
box-shadow属性模拟
a {
text-shadow: none;
box-shadow: 0 1px;
}
8、取最近数值的几个函数
| 函数 | 值 | 使用方法 |
|---|---|---|
| floor() | 取小于或等于的最大整数 | Math.floor(4.4) |
| ceil() | 取大于或等于的最小整数 | Math.deil(4.4) |
| round() | 取最靠近指定值的整数 | Math.round(4.4) |
9、JQuery基础动画
| 函数 | 用法 | 作用 |
|---|---|---|
| show() | show(3000) | 展示元素 |
| hide() | hide(3000) | 隐藏元素 |
| toggle() | toggle() | 切换展示和隐藏元素 |
| slideUp() | slideUp(3000) | 垂直方向逐渐收起 |
| slideDown() | slideDown(3000) | 垂直方向逐渐展开 |
| slideToggle() | slideToggle(3000) | 切换垂直方向展示或收起元素 |
| fadeIn() | fadeIn(3000) | 淡入 |
| fadeOut() | fadeOut(3000) | 淡出 |
| fadeToggle() | fadeToggle(3000) | 切换淡入淡出 |
10、JQuery动画--Animate()
div.animate({
opacity: 0.25,
windth: '256px',
height: '256px'
}, 3000); // 在3s内达到CSS设定的值
回调函数：
div.animate({
opacity: 0.25,
windth: '256px',
height: '256px'
}, 3000, function(){
console.log('动画结束');
});
使用delay()可暂停动画。
注意：
对不是block属性的DOM元素无效，对background-color无效。
11、四种提交数据的方式(contentType属性)
- application/x-www-form-urlencode
是form表单默认的提交方式，对key和value进行URL编码。
- multipart/form-data
当表单中有type=file控件时，提交方式就会变为multipart/form-data。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary) 。
- application/json
使用json数据和后台交互，适合RESTful接口设计。
- text/html
浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。