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

jquery入门使用的更多相关文章

  1. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jQuery入门(3)事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. jQuery入门(4)jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  6. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  7. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  8. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 第一百六十二节,jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

  10. jQuery入门--- 非常好

    jQuery入门------https://blog.csdn.net/dkh_321/article/details/78093788

随机推荐

  1. Flask无法访问(127.0.0.1:5000)的问题解决方法

    Flask默认开启的ip地址是:http://127.0.0.1:5000/ 但在运行时可能存在无法访问的问题,特别是当我们在linux服务器上搭建flask时,此时需要将代码修改如下: app.ru ...

  2. win10下,cmd,power shell设置默认编码为‘UTF-8

    power shell 注:以下内容在非Windows平台上写的,可能会有拼写错误,如果有,请指正,我会尽快修正.可以用Powershell的配置文件(\(PROFILE)来实现.\)PROFILE默 ...

  3. kafka的安装及使用(单节点)

    介绍了linux环境下,kafka 服务的安装与配置 安装 jdk 环境 下载 kafka 源码包放到服务器,解压 开启 zookeeper 开启 kafka server 创建主题 开启生产者 开启 ...

  4. 数据结构之链表(LinkedList)(二)

    数据结构之链表(LinkedList)(一) 双链表 上一篇讲述了单链表是通过next 指向下一个节点,那么双链表就是指不止可以顺序指向下一个节点,还可以通过prior域逆序指向上一个节点 示意图: ...

  5. 网络基础 InetAddress

    IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有许多类都使用到了 ...

  6. spring--分类索引

    1.过时api Spring(一)解决XmlBeanFactory过时问题 元素 'ref' 中不允许出现属性 'local' Spring学习笔记 关于spring 2.x中dependency-c ...

  7. nginx配置文件详解【nginx.conf】

    #基本配置: #user nobody;#配置worker进程运行用户worker_processes 1;#配置工作进程数目,根据硬件调整.通常等于CPU数量或者2倍于CPU数量 比如四核电脑(可以 ...

  8. Visual Studio C# 利用git和github协同开发时产生冲突的解决办

    Visual Studio C# 利用git和Github协同开发时产生冲突的解决办法 前言:在前两天的助教作业中,发现了自己没有办法解决在用vs开发C#的窗体项目的过程中产生的冲突问题,在查阅了资料 ...

  9. LPCXpresso54608开发板中文用户手册

    M11035 LPCXpresso54608/54618/54S618开发板用户手册 1.        简介 LPCXpresso系列电路板为恩智浦LPC Cortex-M系列微控制器提供了强大而灵 ...

  10. Redis未授权漏洞检测工具

    Redis未授权检测小工具 #!/usr/bin/python3 # -*- coding: utf-8 -*- """ @Author: r0cky @Time: 20 ...