jQuery對象

jQuery對象就是通過jQuery($())包裝DOM對象後產生的對象
jQuery對象是jQuery獨有的
jQuery對象無法使用DOM對象的任何方法，同樣DOM對象也不能使用jQuery裏的任何方法
約定：如果獲取的是jQuery對象，那麼要在變量前面加上$.
— var $variable = jQuery對象
— var　variable = DOM對象

jQuery對象轉成DOM對象

jQuery對象不能使用DOM中的方法，但如果jQuery沒有封裝想要的方法，不得不使用DOM對象的時候，有兩種處理方法：
　　1、jQuery對象是一個數組對象，可以通過[index]的方法來得到對應的DOM對象

		var $cr = $("#cr");
		var cr = $cr[0];

　　2、使用jQuery對象中的get(index)方法得到相應的DOM對象

		var $cr = $("#cr");
		var cr = $cr.get(0);

DOM對象轉成jQuery對象

對於一個DOM對象，只需要使用$()把DOM對象包裝起來（jQuery對象就是jQuery包裝DOM對象後產生的對象），就可以獲得一個jQuery對象

		var cr = document.getElementById("cr");
		var $cr = $(cr);

JS與jQuery的等價

$(function() { …code…})相當於window.οnlοad=function(){ …code… }
$(this).text()等價於this.firstChild.nodeValue(在button元素節點中，其他的視情況)

 <!-- 情景：有倆<buttion>元素節點 -->
 var buttons = document.getElementsByTagName("button");
 for (var i = 0; i < buttons.length; i++) {
 	    alert(buttons[i].firstChild.nodeValue);
 } 
 <!-- 等價於 -->
 alert($("button")[0].firstChild.nodeValue);
 alert($("button")[1].firstChild.nodeValue);

各種選擇器

1. 基本選擇器

使用id選擇器選擇id=btn1的元素：$("#btn1")
使用class選擇器選擇class=mini的元素：$(".mini")
使用元素名選擇器選擇span和div的元素：$(“span,div”)

爲選擇的jQuery對象添加onclick響應函數： $("#btn1").click(function() {})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本選擇器 -->
<title>基本選擇器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
</style>
<!-- 導入jQuery庫 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	$(function() {
	    <!-- 1.使用id選擇器選擇id=btn1的元素:$("#btn1") -->
	    <!-- 2.爲選擇的jQuery對象添加onclick響應函數 -->
	    <!-- $("#btn1").click(function() {}) -->
	    $("#btn1").click(function() {
	    	$("#one").css("background","#ffaaaa");
	    });
	    $("#btn2").click(function() {
	    	$(".mini").css("background","#ffaaaa");
	    });
	    $("#btn3").click(function() {
	    	$("div").css("background","#ffaaaa");
	    });
	    $("#btn4").click(function() {
	    	$("*").css("background","#ffaaaa");
	    });
	    $("#btn5").click(function() {
	    	$("span,#two").css("background", "#ffaaaa");
	    });
	})
</script>
</head>
<body>
	<input type="button" value="選擇id爲one的元素" id="btn1">
	<input type="button" value="選擇class爲mini的所有元素" id="btn2">
	<input type="button" value="選擇元素名爲div的所有元素" id="btn3">
	<input type="button" value="選擇所有元素" id="btn4">
	<input type="button" value="選擇所有的span元素和id爲two的元素" id="btn5">
	
	<br><br>
	
	<div class="one" id="one">
		id爲one,class爲one的div
		<div class="mini">class爲mini</div>
	</div>
	<div class="one" id="two" title="test">
		id爲two，class爲one，title爲test的div
		<div class="mini" title="other">class爲mini,title爲other</div>
		<div class="mini" title="test">class爲mini,title爲test</div>
	</div>
	<div class="one">
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini"></div>
	</div>
	<div class="one">
		<div class="mini">class爲mini</div>
		<span>span1</span>
		<span>span2</span>
	</div>
</body>
</html>

2. 層次選擇器

使用場景：想通過DOM元素之間的層次關係來獲取特定元素，例如後代元素，子元素，相鄰元素，兄弟元素等，則需要使用層次選擇器。

$(“ancestor descendant”)：選取ancestor的所有descendant（後代）元素
$(“parent > child”)：選取parent元素下的child(子)元素
$(“prev + next”)：選取緊接在prev元素後的下一個next元素

$(“prev ~ siblings”)：選取prev元素後的所有siblings()元素，只要是同輩節點就可以選取

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 層次選擇器 -->
<title>層次選擇器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
</style>
<!-- 導入jQuery庫 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	$(function() {
	    <!-- 1.使用id選擇器選擇id=btn1的元素:$("#btn1") -->
	    // 2.爲選擇的jQuery對象添加onclick響應函數
	    // $("#btn1").click(function() {})
	    $("#btn1").click(function() {
	    	$("#one + div").css("background","#ffaaaa");
	    });
	    $("#btn2").click(function() {
	    	$(".mini > span").css("background","#ffaaaa");
	    });
	    $("#btn3").click(function() {
	    	$("div span").css("background","#ffaaaa");
	    });
	    $("#btn4").click(function() {
	    	$("#two ~ div").css("background","#ffaaaa");
	    });
	    $("#btn5").click(function() {
	    	$("#two").siblings("div").css("background","#ffaaaa");
	    });
	    $("#btn6").click(function() {
	    	$("#one").nextAll("span:first").css("background", "#ffaaaa");
	    });
	    
	})
</script>
</head>
<body>
	<input type="button" value="選擇id爲one的下一個div元素" id="btn1">
	<input type="button" value="選擇class爲mini的span子元素" id="btn2">
	<input type="button" value="選擇元素名爲div的所有元素" id="btn3">
	<input type="button" value="選擇id爲two的所有div兄弟姐妹元素" id="btn4">
	<input type="button" value="選擇id爲two的所有div兄弟姐妹元素" id="btn5">
	<input type="button" value="選擇id爲one的緊鄰span元素" id="btn6">
	
	<br><br>
	
	<div class="one" id="one">
		id爲one,class爲one的div
		<div class="mini">class爲mini</div>
	</div>
	<div class="one" id="two" title="test">
		id爲two，class爲one，title爲test的div
		<div class="mini" title="other">class爲mini,title爲other</div>
		<div class="mini" title="test">class爲mini,title爲test</div>
	</div>
	<div class="one" >
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini">class爲mini</div>
		<div class="mini"><span>mini下的span子元素</span></div>
	</div>
	<div class="one">
		<div class="mini">class爲mini</div>
		<span>span1</span>
		<span>span2</span>
	</div>
	<span>id爲one的緊鄰span元素</span>
	<span>id爲one的第二個span元素</span>
</body>
</html>

3. 過濾選擇器

　過濾選擇器主要是通過特定的過濾規則來篩選出所需要的DOM元素，該選擇器都以"："開頭
　可分爲基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾，表單對象屬性過濾

基本過濾選擇器
　　基礎知識點：

選擇器	描述
:first	選取第一個元素
:last	選取最後一個元素
:not(selector)	去除所有與給定選擇器匹配的元素
:even	選取索引值偶數的所有元素，索引從0開始
:odd	選取索引值奇數的所有元素，索引從0開始
:eq(index)	選取索引等於index的元素，索引從0開始
:gt(index)	選取索引大於index的元素，索引從0開始
:lt(index)	選取索引小於index的元素，索引從0開始
:header	獲取所有的標題元素，如h1,h2等
:animated	選取當前正在執行動畫的所有元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本選擇器 -->
<title>基本過濾選擇器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
		
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
	div.hide{
		display: none;
	}
</style>
<!-- 導入jQuery庫 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	// 在加載完DOM文檔樹後執行代碼
	$(document).ready(function() {
		function anmateIt() {
		    $("#mover").slideToggle("slow",anmateIt);
		}
		anmateIt();
		
		$("#btn1").click(function() {
			$("div:first").css("background", "#ffeeaa");
		});
		$("#btn2").click(function() {
			$("div:last").css("background","#ffeeaa");
		});
		$("#btn3").click(function() {
			$("div:not(.one)").css("background","#ffeeaa");
		});
		<!-- 索引值從0開始 -->
		$("#btn4").click(function() {
			$("div:even").css("background","#ffeeaa");
		});
		$("#btn5").click(function() {
			$("div:odd").css("background","#ffeeaa");
		});
		<!-- "&gt;" 爲  ">" ； "&lt;" 爲 "<" ； "eq" 爲 "=" -->
		$("#btn6").click(function() {
			$("div:gt(3)").css("background","#ffeeaa");
		});
		$("#btn7").click(function() {
			$("div:eq(3)").css("background","#ffeeaa");
		});
		$("#btn8").click(function() {
			$("div:lt(3)").css("background","#ffeeaa");
		});
		$("#btn9").click(function() {
			$(":header").css("background","#ffeebb");
		});
		$("#btn10").click(function() {
			$(":animated").css("background","#ffeebb");
		});
		$("#btn11").click(function() {
			$("#two").nextAll("span:first").css("background","#ffeebb");
		});
		
	});
</script>
</head>
<body>
	<input type="button" value="選擇第一個div元素" id="btn1">
	<input type="button" value="選擇最後一個div元素" id="btn2">
	<input type="button" value="選擇class不爲one的所有div元素" id="btn3">
	<input type="button" value="選擇索引值爲偶數的div元素" id="btn4">
	<input type="button" value="選擇索引值爲奇數的div元素" id="btn5">
	<input type="button" value="選擇索引值大於3的div元素" id="btn6">
	<input type="button" value="選擇索引值等於3的div元素" id="btn7">
	<input type="button" value="選擇索引值小於3的div元素" id="btn8">
	<input type="button" value="選擇所有的標題元素" id="btn9">
	<input type="button" value="選擇當前正在執行動畫的所有元素" id="btn10">
	<input type="button" value="選擇id爲two的下一個span元素" id="btn11">
	<br><br>
	<h3>基本選擇器.</h3>
		<br><br>
		<div class="one" id="one">
			id 爲 one,class 爲 one 的div
			<div class="mini">class爲mini</div>
		</div>
		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>
		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>
		<div style="display:none;" class="none">style的display爲"none"的div</div>
		<div class="hide">class爲"hide"的div</div>
		<div>
			包含input的type爲"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素 111^^</span>
		<span id="span">^^span元素 222^^</span>
		<div id="mover">正在執行動畫的div元素.</div>
</body>
</html>

內容過濾選擇器
　　基本知識點：內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上

選擇器	描述
:contains(text)	選取含有文本內容爲text的元素
:empty	選取不包含子元素或者文本的空元素
:has(selector)	選取含有選擇器所匹配的元素的元素
:parent	選取含有子元素或者文本的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本選擇器 -->
<title>內容過濾選擇器</title>
<style type="text/css">
	div,span,p {
		width: 140px;
		height: 140px;
		margin: 5px;
		background: #aaa;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Verdana;
		
	}
	div.mini {
		width: 55px;
		height: 55px;
		background-color: #aaa;
		font-size: 12px;
	}
	div.hide{
		display: none;
	}
</style>
<!-- 導入jQuery庫 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	// 在加載完DOM文檔樹後執行代碼
	$(document).ready(function() {
		function anmateIt() {
		    $("#mover").slideToggle("slow",anmateIt);
		}
		anmateIt();
		
		$("#btn1").click(function() {
			$("div:contains('di')").css("background", "#ffeeaa");
		});
		$("#btn2").click(function() {
			$("div:empty").css("background","#ffeeaa");
		});
		$("#btn3").click(function() {
			$("div:has(.mini)").css("background","#ffeeaa");
		});
		$("#btn4").click(function() {
			$("div:parent").css("background","#ffeebb");
			//$("div:not(:empty)").css("background", "#ffeebb");
		});
	});
</script>
</head>
<body>
	<input type="button" value="選擇文本含有di的div元素" id="btn1">
	<input type="button" value="選擇空的div元素" id="btn2">
	<input type="button" value="選擇含有class爲mini元素的div元素" id="btn3">
	<input type="button" value="選取含有子元素或者文本的div元素" id="btn4">
	<br><br>
	<h3>基本選擇器.</h3>
		<br><br>
		<div class="one" id="one">
			id 爲 one,class 爲 one 的div
			<div class="mini">class爲mini</div>
		</div>
		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>
		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>
		<div style="display:none;" class="none">style的display爲"none"的div</div>
		<div class="hide">class爲"hide"的div</div>
		<div>
			包含input的type爲"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素 111^^</span>
		<span id="span">^^span元素 222^^</span>
		<div id="mover">正在執行動畫的div元素.</div>
</body>
</html>

可見性過濾選擇器
　　基本知識點：可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素;hidden不僅包含樣式屬性display爲none的元素，也包含文本隱藏域（<input type="hidden">）和visible:hidden之類的元素

選擇器	描述
:hidden	選取所有不可見的元素
:visible	選取所有可見的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 基本選擇器 -->
<title>可見性過濾選擇器</title>
<style type="text/css">
	div, span, p {
	    width: 140px;
	    height: 140px;
	    margin: 5px;
	    background: #aaa;
	    border: #000 1px solid;
	    float: left;
	    font-size: 17px;
	    font-family: Verdana;
	}
	
	div.mini {
	    width: 55px;
	    height: 55px;
	    background-color: #aaa;
	    font-size: 12px;
	}
	
	div.hide {
	    display: none;
	}			
</style>
<!-- 導入jQuery庫 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>	
<script type="text/javascript">
	// 在加載完DOM文檔樹後執行代碼
	$(document).ready(function() {
	    
	    $("#btn1").click( function(){
			$("div:visible").css("background", "#ffbbaa");
		});
	    $("#btn2").click(function() {
			//alert($("div:hidden").length);
			//show(time): 可以使不可見的元素變爲可見, time 表示時間, 以
			//毫秒爲單位
			//jQuery 的很多方法支持方法的連綴, 即一個方法的返回值來時調用該
			//方法的 jQuery 對象: 可以繼續調用該對象的其他方法. 
			$("div:hidden").show(200).css("background", "#ffbbee");
	    });
	    $("#btn3").click(function() {
			<!-- attr()傳入一個參數是獲取，-->
			<!--  兩個參數是對第一個參數設置 -->
			//alert($("input:hidden").attr("value"));
			<!-- val()獲取屬性的值 -->
			alert($("input:hidden").val());
	    });
	});
</script>
</head>
<body>
	<input type="button" value="選取所有可見的  div 元素" id="btn1">
	<input type="button" value="選擇所有不可見的 div 元素" id="btn2" />
	<input type="button" value="選擇所有不可見的 input 元素" id="btn3" />
	<br><br>
		<div class="one" id="one">
			id 爲 one,class 爲 one 的div
			<div class="mini">class爲mini</div>
		</div>
		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>
		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>
		<div style="display:none;" class="none">style的display爲"none"的div</div>
		<div class="hide">class爲"hide"的div</div>
		<div>
			包含input的type爲"hidden"的div
			<input type="hidden" value="123456789000" size="8">
		</div>
		<div id="mover">正在執行動畫的div元素.</div>
</body>
</html>

屬性過濾選擇器
　　基礎知識點：屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素

屬性過濾選擇器	描述
[attribute]	選取擁有此屬性的元素
[attribute=value]	選取指定屬性的值爲value的元素
[attribute!=value]	選取指定屬性的值不等於value的元素
[attribute^=value]	選取指定屬性的值以value開始的元素
[attribute$=value]	選取指定屬性的值以value結束的元素
[attribute*=value]	選取指定屬性的值含有value的元素
[selector1][selector2] …[selectorN]	用屬性選擇器合併成一個複合屬性選擇器，滿足多個條件，每選擇一次，縮小一次範圍

子元素過濾選擇器

子元素過濾選擇器	描述
:first-child	選擇第一個子元素
:last-child	選擇最後一個子元素
:only-child	是某個元素的唯一一個子元素時被調用，否則不調用
:nth-child(N)	匹配屬於其父元素的第 N 個子元素，不論元素的類型。

表單過濾選擇器

表單過濾選擇器	描述
:checked	單選框/複選框選中
:selected	下拉框被選擇
:enabled	可用
:disabled	不可用

JSON.stringify(value[, replacer[, space]])

JSON 通常用於與服務端交換數據，在向服務器發送數據時一般是字符串，我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。

將js的對象轉化成JSON字符串(JavaScript 對象轉換)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
	<h2>將 JavaScript 對象轉換爲 JSON 字符串</h2>
	<p id="demo1"></p>
	<p id="demo2"></p>
<script>
	var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
	//[object Object]
	document.getElementById("demo1").innerHTML = obj;
	var myJSON = JSON.stringify(obj);
	//{"name":"runoob","alexa":10000,"site":"www.runoob.com"}
	document.getElementById("demo2").innerHTML = myJSON;	
</script>
</body>
</html>

將js的數組轉化成JSON字符串(JavaScript 數組轉換)
異常解析對象，JSON 不能存儲 Date 對象，JSON.stringify() 會將所有日期轉換爲字符串，之後你可以再將字符串轉換爲 Date 對象。
(不建議在 JSON 中使用函數)解析函數，JSON 不允許包含函數，JSON.stringify() 會刪除 JavaScript 對象的函數，包括key和value，我們可以在執行 JSON.stringify() 函數前將函數轉換爲字符串來避免以上問題的發生。

$.ajax和$.post

//ajax請求
$.ajax({
        type: "post",
        url: "###",
        // contentType: "application/json;charset=utf-8",
        data: JSON.stringify({name: name, money: money}),
        dataType: "json",
        success: function (data) {
                     alert(account.id);
                 }
 });
 //post請求$.post(url,data,function()，type);
 $.post("account/post", {name: name, money: money}, function (account) { 
 			alert(account.id);
 }, "json");

兩種請求方式都成功傳遞並返回了數據 , 但區別在於:
1.請求方式:
$.post()發送json的形式爲 {name: name, money: money}
$.ajax()發送json的形式爲 JSON.stringify({name: name, money: money})
如果$.ajax()使用 {name: name, money: money}發送數據 , 會被瀏覽器解析爲html類型參數 , 並且無法被Controller解析

2.解析方式
接收$.post()請求的方法直接使用 Account 類型封裝了參數
接收$.ajax()請求的方法額外使用了 @RequestBody註解 , 從請求體中獲取json數據 , 纔將參數封裝爲 Account 類型

$.ajax 設置數據類型 applicaiton/json之後，服務器端(express)就拿不到數據
$.ajax contentType 和 dataType , contentType 主要設置你發送給服務器的格式，dataType設置你收到服務器數據的格式。
在http 請求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默認的值：application/x-www-form-urlencoded，這種格式的特點就是，name/value 成爲一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 這是get , 而 post 請求則是使用請求體，參數不在 url 中，在請求體中的參數表現形式也是: key=fdsa&lang=zh的形式。
鍵值對這樣組織在一般的情況下是沒有什麼問題的，這裏說的一般是，不帶嵌套類型JSON，也就是簡單的JSON，形如這樣：
{
a: 1,
b: 2,
c: 3
}
但是在一些複雜的情況下就有問題了。例如在 ajax 中你要傳一個複雜的 json 對像，也就說是對象嵌數組，數組中包括對象，兄果你這樣傳：
{
data: {
a: [{
x: 2
}]
}
}
這個複雜對象， application/x-www-form-urlencoded這種形式是沒有辦法將複雜的 JSON 組織成鍵值對形式(當然也有方案這點可以參考 ) ,你傳進去可以發送請求，但是服務端收到數據爲空，因爲 ajax 沒有辦法知道怎樣處理這個數據。
這怎麼可以呢？
聰明的程序員發現 http 還可以自定義數據類型，於是就定義一種叫 application/json 的類型。這種類型是 text ，我們 ajax 的複雜JSON數據，用 JSON.stringify序列化後，然後發送，在服務器端接到然後用 JSON.parse 進行還原就行了，這樣就能處理複雜的對象了。
$.ajax({
dataType: ‘json’,
contentType: ‘application/json’,
data: JSON.stringify({a: [{b:1, a:1}]})
})
這樣你就可以發送複雜JSON的對象了。像現在的 restclient 都是這樣處理的。

前端Ajax請求傳實體類參數，後臺用實體類如何來接收參數？

前端代碼(將contentType設爲"application/json;charset=utf-8"；將data用JSON.stringify()轉化成字符串):

function updateStaff() {
	var params = {
			"id":$("#updatestaffinfoid").val(),
			"name":$("#updatestaffinfoname").val(),
			"position":$("#updatestaffinfoposition").val(),
			"gender":$("#updatestaffinfogender").val()
	};
	$.ajax({
		type:"post",
		url:"${APP_PATH}/staff/update",
		contentType: "application/json;charset=utf-8",//將內容指定爲JSON格式，以UTF-8字符編碼進行編碼。
		data:JSON.stringify(params),//將對象轉化成字符串
		dataType: "json",
		beforeSend : function() {
			//加載層-風格4
			layerloading = layer.msg('正在提交數據，請稍後', {
			  icon: 16,
			  shade: 0.01,
			  time:1000
			});
		},
		success:function(result){
			layer.close(layerloading);
			alert(result.success);
		}
	})
}

後端代碼(在實體類參數前加上@RequestBody):

	@RequestMapping(value = "/update",method = RequestMethod.POST)
	@ResponseBody
	public JSONResultUtil updateStaffInfo(@RequestBody TbStaff staff) {
		int result = staffService.updateStaffInfo(staff);
		if (result==1) {
			return JSONResultUtil.ok();
		}else {
			return JSONResultUtil.error("更新失敗");
		}
	}

總結

JSON.stringify()的作用是將 JavaScript 對象轉換爲 JSON 字符串，JSON.parse()可以將JSON字符串轉爲一個對象。
註解@RequestParam接收請求頭(requestHeader)中的參數，通常用於接收GET請求數據，一般用於處理application/x-www-form-urlencoded編碼格式的數據，POST類型的請求也可以使用。
註解@RequestBody接收請求體(requestBody)中的參數，通常用於接收POST請求數據，一般用於處理application/json等類型數據，GET類型也可以適用。

前端通過表單向後端傳實體類數據，如何操作？

參考鏈接：$.ajax 中的contentType

中心思想：將表單數據轉成JSON字符串傳給後端，後端實體類參數用@RequestBody註解接收

Q1:如何將表單數據轉化成JSON字符串?
A1:先通過serializeObject()將表單數據轉化成JSON對象，然後通過JSON.stringify()將JSON對象轉化成JSON字符串將數據提交給後臺

Q2:serializeObject()方法爲什麼在瀏覽器console報未定義？
A2:需要在js文件夾中創建common.js，將下面代碼加進去並且在頁面上引入common.js文件，serializeObject()代碼如下：

`serializeObject ()代碼：`

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Q3:前端ajax請求的`contentType`設置成`"application/json;charset=utf-8"`的作用是什麼？

A3:添加contentType：“application/json“之後，向後臺發送數據的格式必須爲json字符串並且只能是json字符串，前端請求示例代碼：

`前端代碼：`

function insertStaff(){
	//先通過serializeObject()將表單數據轉化成JSON對象，
	//然後通過JSON.stringify()將JSON對象轉化成JSON字符串提交給後臺
	var formdata = JSON.stringify($("#insertForm").serializeObject());
	$.ajax({
		type : "post",
		url : "${APP_PATH}/staff/insert",
		contentType : "application/json;charset=utf-8",//必須
		data : formdata,
		dataType:"json",
		beforeSend:function(){
			//加載層-風格4
			layerloading = layer.msg('正在操作，請稍後 ', {
			  icon: 16,
			  shade: 0.01,
			  time:1000
			});
        },
        success:function(data){
        	layer.close(layerloading);
            if(data.success){
                layer.msg("添加成功",{
					icon:1,
					time:500
				},function(){
					//關閉後的操作
					$("#insertModal").modal("hide");
					formReset();
					$("#mytab").bootstrapTable('refresh', {
						pageNumber : 1,//防止offset大於查詢結果數導致顯示無數據
						url : '${APP_PATH}/staff/show'
					});
				});
            }else{
                layer.msg('添加失敗', {icon: 2,time:500});
            }
        },
        error:function(){layer.msg('請求出錯',{icon:2,time:500});}
	})
}

Q4:後端是不是也得給個示例意思意思？

A4:後端代碼示例如下：
@ResponseBody返回json數據給頁面
@RequestBody 是接收頁面傳來的參數是json格式

`後端代碼：`

	@RequestMapping(value = "/insert",method = RequestMethod.POST)
	@ResponseBody
	public JSONResultUtil insertStaff(@RequestBody TbStaff staff) {//@RequestBody必須
		System.out.println(staff.getName());
		int result = staffService.insertStaff(staff);
		if (result==1) {
			// 添加成功
			return JSONResultUtil.ok();
		}else {
			return JSONResultUtil.error("添加失敗");
		}
	}

bootstrap table 批量刪除：https://www.jianshu.com/p/7f7684dee3e9`

----------------2019/12/30新增------------------

jQuery頁面加載完成時執行代碼

		<script>
			//頁面加載完成方式一(不常用)
			$(document).ready(function(){
				alert("頁面加載完成！！");
			})
			//頁面加載完成方式二
			$(function(){
				alert("哈哈哈");
			})
			$(function(){
				alert("呵呵呵");
			})
			$(function(){
				alert("嘿嘿嘿");
			})
		</script>

注意：jq中的頁面加載完成事件不會覆蓋，從上到下執行！！！！

jQuery中部分方法（含與js的對比）

jQuery中的方法	對應的javascript屬性名	屬性說明
$("#元素id名".val())	document.getElementById(“元素id名”).value	獲取某個元素的value值
$("#元素id名".val(‘值’)	元素對象.value = 值	設置某個元素的value值
$(’#元素id名’).html()	元素對象.innerHTML	獲取某個元素的內容體信息(獲取到HTML標籤)
$(’#元素id名’).html(‘值’)	元素對象.innerHTML=值	設置某個元素的內容體信息（HTML標籤被瀏覽器解析）
元素對象.text()	元素對象.innerText	獲取某個元素的內容體信息（獲取不包括HTML標籤）
元素對象.text(‘值’)	元素對象.innerText = 值	設置某個元素的內容體信息（HTML標籤不被瀏覽器解析）

主要區別：
prop 對於HTML元素本身就帶有的固有屬性（不能獲取和刪除自定義屬性）
attr 對於HTML元素我們自定義的加在標籤中的屬性（只能獲取標籤中寫好的，存在的屬性，特有的但是沒有寫出來的也獲取不到）
使用：
對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

JS中的數組相當於Java中的集合，特點：長度可變、可以存任意數據類型

----------------------2019/12/31新增------------------

1、請分別寫出如何獲取/設置value值、元素內容體、當前頁面路徑、單選/複選框狀態、class名字的代碼
答：元素對象.value/元素對象.value = 值、元素對象.innerHTML/元素對象.innerHTML = 值、window.location.href(window.location.pathname)、
、元素對象.checked/元素對象.checked = 值、元素對象.className/元素對象.className = 值
2、innerHTML 和 innerText的區別
答：innerHTML和innerText獲取的是元素內容體信息，前者可以獲取到html標籤；後者獲取不到html標籤。設置innerHTML時html標籤可以被瀏覽器解析，設置innerText時html標籤不被瀏覽器解析
3、Java中數組和集合的區別
答：數組長度不可變，集合長度可變；數組能存基本數據類型和引用數據類型，集合只能存引用數據類型；數組只能存一種數據類型（除了Object[]），集合可以存任意數據類型
4、JS中數組的特點以及創建方式
答：長度可變，可以存任意數據類型。new Array()/[“a”,”b”]/new Array(4)/new Array(“a”,”b”)
5、獲取元素對象的四種方式是什麼，返回值是什麼？
答：document.getElementById/
document.getElementsByName/
document.getElementsByTagName/
document.getElementsByClassName
ById的是單個對象，剩下的都是數組
6、請談談你對DOM的理解
答：DOM是文檔對象模型，是一個文檔樹
7、請列出你所知道的全部js事件(多多益善)
答：onclick、onchange、ondblclick、onsubmit、onfocus、onblur、onload、onmouseover、onmouseout、
8、Jq是什麼，和js有什麼關係
答：jQuery是一個快速、簡介的js框架，jq的核心理念寫的更少，做的更多
9、Jq如何引入，如果沒有引入成功，會有什麼樣的後果？
答：在標籤內、 $不被定義 10、JS對象和jq對象如何相互轉換答：JS對象轉jq對象：$ (JS對象)
Jq對象轉JS對象：jq對象[0]、jq對象.get(0)
11、請分別寫出js方式和jq方式的頁面加載完成執行的代碼，兩種方式有什麼不同
答：js加載頁面完成執行代碼：window.onload =
Jq方式加載頁面完成執行代碼： $(function(){})、$ (document).ready(function(){})
12、Jq中三種基本選擇器是什麼？如何書寫？
答：類選擇器 $(“.class名稱”)、Id選擇器$ (“#id名稱”)、元素選擇器$(“元素名稱”)

選擇器的分類與使用

基本選擇器
 層次選擇器
 過濾選擇器

基本選擇器

基本選擇器	描述
$("#id名")	根據元素id獲取元素
$(".class名")	根據元素class名獲取元素
$(“標籤名”)	選取某種標籤的所有元素

層次選擇器

層次選擇器	描述
$(“ancestor descendant”)	選取ancestor的所有descendant（後代）元素
$(“parent > child”)	選取parent元素下的child(子)元素
$(“prev + next”)	選取緊接在prev元素後的下一個next元素
$(“prev ~ siblings”)	選取prev元素後的所有siblings()元素，只要是同輩節點就可以選取

過濾選擇器

　過濾選擇器主要是通過特定的過濾規則來篩選出所需要的DOM元素，該選擇器都以冒號("：")開頭
　可分爲基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾，表單對象屬性過濾

基本過濾選擇器

選擇器	描述
:first	選取第一個元素
:last	選取最後一個元素
:not(selector)	去除所有與給定選擇器匹配的元素
:even	選取索引值偶數的所有元素，索引從0開始
:odd	選取索引值奇數的所有元素，索引從0開始
:eq(index)	選取索引等於index的元素，索引從0開始
:gt(index)	選取索引大於index的元素，索引從0開始
:lt(index)	選取索引小於index的元素，索引從0開始
:header	獲取所有的標題元素，如h1,h2等
:animated	選取當前正在執行動畫的所有元素

屬性過濾選擇器

基礎知識點：屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素

屬性過濾選擇器	描述	例子
[attribute]	選取擁有此屬性的元素	$("[href]")
[attribute=value]	選取指定屬性的值爲value的元素	$("[href=’#’]")
[attribute!=value]	選取指定屬性的值不等於value的元素	$("[href=’#’]")
[attribute^=value]	選取指定屬性的值以value開始的元素
[attribute$=value]	選取指定屬性的值以value結束的元素
[attribute*=value]	選取指定屬性的值含有value的元素
[selector1][selector2] …[selectorN]	用屬性選擇器合併成一個複合屬性選擇器，滿足多個條件，每選擇一次，縮小一次範圍

表單選擇器

表單過濾選擇器	描述	例子
:input	選取所有的input元素(匹配所有input, textarea, select和button元素)	$(":input")
:text	所有 type=“text” 的 <input> 元素	$(":text")
:password	所有 type=“password” 的 <input> 元素	$(":password")
:radio	所有 type=“radio” 的<input> 元素	$(":radio")
:checkbox	所有 type=“checkbox” 的 <input> 元素	$(":checkbox")
:submit	所有 type=“submit” 的<input> 元素	$(":submit")
:reset	所有 type=“reset” 的<input> 元素	$(":reset")
:button	所有 type=“button” 的<input> 元素	$(":button")
:image	所有 type=“image” 的 <input> 元素	$(":image")
:file	所有 type=“file” 的 <input> 元素	$(":file")

表單對象屬性過濾選擇器

表單過濾選擇器	描述
:checked	單選框/複選框選中
:selected	下拉框被選擇
:enabled	可用
:disabled	不可用

可見性過濾選擇器

基本知識點：可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素;hidden不僅包含樣式屬性display爲none的元素，也包含文本隱藏域（<input type="hidden">）和visible:hidden之類的元素

選擇器	描述
:hidden	選取所有不可見的元素
:visible	選取所有可見的元素

內容過濾選擇器

基本知識點：內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上

選擇器	描述
:contains(text)	選取含有文本內容爲text的元素
:empty	選取不包含子元素或者文本的空元素
:has(selector)	選取含有選擇器所匹配的元素的元素
:parent	選取含有子元素或者文本的元素

子元素過濾選擇器

子元素過濾選擇器	描述
:first-child	選擇第一個子元素
:last-child	選擇最後一個子元素
:only-child	是某個元素的唯一一個子元素時被調用，否則不調用
:nth-child(N)	匹配屬於其父元素的第 N 個子元素，不論元素的類型。

jQuery動畫效果

以下所有動畫效果方法中都有兩個參數：

speed 動畫效果的持續時間單位：毫秒
fn 動畫效果完成後調用的函數 (回調函數)

基本效果：(放大縮小效果)

屬性名	屬性說明
show(speed,fn);	顯示元素
hide(speed,fn);	隱藏元素
toggle(speed,fn);	1、使得顯示元素隱藏2、使得隱藏元素顯示

滑動效果：(上下滑動)

屬性名	屬性說明
slideDown(speed,fn);	顯示元素
slideUp(speed,fn);	隱藏元素
slideToggle(speed,fn);	1、使得顯示元素隱藏2、使得隱藏元素顯示

淡入淡出效果：

屬性名	屬性說明
fadeIn(speed,fn);	顯示元素
fadeOut(speed,fn);	隱藏元素
fadeToggle(speed,fn);	1、使得顯示元素隱藏2、使得隱藏元素顯示

prop和attr的區別

主要區別：

prop 對於HTML元素本身就帶有的固有屬性（不能獲取和刪除自定義屬性，標籤中沒寫的屬性也可以獲取和設置）
attr 對於HTML元素我們自定義的加在標籤中的屬性（只能獲取標籤中寫好的，存在的屬性，沒有寫出來的獲取不到）
例子：<input type=“text” id=“test”/>
$("#test").prop("name") 結果爲空
$("#test").attr("name") 結果爲undefined（因爲標籤中沒聲明）
$("#test").prop("data","aaa") 設置自定義屬性data值爲aaa（無效）
$("#test").attr("data","aaa") 設置自定義屬性data值爲aaa（有效）

使用：

對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。如設置複選框的 checked(prop("checked",true) )、下拉框的selected
對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。如設置標籤的class屬性(attr("class","自己定義的class名"))

jQuery中的方法	對應的javascript的方法	屬性說明
$(’#元素id名’).attr(‘屬性名’)	元素對象.getAttribute(‘屬性名’)(元素對象.className)	獲取某個元素的屬性值
$(’#元素id名’).prop(‘屬性名’)		獲取某個元素的固有屬性
$(’#元素id名’).attr(‘屬性名’,‘屬性值’)	元素對象.setAttribute(‘屬性名’,‘屬性值’) (元素對象.className = 值)	設置某個元素的屬性值
$(’#元素id名’).prop(‘屬性名’,‘屬性值’)		設置某個元素的固有屬性,如複選框的checked
$(’#元素id名’).removeAttr(‘屬性名’)		移除某個元素的屬性(只能刪除標籤中寫好的，自己定義過的)
$(’#元素id名’).removeProp(‘屬性名’)		移除某個元素的屬性（只能刪除標籤中沒聲明的，自己沒有定義過的）

jQuery的數組遍歷方式

屬性名	屬性說明
JQ數組.each(fn); fn：回調函數	遍歷JQ數組，在DOM處理上面用的較多（html 元素、節點）
$.each(JQ數組,fn);	遍歷JSON 對象，在數據處理上用的比較多

其中的 fn 爲回調函數，參數有兩個，第一個爲每次遍歷的索引(用i表示)，第二個爲當前對象(用 e 表示，可以省略，直接用this表示)

	<script>
		//定義數組
		var arr = ["西遊記","三國演義","水滸傳","紅樓夢"];
		//JS方式：遍歷數組
		for(var i=0;i<arr.length;i++){
			//alert("索引爲："+i+"，元素爲："+arr[i]);
		}
	//Jq方式一
		//index：每次遍歷的索引
		//this：數組中每次遍歷的元素    是JS對象
		$(arr).each(function(index){
			//alert("索引爲："+index+"，元素爲："+this);
		})
		
		$(arr).each(function(index,element){
			//alert("索引爲："+index+"，元素爲："+element);
		})
	//Jq方式二
		$.each($(arr),function(index){
			alert("索引爲："+index+"，元素爲："+this);
		})
		
		$.each($(arr),function(index,element){
			alert("索引爲："+index+"，元素爲："+element);
		})
	</script>

追加元素內容體的方式

頭部追加	尾部追加
A.prepend(B):向A頭部追加B	A.append(B)：向A的尾部追加B
B.prependTo(A)：將B追加到A的頭部	B.appendTo(A)：將B追加到A的末尾

window.onload和$(function(){})的區別

兩個都是加載完成後觸發

	window.onload	$(function(){})
執行時機	整個頁面加載完成後執行（包括頁面上的資源，比如圖片）	dom結構創建完成後執行
執行次數	只執行最後一個，之前的會被覆蓋	按照順序依次執行

$.data()和.data()的區別

<body>
		<div id="div1"></div>
	</body>
	<script>
		var div1 = $("#div1");
		var div2 = $("#div1");
		
		//jq對象.data("變量名","值")：用該方法相當於局部變量，之後設置會被覆蓋掉
		div1.data("data", "zhangsan");
		div2.data("data", "lisi");
		document.write(div1.data("data"));//lisi
		document.write(div2.data("data"));//lisi
		
		//$.data("jq對象","變量名","值")：用該方法相當於全局變量
		$.data(div1, "data", "zhangsan");
		$.data(div2, "data", "lisi");
		document.write($.data(div1).data);//zhangsan
		document.write($.data(div2).data);//lisi
		
	</script>

jQuery學習筆記(含JavaScript和jQuery的區別)