常用前端代码

1.thymeleaf相关

1.1引入JS

添加html、script标签

<html xmlns:th="http://www.thymeleaf.org"> <!-- html标签 -->
  <head>
  	<meta charset="UTF-8">
  	<tilte></title>
    <script src="../../js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <style type="text/css"></style>
  </head>
<body></body>
	<script th:inline="javascript"> // js标签
  		function fun() {}
	</script>
</html>

1.2遍历数据和判断数据

页面获取Model中的数据

<td th:text="${order.orderId}"></td> <!-- 直接在页面获取数据 -->

JS获取Model中的数据

var userId = [[${userId}]];

页面遍历Model中的数据

<tr th:each="order,iterStat : ${orders}" th:id="${order.orderId}"> <!-- 1 -->
   <th th:text="${iterStat.count}"></th>
   <td th:text="${order.orderId}"></td>
   <td th:if="${order.price} == 0">待议价</td>
   <td th:if="${order.price} != 0" th:text="${order.price}"></td>                  
   <td th:if="${order.paid} == false or ${order.paid} == null">未支付</td>
   <td th:if="${order.paid} == true and ${order.paid} != null">已支付</td>
   <td th:if="${order.adminConfirm} == '0'">待审核</td>
   <td th:if="${order.adminConfirm} == '1'">未通过</td>
   <td th:if="${order.adminConfirm} == '2'">已通过</td>
   <td th:text="${order.attach}"></td>
   <td th:if="${order.valid == '0' and order.adminConfirm == '2' and order.paid == false}">
   	<input type="button" th:onclick="'sellerConfirm(\''+${order.orderId}+'\', \''+${order.buyerId}+'\', \''+${order.sellerId}+'\')'" class="showD" value="确认" />
   </td>
   <td th:if="${order.valid != '0' or order.adminConfirm != '2'}">
   	<input type="button" class="disable" value="确认" />
   </td>
</tr>

注：

1.th:each标签中的order用来遍历orders，th:id用来指定每一行数据的Id，iterStat称作状态变量，属性有：

属性含义

index 当前迭代对象的index（从0开始计算）

count 当前迭代对象的index(从1开始计算)

size 被迭代对象的大小

current 当前迭代变量

even/odd 布尔值，当前循环是否是偶数/奇数（从0开始计算）

first 布尔值，当前循环是否是第一个

last 布尔值，当前循环是否是最后一个

属性	含义
index	当前迭代对象的index（从0开始计算）
count	当前迭代对象的index(从1开始计算)
size	被迭代对象的大小
current	当前迭代变量
even/odd	布尔值，当前循环是否是偶数/奇数（从0开始计算）
first	布尔值，当前循环是否是第一个
last	布尔值，当前循环是否是最后一个

1.3点击事件

 <input type="button" th:onclick="'sellerConfirm(\''+${order.orderId}+'\', \''+${order.buyerId}+'\', \''+${order.sellerId}+'\')'" class="showD" value="确认" />

2.JavaScript相关

2.1数据封装\解析\转串\URL编码\解码

// 构造JS对象:sendData
// 构造方式1
var sendData={};
sendData.method="find";
sendData.dbName="tou";
sendData.tabName="WSNxcvdfghdh";
var order={};
order.orderId=tradeNo;
sendData.order=order;
// 构造方式2
var data = {
	workNumber: "12333",
    name: ""name""
	};

// 解析JSON数据（支持解析JOSN对象字符串和JSON数组字符串）
jsonObj = JSON.parse(jsonData); 
jsonArr = JSON.parse(jsonData);

// 将JS对象转为json字符串：sendData，
var jsStr = JSON.stringify(sendData)；

// 对URL进行URL编码（只会对非字母、非数字的特殊符号编码）
url = encodeURI(url);

// 对URL进行URL解码
url = decodeURI(url);

2.2 jQuery发起AJAX请求

GET请求

// 方式一
var data = {"parm1":"val1", "param2":"val2"}
$.get(url, data, function(retData){alert(retData);}); 
发送的GET请求URL如下:http://localhost:9090/pay?parm1=val1&param2=val2

第二个参数放入的数据类型是对象，如果放入json字符串，即stringify(data)的结果，发送的url请求则是

http://localhost:9090/pay?{"parm1":"val1", "param2":"val2"}

参数说明：

参数名含义

第一个参数必须，地址

第二个参数可选，键值对

第三个参数可选，请求成功时执行的回调函数，retData接收的参数，名字可以自定义
// 方式二
var data = {"parm1":"val1", "param2":"val2"}
$.ajax(
	{
       url:"http://localhost:8080/get", 
       type:"get", 
       data:data, // 
       success:function(result) {alert(result)}, 
       error:function(){}
   }
);
发送的GET请求URL如下:http://localhost:9090/pay?parm1=val1&param2=val2

data参数放入的数据类型是对象，如果放入json字符串，即stringify(data)的结果，发送的url请求则是

http://localhost:9090/pay?{"parm1":"val1", "param2":"val2"}

参数名	含义
第一个参数	必须，地址
第二个参数	可选，键值对
第三个参数	可选，请求成功时执行的回调函数，retData接收的参数，名字可以自定义

POST请求

// 方式一
var data = {"parm1":"val1", "param2":"val2"}
$.post(url, data, function(retData){alert(retData);});
发送POST请求，请求体中的参数是：``parm1=val1&param2=val2`；

如果使用stringify(data)把json对象转json字符串，则请求体中的参数是{"parm1":"val1", "param2":"val2"}=，这里会多一个等号，这是因为默认的Content-Type问题导致的
// 方式二
var data = {"parm1":"val1", "param2":"val2"}
data = JSON.stringify(data)  // 条件（1）
$.ajax(
  {url:"http://localhost:9090/pay", 
   type:"post", 
   contentType:"application/json", // 条件（2）， 如果没有这个参数，收到的数据会是{"parm1":"val1", "param2":"val2"}=  会多一个等号
   data:data, 
   success:function(result) {alert(result)}, 
   error:function(){}}
);
发送POST请求，请求体中的参数是：{"parm1":"val1", "param2":"val2"}

如果不使用stringify(data)把json对象转为json格式字符串，则收到请求体的数据是：parm1=val1&param2=val2

总得来说：

// 条件（1）不存在、（2）不存在：请求体的数据是parm1=val1&param2=val2

// 条件（1）不存在、（2）存在：请求体的数据也是parm1=val1&param2=val2

// 条件（1）存在、（2）不存在：请求体的数据是{“parm1”:”val1”, “param2”:”val2”}=会多一个等号

// 条件（1）存在、（2）存在：请求体的数据是{“parm1”:”val1”, “param2”:”val2”}

POST请求方式一，参数说明：

参数名含义

第一个参数必须，地址

第二个参数可选，键值对

第三个参数可选，请求成功时执行的回调函数，retData接收的参数，名字可以自定义

POST请求方式二，参数说明：

参数名含义

第一个参数地址

第二个参数请求类型

第三个参数指定内容类型

第四个参数发送的数据

第五个参数请求成功执行的回调函数

第六个参数请求失败执行的回调函数

参数名	含义
第一个参数	必须，地址
第二个参数	可选，键值对
第三个参数	可选，请求成功时执行的回调函数，retData接收的参数，名字可以自定义

参数名	含义
第一个参数	地址
第二个参数	请求类型
第三个参数	指定内容类型
第四个参数	发送的数据
第五个参数	请求成功执行的回调函数
第六个参数	请求失败执行的回调函数

2.3点击事件

点击事件，很常见的问题是拼串问题

html += "<td><input type='button' value='查看' onclick=readMsg(\'"+jsObj.msgId+"\')></td>"; 

注：在js中，单引号和双引号作用是一样的，如果双引号里嵌套有双引号就要用转义字符，同理，单引号里嵌套有单引号也要用转义字符，但是如果单引号里嵌套有双引号或者双引号里嵌套有单引号则不用转义符

2.4其他常用

页面跳转

window.location.href= "http://123.207.115.103:8100/index?token=" + userId;
window.location.replace(url); 
// 两种页面跳转方式的唯一区别是：到达新的页面后，点击后退，返回的页面不一样

延时函数

var pid = window.setInterval(function () {
  			// 每隔3s，执行function
			$.post("http://119.29.242.75:3002/db",
	                {
	                  "data": JSON.stringify(sendData)
	                },
	                function(data){
	                  jsonData = data;
	                  jsonObj = JSON.parse(jsonData);
	                  if (jsonObj[0].paid == true) {
                           // 满足条件，则终止延时函数
	                	  window.clearInterval(pid);
	                      window.location.replace(url);
	                  }
	                  
	        });
        }, 3000);

自定义函数

<script>
	function delGroup(groupId) {
     	alert("groupId"+groupId)
     }
</script>

JS的for循环

for (var i = 0; i < arr.length; ++i) {
  document.write(car[i]);
}

JS操作数组

// JS数组创建
var array = new Array();
array[0] = "aaa"; // 或者new Array("aaa", "bbb");
array[1] = "bbb";

// JS数组的删除
array.splice(index,1) // 删除调指定index位置的数据，会改变数组

JS构造Map

var map = {}; // 一定要初始化，否则报错
map[key] = value;

JS直接获取元素属性

var value = element.value;
var id = element.title;

3.jQuery详述

3.1 jQuery遍历

jQuery.each(jsArr, function(i, jsObj){});

// 一般地写法是：
for (var i in arr) {
	// i是下标，从0开始
}

注：jsObj用来遍历jsArr，jsArr是被遍历的对象，i是从0开始的下标

3.2 操纵JSON

for (var key in json) {
    console.log(key);     //获取key值
    console.log(json[key]); //获取对应的value值
}
或
$.each(json, function(i) {
    console.log(i); //获取键值
    console.log(json[i]); //获取对应的value
});

3.3 绑定点击事件

$(".increaseMember").click(function () {
	// 写触发的代码
});

若要在传输中获得这一行的参数，需要传入this参数

$(".infoChange").click(this,function() {
  	// 获取.infoChange所在标签的id属性
	var id = this.id;
	var departmentName = this.title;
});

4.DOM操作

4.1 JS的DOM操作

// 创建节点


// 获取页面节点的三种方式
element = document.getElementById("html元素的ID");
elements = document.getElementsByTagName("html元素的标签名");
elements = document.getElementsByName("html元素的name");

// 通过关系找标签
father = element.parentNode; // 获取当前节点的父节点
children = element.childNodes; // 获取当前节点的子节点（多个子节点）
firstSon = element.firstChild;// 获取当前节点的第一个子节点
lsatSon = element.lastChild; // 获取当前节点的最后一个子节点

// 获取节点的属性值
value = element.getAttribute("属性名");
// 获取节点的值
text = element.innerHTML;
// 设置节点属性值
element.setAttribute("height" , "px");

4.2 jQuery的DOM操作

/*
 *jQuery的三种标签定位方式and更复杂的定位
 */
$("#Id值") // 通过Id定位标签
$("标签名") // 通过标签名定位标签
$(".样式名") // 通过class定位标签
// 定位标签<div class="demo-container">
$("div.demo-container")


/** js函数会在页面加载完成后，被自动触发，有三种方式
  *
  *$表示JQuery对象，可以有好几种用法。比如传递选择器字符串、页面对象   *等，如果直接传函数体进去，表示当页面加载完毕时执行这个函数。
  *$(function(){})是$(document).ready(function(){})的简写
  *(function(){})代表一个匿名函数 
  */
$(document).ready(function() {}); // 方式一
$().ready(function() {}); // 方式二
$(function() {}); // 方式三（是方式一的简写）


/*
 *通过jQuery获取值，返回id=test的标签的value
 */
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>

/**
  *对标签夹杂的内容进行编辑或对标签进行删除
  */
$(".tbody-department-manage").empty(); // 清空tbody-department-manage的所有子标签
$(".tbody-department-manage").remove(); // 删除tbody-department-manage所在标签及其子标签
$(".tbody-department-manage").append("<tr><th>"+ num +"</th><td>"); // 在tbody-department-manage的最后一个子标签后面追加新的子标签
$(".tbody-department-manage").html("<tr><th>"+ num +"</th><td>"); // 完全替换tbody-department-manage标签的子标签

// 2018年12月3日 17:40:29
$('li.third-item').next() 

5.css操作

div.csdft

class=medium bLeftRequire CSS 多类选择器

for (var i=0; i < jsonArr.length; ++i) {

var jsonObj = jsonArr[i];

var departmentId = jsonObj.departmentId;

var departmentName = jsonObj.departmentName;

var appIdsArray = jsonObj.appIds;

var namesArray = jsonObj.names;

// 创建一个tr标签

var trEle = document.createElement(“tr”)

}

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

$(“[name=’checkbox’]”).each(function(){

alert();

});