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=PM13.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.452）不四舍五入
方式一：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 102）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 – object2）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) 1003）String(value)——把给定的值转换成字符串
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error4.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");
}
);
2037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
