前端常用JS操作

1. 小技巧

1.1 取消input输入框的记忆功能

在input上加上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:"上传成功！源文件有错误数据未导入成功，详情请点击‘查看失败报告’！",
					height:180,
					timeout:9000,
					showType:'fade'
				 });

		    } else if(returnInfo.status == "200"){
			$.messager.show({
					title:'消息',
					msg:"上传成功！",
					height:150,
					timeout:3000,
					showType:'fade'
				 });

		        clearForm();

		        // 然后重新加载树
			$('#grid').datagrid('reload');

		        // 关闭对话框

		       $("#batchDialog").dialog('close');
		   }

		},
		error: function (returnInfo) {
			//上传失败时显示上传失败信息
			document.getElementById('uploadInfo').innerHTML = "" + returnInfo + "";
		}
	});
}

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表单操作

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

 

     

	 错误提示：
	 
     

     

	 
     
     

	 
	 
     
 

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");
	}
);