jquery入门使用

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);
});
}
上一篇:WEB入门之十三 jQuery选择器


下一篇:JSP内置对象之application对象