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
随机推荐
- K-th occurrence HDU - 6704 (SA, 主席树)
大意: 给定串$s$, $q$个询问$(l,r,k)$, 求子串$s[l,r]$的第$k$次出现位置. 本来是个简单签到题, 可惜比赛的时候还没学$SA$...... 好亏啊 相同的子串在$SA$中是 ...
- hdu 5432
Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...
- Microsoft Word (2016) Deceptive File Reference ZDI-CAN-7949
[+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source: http://hyp3 ...
- iOS应用开发---返回到指定界面
关于ios中 viewcontroller的跳转问题,其中有一种方式是采用navigationController pushViewController 的方法,比如我从主页面跳转到了一级页面,又从一 ...
- sql sever2008 R2 检测到索引可能已损坏。请运行 DBCC CHECKDB。
1.设置成单用户状态 USE MASTER ALTER DATABASE DBNAME SET SINGLE_USER; GO --DBNAME为修复的数据库名 2.执行修复语句,检查和修复数据库及索 ...
- Windows Server 2008更改SID
参考:Windows Server 2012 克隆修改SID 前言 克隆(软克隆,硬克隆)虚拟机后,虚拟机不光名称一样,IP一样(设置静态IP情况下),连SID也一样 什么是SID SID 安全标识符 ...
- mysql安装和遇到的问题处理
遇到需要在新系统上安装MySQL的事情,简单记录一下过程. 声明:最好的文档是官方文档,我也是看的官方文档,只是中间遇到点问题,记录一下出现的问题和处理方式.贴一些官方文档地址. 用tar包的安装方式 ...
- Python中的时间
coding:utf-8 from time import strftime, localtime import time print(time.time()) time1=strftime('%Y- ...
- Android加载大图到内存如何避免内存溢出?
加载大图怎么避免溢出实际做法就是对图像进行压缩,也是比较老的话题了,在最初做android时是经常会遇到的问题,而如今对于图片加载这一块都已经有很成熟稳定的三方库来弄它了,所以图片加载过大内存溢出的比 ...
- UTF-8&Unicode,0xC0和0x80是什么?
转载:http://blog.sina.com.cn/s/blog_7c4f3b160101dv4p.html 一个字符串长度统计的代码,如下 int calcLen(const char* _str ...