Js + Jquery 积累

js 遍历

js 中 == 和 === 的区别

console.log(1==1)
输出: true

console.log(1=='1')
输出: true

console.log(1==='1')
输出: false

$(’#formid’).serialize()

$(’#formid’).serialize()
${fn:escapeXml(demoName)} 解决Xss 问题

select 复选

需要使用 ctrl / command 进行多选操作

<select multiple="multiple" size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

避免页面自动填充密码

<input type="text" id="id" name="password" placeholder="密码"  autocomplete="off" onfocus="this.type='password'">

Jquery 模拟 点击事件

//全局事件
 $(function(){
 	//id 为 demoId的点击事件
	 $("#demoId").click(function(){test()});
	 //模拟点击 id 为demoId的元素
	 $("#demoId").click();
 });
 function test(){
	 alert("hello");
 }

Jquery 全局 click 事件捕获

//全局事件
 $(function(){
     //对 id 为demoid 的点击事件进行捕获
	 $("#demoid").click(function(){
		test();
	});
 });
 //单独写一个 function 
 function test(){
 	alert(""点击了);
 }

innerHTML 和 Jquery 的 click 事件

使用 innerHTML 新增的元素无法通过 $("#idName").click(function(){内容});触发，解决办法是 innerHTML 同时写好 onclick 的内容

举例

//新增一个 function 方法
function funName(){alert("触发了")};

//另一个function 的代码片段
 //获取页面元素
  demoId = document.getElementById("demoId");
  demoId.innerHTML= demoId.innerHTML +
  "<input type=\"button\" value=\"尾页\" οnclick=\"funName();return false;\"/>"
 +"<br>"

Jquery 格式化时间

需要写一个function 方法
后端可以直接传递时间格式

js 方法代码

/*日期格式化
 * format 时间格式 yyyy-MM-dd hh:mm:ss 24小时制
 * var date=new Date();  var time=date.farmet("yyyy-MM-dd hh:mm:ss");
 * var date=new Date(12345678);  var time=date.farmet("yyyy-MM-dd hh:mm:ss");
 * */
Date.prototype.format = function(format){ 
	 var o = { 
	 "M+" : this.getMonth()+1, //month 
	 "d+" : this.getDate(), //day 
	 "h+" : this.getHours(), //hour 
	 "m+" : this.getMinutes(), //minute 
	 "s+" : this.getSeconds(), //second 
	 "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
	 "S" : this.getMilliseconds() //millisecond 
	 }

	 if(/(y+)/i.test(format)) { 
	 format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
	 }

	 for(var k in o) { 
	 if(new RegExp("("+ k +")").test(format)) { 
	 format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
	 } 
	 } 
	 return format; 
}

用法举例

//新创建时间
var date=new Date();  var time1=date.farmet("yyyy-MM-dd hh:mm:ss");
//整形时间，适用于后端传递来的时间类型或者时间戳
var date=new Date(12345678);  var time2=date.farmet("yyyy-MM-dd hh:mm:ss");

ajax +js 遍历结果，向页面新增内容

页面

<p id="demoId"></p>

Java 实体代码

public class UserInfo implements Serializable {
	private static final long serialVersionUID = 1L;
	private String userName;
	private int age;
	//get/set 方法略
	}

Java Controller 方法

@GetMapping("/test")
	@ResponseBody
	public Map<String,Object> test(){
		Map<String,Object> map=new HashMap<String,Object>();
		List list=new ArrayList();
		UserInfo u=new UserInfo("123",25);
		list.add(u);
		list.add(u);
		list.add(u);
		list.add(u);
		map.put("list", list);
		return map;
	}

js 方法

function initializtion(){
	$.ajax({
		url : "test",// 请求地址
		//timeout : 600000,//超时时间设置，单位毫秒
		async : false,// 异步
		cache : false,// 缓存
		type : 'get',// 请求方式
		//data: {"name":"123"},//data: $('#formid').serialize(),//序列化表单-当触发一个form表单提交的ajax事件的时候，这个序列化方法自动将数据转化为json格式传递给后台
		dataType : 'json',// 服务器返回的数据类型
		success : function(msg) {// 请求成功后调用的
			//console.log(JSON.stringify(msg.list));
			//console.log(msg.list);
			demoId = document.getElementById("demoId");
			msg.list.forEach(test);
		},
		error :function(){
			alert("异常");
			}
	});	
}
//被循环调用的方法
function test(item, index) {
	demoId.innerHTML = demoId.innerHTML + "index[" + index + "]: userName" + item.userName +" age"+item.age + "<br>"; 
}

js 向页面动态增加内容

页面

<p id="demoId"></p>

js 代码

var number=123;
demoId = document.getElementById("demoId");
demoId.innerHTML = demoId.innerHTML + "自定义内容" + number + "<br>"; 

操作 JavaScript 的一个网站

http://www.runoob.com/jsref/jsref-foreach.html

Js 页面监听启动

 $(function () {
 //...
 });

捕获鼠标放到某元素之上的事件

$("#demoId").mouseover(function(){
   alert("你的鼠标经过了");
 });

js 获取全局路径

直接在单独到 js 文件中是无法获取上下文路径的，需要先单独在jsp页面设置一下，然后再在js 文件中直接使用

在 jsp 页面声明 javascript 片段

<script type="text/javascript">
    var contextPath = "${pageContext.request.contextPath}";
</script>

在 jsp 页面使用 jstl标签

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />

在 jsp 页面声明 java 代码

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

js 操作 Json

字符转 JSON 对象 并读取

var str1 = '{ "name": "123", "age": 11 }';//JSON字符串
var obj1 = JSON.parse(str1); //由JSON字符串转换为JSON对象 
console.log(obj1.name);//打印 JSON 对象的name属性值

JSON 对象 转 字符串

var str2=JSON.stringify(obj1);//将 JSON 对象转化为 字符串
console.log(str2);//打印字符串到控制台