JavaScript 常用代码案例

**************************************使用前导入jquery的CDN************************************
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
 

/********************使用前导入jquery的CDN**********************/
//<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
// <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

$(document).ready(function(){
  //文档加载完后执行代码
});

<!--手机端控制台代码-->
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script> eruda.init(); </script>

/********************获得URL参数的方法**********************/
//获得URL参数的方法
var request = { 
	QueryString : function(val) { //传入参数为要获取请求参数名
		var uri = window.location.search; //获取URL
		var re = new RegExp("" +val+ "=([^&?]*)", "ig"); 
		return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null); 
	} 
}

$(document).ready(function(){
	//调用 获得URL参数的方法
	var eId = request.QueryString("eId");
	alert(eId);
	//$.("#test").attr("action","/employee/editEmployee?eId="+eId);
});



/********************jquery操作Cookie**********************/
//清除cookie的值
$("#logout").click(function(){
	$.cookie('employeeName',null);
	window.location.href="/index.html";
});
//设置cookie的值
$("#setCookie").click(function(){
	//$.cookie('the_cookie', 'the_value11111', { expires: 7 });
	$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
	//有效日期为7天，并设置有效路径
});
//查看cookie的值
$("#lookCookie").click(function(){
	//$.cookie('employeeTel')
	$("#cookieValue").text($.cookie('employeeTel'));
});





/********************js定时器的使用**********************/
/*
1.循环执行：
var timeid = window.setInterval（“方法名或方法”，“延时”）;
window.clearInterval(timeid);
 */
//循环执行，每隔1秒钟执行一次 1000 ，时间单位是毫秒
var t1=window.setInterval(getDateTime, 1000);
function getDateTime() {
   var myDate = new Date();//获取系统当前时间
   var date = myDate.toLocaleString();
   document.getElementById('date').innerHTML = date;
}
//去掉定时器的方法   
//window.clearInterval(t1); 


//定时执行，5秒后执行，只执行一次
var t1=window.setTimeout(refreshCount, 1000 * 5);
function refreshCount() {
  console.log("ready");
}
//去掉定时器的方法  
window.clearTimeout(t1); 



/********************jquery的ajax案例**********************/
//被点击的按钮的id
$("#signAjaxSubmit").click(function(){
    //alert("ajaxSubmit");
    var employeeId=$.cookie("employeeId");
    $.ajax({
		url : "/attendance/signIn",//$('#form').attr("action") ,
		type : "post", 
		data : { //$('#form').serialize() ,form是表单的id，这里获取表单的数据传到后台
			"name":'这里是你需要传递的用户名称值',
			"employeeId" : employeeId ,
			"objectData" :JSON.stringify(data),/*这样后台可以接受对象*/
		},
		async : true, 
		success : function(data) {
			if (data.statusCode == "200") {
				//window.location.href = data.data.href;
				alert(data.statusMsg);
			} else {
				alert(data.statusMsg);
				//window.location.href = "/index.html";
			}
		},
		error : function(data) {
			alert(JSON.stringify(data));
		}
	});
});



/*********************jquery添加元素***********************/
$("p").append() - 在被选元素的结尾插入内容
$("p").prepend() - 在被选元素的开头插入内容
$("p").after() - 在被选元素之后插入内容
$("p").before() - 在被选元素之前插入内容
/*
 *append/prepend 是在选择元素内部嵌入。（仍然该元素的内部）
 *after/before 是在元素外面追加。（在该元素外面）
/*



/*********************设置属性 - attr()**********************
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
*/
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});


/*
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
*/
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});



/*
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
*/
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});





/******************jQuery - 删除元素**************************/
/*   https://www.runoob.com/jquery/jquery-dom-remove.html    */






/******************JSON数据解析**************************/
/*  https://www.cnblogs.com/chentging/p/7325099.html    */

/* 
 *JSON取值(key是中文或者数字)方式详解
 *先准备一个json对象用于演示
 */
var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'};

/*使用JS中with关键字*/
 with(json) {
     console.log(name);//输出:zhangsan
     console.log(年龄);//输出:23
     console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题
 }

/*最常见的传统的读取key*/
 console.log(json.name);//输出:zhangsan
 //key是中文也是支持的
 console.log(json.年龄);//输出:23
 //key是Number类型或者String类型的数字都不能这么读取
 console.log(json.404);//报错

/*通用万能型:json['key']*/
 console.log(json['name']);//输出:zhangsan
 console.log(json['年龄']);//输出:23
 console.log(json['404']);//输出:你可能迷路了

/*json[key]*/
 console.log(json[name]);//输出:undefinded
 console.log(json[年龄]);//报错
 console.log(json[404]);//输出:你可能迷路了


/**/
var data = 
{
	"statusCode":201,
	"statusMsg":"状态信息",
	"version":"V3.0.0","token":"",
	"data":{
		"employeeId":"1",
		"attendance":{
			"attendanceId":1,
			"employeeName":"张三",
			"startTimeAm":"2019-03-14T18:32:47.000+0000",
			"endTimeAm":"2019-03-14T18:35:02.000+0000",
			"startTimePm":"2019-03-14T18:36:54.000+0000",
			"endTimePm":"2019-03-15T00:23:10.000+0000",
			"attendanceData":"2019-03-15",
			"attendanceExplain":null,
			"gmtModified":"2019-03-15T00:23:10.000+0000",
			"gmtCreate":"2019-03-14T18:32:47.000+0000"
		}
	}
}
alert(data.statusMsg);//输出内容：状态信息
alert(data.data.attendance["employeeName"]);//输出内容：张三