前端学习：jQuary的学习和使用

一、什么是jQuary

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。

二、jQuary和原生js对比获取input框中的数据和div框中的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
用户名: <input type="text" name="userName"  id="userName"/>
密码:   <input type="text" name="password"   id="password"/><input type="button" onclick="getInput()" value="获取input框的值"/><div style="border:5px solid red;width:100px;height:50px" id="div1">div1</div><div style="border:5px solid red;width:100px;height:50px" id="div2">div2</div><input type="button" onclick="getdiv()" value="获取div框的值"/>
<script>
function getInput(){var username = $("#userName").val();   //通过jquary来获取input框中的值var password = document.getElementById("password").value; //通过js来获取input框中的值console.log(username);console.log(password);//jquery给input框中赋值$("#userName").val("admin");//js给input框中赋值document.getElementById("password").value  ="123456";
}
function getdiv(){//通过jquary来获取div框中的值console.log($("#div1").html());//jquery给div框中赋值$("#div1").html("admin");//通过js来获取div框中的值console.log(document.getElementById('div2').innerHTML);//js给div框中赋值document.getElementById('div2').innerHTML='admin';
}
</script>
</body>
</html>

jQuary和原生js都能改变数据为啥我们还要使用jQuary呢？

三、jquary的ajax

AJAX 是一种用于创建快速动态网页的技术。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
我们前边学过使用from表单进行数据的传递
1.使用from表单给servlet服务发送数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/ThirdServlet/resources/mystyle.css">
</head>
<body>
<form action="http://localhost:8080/ThirdServlet/LoginServlet" method="get">用户名: <input type="text" name="userName"  id="username"/>密码: <input type="text" name="password"   id="password"/><input type="submit" value="Submit"  />
</form></body>
</html>

当我们使用from表单进行数据上传的时候，我们发现我们前端页面发生了跳转。但是我们的后端往往不太喜欢前端发送完数据后马上跳转，因为在某些时候后端需要给前端发送一些数据，对页面进行更改。
2.使用ajax表单给servlet服务发送数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/ThirdServlet/resources/mystyle.css">
</head>
<body>用户名: <input type="text" name="userName"  id="username"/>密码: <input type="text" name="password"   id="password"/><input type="button" value="Submit"  onclick="get()"/>
<script>
function get(){var data = {"username":$("#username").val(),"password":$("#password").val()}$.ajax({url: "http://localhost:8080/ThirdServlet/LoginServlet",   // 地址data:data,success: function (value){$("#username").val("我是ajax");//在这里我们尝试将页面进行修改}});
}
</script>
</body>
</html>