jquery入门使用
目录
1.jQuery简介
jQuery介绍
- jQuery就是一个框架，是一个js库。封装了ajax的相关代码，使得代码编写能更加简单
jQuery优点
- 能用更少的代码做更多的事情
举例
$("#div01") 就是 document.getElementById("div01");
2.jQuery的load方法
load方法介绍
load() 方法的语法：
$(selector).load(URL,data,function(response,status,xhr));
参数 解释 selector 选择器 URL 必须的参数，需要访问的地址 data 可选， 规定连同请求发送到服务器的数据 function(response,status,xhr) 可选，当需要执行方法的时候加上这个参数。
可选 response - 包含来自请求的结果数据（就是服务器响应的）
可选 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
可选xhr - 包含 XMLHttpRequest 对象
load实例
- 点击超链接或者是一个按钮，能够从服务器响应数据，并更改文本框中的内容。
代码
- jsp的页面设置，下面是需要改的text
<h3><a href="#" onclick="load()">使用JQuery的load方法</a></h3>
<h3><input type="button" value="使用JQuery的load方法" onclick="load()"/></h3>
<input type="text" name="text01" id="aaa" />
- jquery代码
//导入js库，我放在web/js/jquery-3.3.1.js
<script src = "js/jquery-3.3.1.js"></script>
<script type="text/javascript">
function load() {
//load方法访问的是DemoServlet，得到responseText（服务器响应的）
$("#aaa").load("DemoServlet",function (responseText) {
//对id为aaa的容器值设定为responseText
$("#aaa").val(responseText);
});
}
</script>
- servlet代码
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("你的外卖!");
3.jQuery的get方法
get()方法的格式
//url，必须，访问的地址。
//data，可选。一起带去服务器的数据
//function(data,status,xhr)，可选。与上面load里是一样的
//dataType，可选。规定预期的服务器响应的数据类型。"xml" "html" "text" "script" "json" "jsonp"
$.get(URL,data,function(data,status,xhr),dataType)
get实例
function get() {
//servlet还是用上文的
//get方法的格式
$.get("DemoServlet", function (data) {
//赋值的3中方式
// .html() - 设置或返回所选元素的内容（包括 HTML 标记）比如做标签
// .val() - 设置或返回表单字段的值
// .text - 设置或返回所选元素的文本内容 只能是文本的内容
//div这种没有value属性的,可以用.html和.text
// $("#div01").html(data)
$("#div01").text(data);
})
}
4.jQuery的post方法
post()方法的格式
//url，必须，访问的地址。
//data，可选。一起带去服务器的数据
//function(data,status,xhr)，可选。与上面load里是一样的
//dataType，可选。规定预期的服务器响应的数据类型。"xml" "html" "text" "script" "json" "jsonp"
$(selector).post(URL,data,function(data,status,xhr),dataType)
post实例
function post() {
//这里要传数据过去,用的是json数组的方式
$.post("DemoServlet", {name: "hh", age: "18"}, function (data) {
$("#div01").html(data);
});
}