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);
});
}
jquery入门使用的更多相关文章
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- jquery(入门篇)无缝滚动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 第一百六十二节,jQuery入门介绍
jQuery入门 学习要点: 1.什么是 jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本 I ...
- jQuery入门--- 非常好
jQuery入门------https://blog.csdn.net/dkh_321/article/details/78093788
随机推荐
- Flask无法访问(127.0.0.1:5000)的问题解决方法
Flask默认开启的ip地址是:http://127.0.0.1:5000/ 但在运行时可能存在无法访问的问题,特别是当我们在linux服务器上搭建flask时,此时需要将代码修改如下: app.ru ...
- win10下,cmd,power shell设置默认编码为‘UTF-8
power shell 注:以下内容在非Windows平台上写的,可能会有拼写错误,如果有,请指正,我会尽快修正.可以用Powershell的配置文件(\(PROFILE)来实现.\)PROFILE默 ...
- kafka的安装及使用(单节点)
介绍了linux环境下,kafka 服务的安装与配置 安装 jdk 环境 下载 kafka 源码包放到服务器,解压 开启 zookeeper 开启 kafka server 创建主题 开启生产者 开启 ...
- 数据结构之链表(LinkedList)(二)
数据结构之链表(LinkedList)(一) 双链表 上一篇讲述了单链表是通过next 指向下一个节点,那么双链表就是指不止可以顺序指向下一个节点,还可以通过prior域逆序指向上一个节点 示意图: ...
- 网络基础 InetAddress
IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有许多类都使用到了 ...
- spring--分类索引
1.过时api Spring(一)解决XmlBeanFactory过时问题 元素 'ref' 中不允许出现属性 'local' Spring学习笔记 关于spring 2.x中dependency-c ...
- nginx配置文件详解【nginx.conf】
#基本配置: #user nobody;#配置worker进程运行用户worker_processes 1;#配置工作进程数目,根据硬件调整.通常等于CPU数量或者2倍于CPU数量 比如四核电脑(可以 ...
- Visual Studio C# 利用git和github协同开发时产生冲突的解决办
Visual Studio C# 利用git和Github协同开发时产生冲突的解决办法 前言:在前两天的助教作业中,发现了自己没有办法解决在用vs开发C#的窗体项目的过程中产生的冲突问题,在查阅了资料 ...
- LPCXpresso54608开发板中文用户手册
M11035 LPCXpresso54608/54618/54S618开发板用户手册 1. 简介 LPCXpresso系列电路板为恩智浦LPC Cortex-M系列微控制器提供了强大而灵 ...
- Redis未授权漏洞检测工具
Redis未授权检测小工具 #!/usr/bin/python3 # -*- coding: utf-8 -*- """ @Author: r0cky @Time: 20 ...