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. K-th occurrence HDU - 6704 (SA, 主席树)

    大意: 给定串$s$, $q$个询问$(l,r,k)$, 求子串$s[l,r]$的第$k$次出现位置. 本来是个简单签到题, 可惜比赛的时候还没学$SA$...... 好亏啊 相同的子串在$SA$中是 ...

  2. hdu 5432

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  3. Microsoft Word (2016) Deceptive File Reference ZDI-CAN-7949

    [+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source:  http://hyp3 ...

  4. iOS应用开发---返回到指定界面

    关于ios中 viewcontroller的跳转问题,其中有一种方式是采用navigationController pushViewController 的方法,比如我从主页面跳转到了一级页面,又从一 ...

  5. sql sever2008 R2 检测到索引可能已损坏。请运行 DBCC CHECKDB。

    1.设置成单用户状态 USE MASTER ALTER DATABASE DBNAME SET SINGLE_USER; GO --DBNAME为修复的数据库名 2.执行修复语句,检查和修复数据库及索 ...

  6. Windows Server 2008更改SID

    参考:Windows Server 2012 克隆修改SID 前言 克隆(软克隆,硬克隆)虚拟机后,虚拟机不光名称一样,IP一样(设置静态IP情况下),连SID也一样 什么是SID SID 安全标识符 ...

  7. mysql安装和遇到的问题处理

    遇到需要在新系统上安装MySQL的事情,简单记录一下过程. 声明:最好的文档是官方文档,我也是看的官方文档,只是中间遇到点问题,记录一下出现的问题和处理方式.贴一些官方文档地址. 用tar包的安装方式 ...

  8. Python中的时间

    coding:utf-8 from time import strftime, localtime import time print(time.time()) time1=strftime('%Y- ...

  9. Android加载大图到内存如何避免内存溢出?

    加载大图怎么避免溢出实际做法就是对图像进行压缩,也是比较老的话题了,在最初做android时是经常会遇到的问题,而如今对于图片加载这一块都已经有很成熟稳定的三方库来弄它了,所以图片加载过大内存溢出的比 ...

  10. UTF-8&Unicode,0xC0和0x80是什么?

    转载:http://blog.sina.com.cn/s/blog_7c4f3b160101dv4p.html 一个字符串长度统计的代码,如下 int calcLen(const char* _str ...