一.什么是jQuery
jQuery是一个快速、简洁的JavaScript框架；jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
二.使用jQuery的好处
jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
三.jQuery的安装
- 下载
在网上下载下载 jQuery 库，有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 http://www.jquery.com 中下载。 - 引入
Query 库是一个 JavaScript 文件，我们可以使用 HTML 的<script> 标签引用它：
<script src="../jq/jquery-3.3.1.min.js"></script>
四.jQuery基础操作
1.jQuery选择器
id
class
标签
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="../jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<p id="p1" class="p2">今天我们学习jquery</p>
</body>
<script>
//传统js方式
var js = document.getElementById("p1").innerHTML;
console.log(js);
//jQuery方式————id选择器(#为选择id)
var jq_id = $("#p1").html();
console.log(jq_id);
//jQuery方式————class选择器(.为选择class)
var jq_calss = $(".p2").html();
console.log(jq_calss);
//jQuery方式————标签选择器(以p标签为例)
var jq_p = $("p").html();
console.log(jq_p);
</script>
</html>
其实用法和css选择器类似，对css比较熟悉的同学应该会很容易上手，这里只举三个例子介绍一下。
2.jQuery中的dom操作
2.jQuery中的dom操作 html(): 获取/设置元素的标签体内容text(): 获取/设置元素的标签体纯文本内容val() : 获取/设置元素的value属性值<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/ysw/jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<p id="p1"><span>多隆</span>永远的"神"！</p>
<input id="p2" type="text" value="神">
</body>
<script>
var js = document.getElementById("p1");
var jq = $("#p1");
// html text() var()的用法
//1. html(): 获取/设置元素的标签体内容;相当于js中的innerHTML.
//js方式：
console.log(js.innerHTML);
//jquery方式
console.log(jq.html());
//2.text(): 获取/设置元素的标签体纯文本内容;相当于js中的innerText.
//js方式：
console.log(js.innerText);
//jquery方式
console.log(jq.text());
//3. val() : 获取/设置元素的value属性值;相当于js中的value.
//js方式：
console.log(document.getElementById("p2").value);
//jquery方式
console.log($("#p2").val());
</script>
</html>
输出效果：
3.jQuery中的基本事件
3.jQuery中的基本事件 click事件blur事件change事件<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--动态上下文路径--%>
<script src="${pageContext.request.contextPath}/jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="确定" id="btn">
<input type="text" id="text"><br>
<select name="" id="sel">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
</select>
</body>
<script>
//点击事件
//js中
document.getElementById("btn").onclick=function (ev) {
console.log("按钮被点击了");
}
// jQuery中
$("#btn").click(function () {
console.log("jq方式被点击！")
});
//失去焦点事件 js与jQuery可以混用
$("#text").blur(function () {
console.log(this.value); //js输出当前对象的value
console.log($(this).val()); //jQuery输出，jQuery中没有this，this是js中的对象
})
//change事件
$("#sel").change(function () {
console.log($(this).val())
})
</script>
</html>
4.jQuery实现AJAX
4.jQuery实现AJAX jsp页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="">
用户：<input type="text" name="user" id="user"><span id="sp"></span><br>
密码：<input type="password" name="pwd"><br>
<input type="button" value="注册">
</form>
</body>
<script> /* * 异步请求的4个参数： * 1.url请求路径，访问服务器servlet的路径 * 2.请求参数，键值对的形式，发送到服务器的参数 * 3.回掉函数，接收并处理服务器响应的数据的函数 * 4.希望服务器响应的数的格式，通常有text（字符串），json * */ $("#user").blur(function () {
$.get("${pageContext.request.contextPath}/ajax",{
'user':$(this).val()},function (date) {
$("#sp").html(date); },"text"); }); </script>
</html>
响应服务请求的类：
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/ajax") public class AjaxServlet extends HttpServlet {
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8"); String name = req.getParameter("user"); if(name.equals("多隆")){
resp.getWriter().write("用户名冲突！"); }else {
resp.getWriter().write("用户名正常！"); } } } 
