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

    });

}