jquery入门使用

目录

• jquery入门使用
  • 1.jQuery简介
    • jQuery介绍
    • jQuery优点
  • 2.jQuery的load方法
    • load方法介绍
    • load实例
    • 代码
  • 3.jQuery的get方法
    • get()方法的格式
    • get实例
  • 4.jQuery的post方法
    • post()方法的格式
    • post实例

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"  />

• 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);
    });
}