jQuery
jQuery库，内置大量JavaScript函数。
1. 初识jQuery
公式：$(选择器).事件(事件函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮">
<script>
$('#btn').click(function () {
alert("123");
});
</script>
</body>
</html>
2. 选择器
// jquery css中的选择器，他都能用
$('p').click(); // 标签选择器
$('#id1').click(); // id选择器
$('.class1').click(); // 类选择器
3. 事件
鼠标事件，键盘事件，其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#box {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p><span id="showPosition">鼠标移动试试</span></p>
<div id="box"></div>
<script>
$(function () {
$('#box').mousemove(function (e) {
$('#showPosition').text('x:' + e.pageX + ' y:' + e.pageY);
});
});
</script>
</body>
</html>
4. 操作DOM
文本节点操作
<ul id="test-ul">
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text("123"); // 设置值
$('#test-ul').html(); // 获得值
$('#test-ul').html("<strong>123</strong>"); // 设置值
css操作
$('#test-ul li[name=python]').css({'color':'red','fontSize':'30px'});
元素的显示和隐藏
本质是display:none
$('#test-ul li[name=python]').hide(); // 隐藏
$('#test-ul li[name=python]').show(); // 显示
$('#test-ul li[name=python]').toggle(); // 隐藏显示互换
获取window属性
$(window).width(); // 浏览器窗口
$(window).height();
5. Ajax
原生的js写法：xhr 异步请求
jQuery封装好的方法 $("#name").ajax("")
- axios 请求
这里使用jQuery封装的Ajax。
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
- 通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时能够把这些外部数据直接载入网页的被选元素中。
- jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！
jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
示例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{'name':$("#username").val()},
success:function (data,status) {
console.log(data);
console.log(status);
}
});
}
</script>
</head>
<body>
用户名:<input type="text" id="username" onblur="a1()"/>
</body>
</html>
上述的js代码也可以简写为
function a1(){
$.post({"${pageContext.request.contextPath}/a1",
{'name':$("#username").val()},
function (data,status) {
console.log(data);
console.log(status);
}
});
}
如果没有传输数据，则data形参也可以省略。