關於Jquery的一點小東西

JavaScript使得能夠在前端中添加java代碼
JQuery是JS的一個框架，創建一個mian.js文件，在裏面編寫js代碼
並且在main.html的標籤中添加

<script type="text/javascript" src="main.js"></script>

將該js應用到main.html中。

入口函數

$(function(){
	//js代碼
});

獲取文本框的值

var value=$("input#id").val();

爲文本框賦值

var value=$("input#id").val("賦值");

爲標籤添加文本

$("p#id").html("內容");

獲取後臺返回的json數據

var host="http://localhost:8080/";
$.getJSON(host+"customerservice/accesscard/get",{cardno:cardnpo},function(as){
     $("input#cardnoSee").val(as.cardno);
    if(password.equals(as.password)...
     });
  //"customerservice/accesscard/get"：controller層中json數據路徑
  //cardno:cardnpo：cardno爲表的一個字段，cardnpo爲js文件的一個變量
  //as：返回的數據存儲到這個變量中
  //這個語句的意思：查詢目標表中字段cardno的值爲cardnpo的數據，並且將返回的json數據存儲到變量as中

獲取字符串長度

userid.length

判斷字符串是否相等，如果字符串類型不相等，他還會自動轉換類型

var A="156516516";
var B="5165161665";
if(A==B);//

頁面跳轉
單頁面web應用，A頁面中嵌套了B頁面

//連同A頁面棄用，整個頁面實現跳轉，B的js有
window.location.href='b.html';
//只跳轉B頁面，保留A頁面，那B頁面的js有
self.location.href='b.html'

在HTML中插入html語句

//原語句: <div id="divjs"></div>

$("div#divjs").append("<p>添加的內容</p>");

//修改後: <div id="divjs"> <p>添加的內容</p> </div>

爲html添加表格

//模擬json數據
var tablehead=["用戶ID","用戶名字"];
//表頭輸出
for(var i=0;i<tablehead.length;i++){
$("table#usertable").append("<th>"+tablehead[i]+"</th>");
}
//成員行輸出
$.getJSON(host+"User/get/listall",function(us){
for(var i=0;i<us.length;i++){
$("table#usertable").append(
"<tr>"+
"<td>"+us[i].userid+"</td>" +
"<td>"+us[i].username+"</td>" +
"</tr>");
}
});

獲取鼠標選中行的數據

$("table tr").on("click",function() {
	var td = $(this).find("td");// 找到td元素
	var id = td[0].innerHTML;// 指定需要獲取元素的下標即可，這樣獲取到選中行的第一列
	alter(id);
});

但上面的方法不能爲jQuery動態append元素增加點擊事件，若想改爲可以爲動態append元素增加點擊事件，如下

$("table#usertable").on("click","tr",function() {
	var td = $(this).find("td");// 找到td元素
	var id = td[0].innerHTML;// 指定需要獲取元素的下標即可
	alter(id);
});

執行簡單的POST請求(這裏有一個問題，如果post返回的不是json數據[默認]，那回調函數function是不會執行的)

$.post( url, [data], function(){
	//回調函數
	}, [type] ) //使用POST方式來進行異步請求

刪除html表格

//選中行
 var td;
 $("table#usertable").on("click","tr",function() {
        td = $(this).find("td");// 找到td元素
    });
 //刪除行
 $("button#delete").on("click",function(){
 //再從html中直接把那一行刪掉
  td.remove();
  $("p#operation").html("刪除成功！");
 });

html中<input>標籤讀取的都是string