工作笔记(五)
2018-05-13 本文已影响0人
wuyadream
第五个工作笔记
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的解析器对文件进行相应的处理。