1. 小技巧
1.1 取消input输入框的记忆功能
在input上加上autocomplete="off"即可
<input type="text" name=’a’ autocomplete="off" />
1.2 sign(value)函数妙用
sign(value)函数会根据value的值为0,正数,负数,分别返回0,1,-1
1.3 form表单提交
在对form表单提交尤其是登录form的时候,我们可以直接使用οnclick="document:loginForm.submit()",例如:
1.4 js操作全选
// 点击全选按钮操作
$("#allChecked").click(function(){
// ①获取当前多选框自身的状态
var currentStatus = this.checked;
// ②用当前多选框的状态设置其他多选框
$(".itemBox").prop("checked", currentStatus);
});
// 选择框绑定事件(全选/全部选的反向操作)
$("#rolePageBody").on("click",".itemBox",function(){
// 获取当前已经选中
var checked = $(".itemBox:checked").length;
// 获取全部.itemBox的数量
var size = $(".itemBox").length;
$("#allChecked").prop("checked",checked == size);
})
注意:
1. allChecked为最上面的全选复选框
2. itemBox:为每一行复选框的class属性值
如图:
2. JSON
2.1 JSON字符串转换为JSON对象
方式一:
var obj = eval('(' + str + ')');
方式二:
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
方式三:JSON.parse函数
作用:将json字符串转换成json对象
语法:JSON. parse(text[,reviver]).
参数:
1. text 必须;一个有效的json字符串。
2. reviver 可选。
返回值:一个对象或数组
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
注意:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)
2.2 取值
转换成JSON对象之后
方式一:可以用obj.key的形式取值
方式二:可以用 obj['属性名']的形式。例如:var idvalue = obj['id']
2.3 json对象转成json字符串
方式一:toJSONString()
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
方式二:JSON.stringify()
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
注意:
1. 除了eval()函数是js自带的之外,其他的多个要领都来自json.js包
2. 新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。
3. 如果提示找不到toJSONString()和parseJSON()要领,则说明json包版本太低。
2.4 循环json对象
再js中,对json的循环可以使用如下方式进行循环
// jsonObj = {name:'张三',age:21,birth:new Date()};
for(var key in jsonObj){
if(jsonObj[k]!=jsonObj[k]){
return false;
}
}
3. JQuery操作
3.1 表单序列化
3.1.1 序列化成json对象
var data1 = $("#roleModal form").serializeArray();
数据格式为:
data2 = [{"name":"id","value":"2"},{"name":"name","value":"PM1"}]
3.1.2 序列化成字符串
var data2 = $("#roleModal form").serialize();
数据格式为:
data2 = id=2&name=PM1
3.2 jq实现文件上传
// 文件上传
function exportSure(){
//获取form数据
var detailDataExcel = document.getElementById('file_input').files[0];
var formData = new FormData();
formData.append("detailDataExcel",detailDataExcel);
//调用apicontroller后台action方法,将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
$.ajax({
url: "/TSM/market/postExcelData.action",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
mimeType:"multipart/form-data", //必须设置多媒体文件的方式上传
success: function (returnInfo) {
//上传成功后将控件内容清空,并显示上传成功信息
if(returnInfo.status == "300"){
$.messager.show({
title:'消息',
msg:"<span>上传成功!源文件有错误数据未导入成功,详情请点击‘查看失败报告’!</span>",
height:180,
timeout:9000,
showType:'fade'
});
} else if(returnInfo.status == "200"){
$.messager.show({
title:'消息',
msg:"<span>上传成功!</span>",
height:150,
timeout:3000,
showType:'fade'
});
clearForm();
// 然后重新加载树
$('#grid').datagrid('reload');
// 关闭对话框
$("#batchDialog").dialog('close');
}
},
error: function (returnInfo) {
//上传失败时显示上传失败信息
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
}
});
}
3.3 去除属性
$('#import_btn').removeAttr('disabled');
3.4 去除class与添加class
$('#import_btn').removeClass('btn-ok').addClass('btn-cancel');
3.5 判断是否有某个class
$('#budget_year').hasClass('selected')
3.6 radio表单操作
<input type="radio" name="ifSmr" id="ifSmrOK" value="1" style="cursor:pointer;">
1)获取选中值
var ifSmr = $("input[name='ifSmr']:checked").val();
2)取消选中
$("#ifSmrOK").prop("checked",false);
3)选中
$("#ifSmrOK").prop("checked","checked");
4)给一组radio赋值
// 给radio的name为icon值为treeNode.icon的单选框赋值
// 注意:如果是多选就在数组中赋多个值即可。
$("#menuSaveModal form input[name=icon]").val([treeNode.icon]);
3.7 Checkbox操作
3.7.1 取消所有勾选项
$("#smrContentTab:checkbox").prop("checked", false);
4. 数据操作
4.1 JS保留两位小数
1)四舍五入
var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45
2)不四舍五入
方式一:Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77
方式二:Number(15.7784514000.toString().match(/^\d+(?:\.\d{0,2})?/))
注意:
1. 输出结果为 15.77,不能用于整数如 10 必须写为10.0000
2. 如果是负数,请先转换为正数再计算,最后转回负数
4.2 字符串转数字
4.2.1 转换函数
1) parseInt():整数转换函数
parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN
注意:parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数
parseInt("AF", 16); //returns 175
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10
注意:如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值
parseInt("010"); //returns 8
parseInt("010", 8); //returns 8
parseInt("010", 10); //returns 10
2)parseFloat():浮点数转换函数
使用方式类似parseInt, 但是字符串必须以十进制形式表示浮点数,parseFloat()没有基模式
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN
注意:只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
4.2.2 强制类型转换
使用强制类型转换可以访问特定的值,即使它是另一种类型的。ECMAScript中可用的3种强制类型转换如下:
1)Boolean(value)——把给定的值转换成Boolean型;
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
2)Number(value)——把给定的值转换成数字(可以是整数或浮点数)
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
3)String(value)——把给定的值转换成字符串
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error
4.3 去除字符串尾部空格或指定字符
String.prototype.trimEnd = function (c) {
if (c == null || c == "") {
var str = this;
var rg = /s/;
var i = str.length;
while (rg.test(str.charAt(--i)));
return str.slice(0, i + 1);
}else {
var str = this;
var rg = new RegExp(c);
var i = str.length;
while (rg.test(str.charAt(--i)));
return str.slice(0, i + 1);
}
}
5. 动态绑定函数on
使用jQuery的on()函数可以动态绑定事件,用内置的event对象来获取当前事件对象
语法:
jQuery.on(事件名,选择器,function(e){
var nodeName = event.target.nodeName;
})
例1:
例2:
/*
使用jQuery的on()函数可以动态绑定事件
步骤:
1)首先找到所有动态生成的元素的静态父元素
2)on()函数的第一个参数:事件类型
3)on()函数的第二个参数:要绑定事件元素的选择器
4)on()函数的第三个参数:事件的响应函数 参数为事件
*/
$("#rolePageBody").on("click",".pencilBtn",function(e){
var nodeName = e.target.nodeName;
alert("nodeName = " + nodeName);
var roleName = $(this).parent().prev().text();
$("#roleForm input[name='id']").val(this.id);
$("#roleForm input[name='name']").val(roleName);
$("#roleModal").modal("show");
});
6. js控制元素的显示与隐藏
6.1 通过style控制
显示:document.getElementById('import_form').style.display = "block";
隐藏:document.getElementById('import_form').style.display = "none";
6.2 通过class控制
7. 自定义遮罩
7.1 定义div
<div class="wrap-dialog123 hide123" id="confirmDiv" style="display:none">
<div class="dialog123">
<div class="dialog123-header">
<span class="dialog123-title">错误提示:</span>
<span class="dialog123-close"><img src="/TSM/img/themes/icons/no.png" onClick="closeDialod123()" style="cursor:pointer;"/></span>
</div>
<div class="dialog123-body">
<span class="dialog123-message"></span>
</div>
<div class="dialog123-footer">
<input type="button" class="btn" id="confirm" value="确认" />
<input type="button" class="btn ml50" id="cancel" value="关闭" />
</div>
</div>
</div>
7.2 CSS代码
.wrap-dialog123 {
position: fixed;
top: 55px;
left: 0px;
width: 100%;
font-size: 16px;
text-align: center;
background-color: rgba(0, 0, 0, .4);
z-index: 9990;
}
.dialog123 {
position: relative;
margin-top: 10px;
margin: 15% auto;
width: 450px;
background-color: #FFFFFF;
}
.dialog123 .dialog123-header {
height: 20px;
padding: 10px;
margin-top:-150px;
background-color: lightskyblue;
}
.dialog123-title {
text-align:center;
font-size:18px;
font-weight: bold;
}
.dialog123-close {
margin-left: 400px;
margin-top: -32px;
display: block;
}
.dialog123 .dialog123-body {
max-height: 450px;
min-height:100px;
padding: 20px;
text-align: left;
overflow:auto;
}
.dialog123-message {
font-size:14px;
}
.dialog123 .dialog123-footer {
padding: 8px;
background-color: whitesmoke;
}
7.3 JS定义
function dialogBox(message, yesCallback, noCallback){
if(message){
$('.dialog123-message').html(message);
}
// 显示遮罩和对话框
$('.wrap-dialog123').removeClass("hide123");
// 确定按钮
$('#confirm').click(function(){
document.getElementById('confirmDiv').style.display = "none";
yesCallback();
});
// 取消按钮
$('#cancel').click(function(){
document.getElementById('confirmDiv').style.display = "none";
noCallback();
});
}
7.4 调用
dialogBox(err,
function () {
console.log("confirmed");
},
function(){
console.log("canceled");
}
);