JQuery學習

JQuery是什麼？

是javascript的一個框架集合，並不是什麼新技術

有什麼用？

JQuery 是一個 javaScrip的框架，它的宗旨是： Write Less , Do More.  寫更少的代碼，完成更多的工作。 平常我們如果使用ajax來完成交互工作，可能要寫很多代碼。並且代碼重複性比較高。那麼能不能讓代碼寫的少一點，重複性第一點 , jQuery 做的就是這個事。

load():

格式：$("#元素id").load(url地址);

要想使用JQuery ，必須得先添加它的依賴。

1. 導入jquery的支持

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

2. 在早前，我們要使用ajax 去執行請求， 需要寫代碼很多，請求數據回來後，要賦值顯示，也是比較複雜。 但是JQuery 只要簡單的一行代碼即可。

//默認使用的get請求，回來賦值的時候， 使用text()去賦值;輸入框使用val()去賦值。
$(#div01).load("Demo01");

解釋起來的話是：
    
        $(#div01) ---> 代表 找到 頁面上 id 爲  div01 的節點

        load("Demo01"); 代表去加載這個路徑的值。  當然這裏寫的是servlet的相對路徑地址。 

/*有兩次刷新，  先走 onClick的方法，取到數據回來之後，賦值顯示。 接着 走 href=""的路徑，但是這個屬性沒有給值，所以會把當前的頁面重新再刷新一次。所以導致看不見值。*/
<a href="" onclick="load()">使用JQuery執行load方法</a>

//找到id爲aaa的這個元素， 去執行加載的動作， 加載/day16/DemoServlet02 ， 得到的數據，賦值顯示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
	//找到id爲text01的元素， 設置它的value屬性值爲 responseText 對應的值
	$("#aaa").val(responseText);
});

get():

語法格式 ： $.get(URL,callback);

案例：

$.get("/AjaxDemo/ServletDemo1", function(data, status) {
	alert("結果是：" + data);
	$("#div").text(data);
});

Post():

語法格式：$.post(URL,data,callback);

案例：

$.post("ServletDemo1",{name:"zhangsan",age:18},function(data,status){
	alert(data);
	$("#div").text(data);//想要放數據到div裏面去。 --- 找到div
});

案例：使用JQuery去實現校驗用戶名

function checkUserName(){
	//1、獲取輸入框的內容
	var name = $("#name").val();
		
	//2、發送請求
	$.post("/AjaxDemo/CheckUserNameServlet",{name:name},function(data,status){
		if(data==1){
			alert("用戶名已被使用")
			$("#span1").html("<font color='red'>用戶名已被註冊</font>")
		}else{
			$("#span1").html("<font color='green'>用戶名可以使用</font>")
		}
	});
}

補充：

val("aa")：針對帶有value屬性的元素進行賦值，其實就是給該元素的value賦值

html("aa")：針對某一個元素，可以使用元素左右包括起來一段值的元素賦值。如：<div></div>；並且該方法可以寫html代碼，如<font></font>

text("aa")：該方法針對那些可以在兩個標籤中寫值的賦值工作。如：<div>aaaaaaaaaaaaaas</div>