查看JS方法的兼容性
一、关于data-xxx
1)命名不要包含大写字母
第一种:(可行)
<div id="test" data-user-id="99"></div>
<script type="text/javascript">
$(function(){
console.log($('#test').data('userId')) // 99
console.log($('#test').data('user-id')) // 99
})
</script>
第二种:(不可行),data-xxx中不要包含大写字母
<div id="test" data-userId="99"></div>
<script type="text/javascript">
$(function(){
console.log($('#test').data('userId')) // undefined
console.log($('#test').arrt('data-userId')) // 99
})
</script>
2)会变动的data-xxx,data(name)不能改变页面上显示的值,请使用attr('data-xxx')进行改变。需要注意的是,如果获取的值是数字,attr('data-xxx')获取的值是String类型,data(name)获取的值是Number类型。
<div id="test" data-userid="99"></div>
<button id="btn">改变</button>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('#test').data('userid',88) //页面上的值仍是不变的
console.log($('#test').data('userid')) // 88
console.log($('#test').attr('data-userid')) // 99
})
})
-----------------------------------------------------------------------------
$(function(){
$('#btn').click(function(){
$('#test').attr('data-userid',88) // 能改变页面上的值
console.log($('#test').data('userid')) // 88
console.log($('#test').attr('data-userid')) // 88
})
})
</script>
二、JSON.parse()
使用此方法将字符串转为JSON对象时,必须保证字符串严格符合JSON格式('{a:20}',不能通过a没有加双引号)
三、数组与类数组
如使用document.getElementsByClassName获取的元素数组,是一个类数组。
1)类数组没有数组的方法。
2)不要使用for in去遍历类数组,会遍历出多余的数据。
四、在for中绑定事件
这样会导致每个按钮的输出值都为3,因为它使用了for中的i,i在循环后的值就是3,可以使用闭包解决此问题。
参考地址:https://blog.csdn.net/u011320646/article/details/17048647
var btn = document.getElementsByClassName('test')
for(var i = 0; i < 3; i++) {
btn[i].onclick = function(){
console.log(i)
}
}
五、获取元素样式
1)style:读取的只是元素的内联样式,即写在元素的 style 属性上的样式,既支持读也支持写。
2)getComputedStyle和currentStyle:读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式,仅支持读并不支持写入。
function getStyle(ele, sty) { //ele是元素,sty是样式
var style = null;
if(window.getComputedStyle) {
//如果属性名是变量需要把"."换成"[]"
style = window.getComputedStyle(ele)[sty]; //标准浏览器支持
} else {
style = ele.currentStyle[sty]; //低版本ie只支持这种方式
}
return style;
}
六、js进行浮点数运算存在精度问题
1)使用math.js插件。
2)使用以下代码解决。参考地址找不到了....
/**
* js浮点数精确计算,正负计算数值小于
* Math.abs(Math.pow(2, 53))2的53次方,还不是很了解,粗略说明
* accAdd(num1, num2)--加
* accSub(num1, num2)--减
* accDiv(num1, num2)--除
* accMul(num1, num2)--乘
*/
(function(window) {
'use strict'
function ExactCalc() {
return ExactCalc.prototype.init();
}
ExactCalc.prototype = {
constructor: ExactCalc,
init: function() {
},
accAdd: function(num1, num2) { //加
num1 = Number(num1);
num2 = Number(num2);
var dec1, dec2, times;
try {
dec1 = this.countDecimals(num1) + 1;
} catch (e) {
dec1 = 0;
}
try {
dec2 = this.countDecimals(num2) + 1;
} catch (e) {
dec2 = 0;
}
times = Math.pow(10, Math.max(dec1, dec2));
// var result = (num1 * times + num2 * times) / times;
var result = (this.accMul(num1, times) + this.accMul(num2, times)) / times;
return this.getCorrectResult("add", num1, num2, result);
// return result;
},
accSub: function(num1, num2) { //减
num1 = Number(num1);
num2 = Number(num2);
var dec1, dec2, times;
try {
dec1 = this.countDecimals(num1) + 1;
} catch (e) {
dec1 = 0;
}
try {
dec2 = this.countDecimals(num2) + 1;
} catch (e) {
dec2 = 0;
}
times = Math.pow(10, Math.max(dec1, dec2));
// var result = Number(((num1 * times - num2 * times) / times);
var result = Number((this.accMul(num1, times) - this.accMul(num2, times)) / times);
return this.getCorrectResult("sub", num1, num2, result);
// return result;
},
accDiv: function(num1, num2) { //除
num1 = Number(num1);
num2 = Number(num2);
var t1 = 0,
t2 = 0,
dec1, dec2;
try {
t1 = this.countDecimals(num1);
} catch (e) {}
try {
t2 = this.countDecimals(num2);
} catch (e) {}
dec1 = this.convertToInt(num1);
dec2 = this.convertToInt(num2);
var result = this.accMul((dec1 / dec2), Math.pow(10, t2 - t1));
return this.getCorrectResult("div", num1, num2, result);
// return result;
},
accMul: function(num1, num2) { //乘
num1 = Number(num1);
num2 = Number(num2);
var times = 0,
s1 = num1.toString(),
s2 = num2.toString();
try {
times += this.countDecimals(s1);
} catch (e) {}
try {
times += this.countDecimals(s2);
} catch (e) {}
var result = this.convertToInt(s1) * this.convertToInt(s2) / Math.pow(10, times);
return this.getCorrectResult("mul", num1, num2, result);
// return result;
},
countDecimals: function(num) {
var len = 0;
try {
num = Number(num);
var str = num.toString().toUpperCase();
if (str.split('E').length === 2) { // scientific notation
var isDecimal = false;
if (str.split('.').length === 2) {
str = str.split('.')[1];
if (parseInt(str.split('E')[0]) !== 0) {
isDecimal = true;
}
}
var x = str.split('E');
if (isDecimal) {
len = x[0].length;
}
len -= parseInt(x[1]);
} else if (str.split('.').length === 2) { // decimal
if (parseInt(str.split('.')[1]) !== 0) {
len = str.split('.')[1].length;
}
}
} catch (e) {
throw e;
} finally {
if (isNaN(len) || len < 0) {
len = 0;
}
return len;
}
},
convertToInt: function(num) {
num = Number(num);
var newNum = num;
var times = this.countDecimals(num);
var temp_num = num.toString().toUpperCase();
if (temp_num.split('E').length === 2) {
newNum = Math.round(num * Math.pow(10, times));
} else {
newNum = Number(temp_num.replace(".", ""));
}
return newNum;
},
getCorrectResult: function(type, num1, num2, result) {
var temp_result = 0;
switch (type) {
case "add":
temp_result = num1 + num2;
break;
case "sub":
temp_result = num1 - num2;
break;
case "div":
temp_result = num1 / num2;
break;
case "mul":
temp_result = num1 * num2;
break;
}
if (Math.abs(result - temp_result) > 1) {
return temp_result;
}
return result;
}
},
ExactCalc.prototype.init.prototype = ExactCalc.prototype;
window.ExactCalc = ExactCalc;
})(window);
七、关联数组
1)关联数组的长度为0.
2)关联数组的下标如果是数字,那么他的长度是根据下标取值的。
var a = [];
a['99'] = 123
console.log(a) // [emptyx99, 123], a.length = 100
八、使用formData上传文件
<form enctype="multipart/form-data" id="excelfile">
<div class="col-md-6">
<input type="file" name="excelfile" >
</div>
<div class="col-md-6">
<span class="btn btn-default" id="uploadFile">上传文件</span>
</div>
</form>
$("#uploadFile").click(function () {
var aab = new FormData($("#excelfile")[0]);
$.ajax({
type:"post",
url:"/admin/questpermit/importUser",
cache: false,
data: aab,
processData: false,
contentType: false,
success:function (res) {
console.log("上送考试数据")
console.log(res)
}
})
})
本例子中name="excelfile"一定要有,主要是根据后台的需求上传