jquery入门案例

目录

  • jquery入门

    • 1.jQuery简介

      • jQuery介绍
      • jQuery优点
      • jQuery格式
    • 2.一个简单的Demo
      • 需求
      • 方法介绍
      • 代码

jquery入门

1.jQuery简介

jQuery介绍

  • jQuery就是一个框架,是一个js库。封装了ajax的相关代码,使得代码编写能更加简单

jQuery优点

  • 能用更少的代码做更多的事情

jQuery格式

$(这里面是选择器) . 各种方法

2.一个简单的Demo

需求

  • 点击超链接或者是一个按钮,能够从服务器响应数据,并更改文本框中的内容。

方法介绍

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 对象

代码

  • 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("你的外卖!");

原文地址:https://www.cnblogs.com/richardwlee/p/10327143.html

时间: 2024-11-06 09:30:45

jquery入门案例的相关文章

angularjs入门案例 新玩具-中午吃神马

angularjs 是一个用来开发单页webAPP的mvv框架,由Google 开发,如果不知道angularjs 的可以先google 下 按照angularjs 的开发一般顺序先搭建好需要做的视图,然后准备数据,最后绑定事件处理业务逻辑,操作DOM事件用户和程序的交互. 1.开始搭建界面,使用bootstrap作为UI框架,可以快速搭建清爽的界面效果,顺便引入 angular.js jquery.js 和我们需要写的app.js 作为业务逻辑 1 <!doctype html> 2 <

jquery 入门与知识

一)什么是jQuery? [以封装的思想,重构<<图片显示和隐藏>>] 第三方组织预先写好的一些实用JS文件.类,方法,都统称为JS实用库,免费放在网上,同时配有相关的学习文档和案例, 像以上实用库有很多,其它在JavaEE领域比较著名是的jQuery. *二)为什么要使用jQuery? (1)jQuery是目标是让程序员写少代码,做多事情 (2)jQuery库,压缩后,容量较小,不会占用系统过多资料,WEB页面加载的速度相对较快 (3)jQuery库,兼容各大主流浏览器,它是美国

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

Hibernate介绍和入门案例

一身转战三千里,一剑曾当百万师 如果你在之前没有学过SSH三大框架,那么你之前肯定是通过JDBC来对数据库进行操作.现在,你完全可以把跟数据库交互的操作直接交给Hibernate. Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的 orm框架,hibernate可以自动生成SQL语句,自动执行,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. Hibernate可以应用在任何使用JDBC

一起学习Hibernate: Hibernate01 —— Hibernate的概述与入门案例

一 Hibernate的介绍 1 让我们从JDBC与替代它的框架Hibernate进行一下对比. 1.1 JDBC的缺点 1) 代码结构繁琐.每次书写sql语句操作数据库都得需要很多步; 2) 是面向过程的编程,而非面向对象的: 3) 没有做到数据缓存.这会导致程序与数据库的交互的次数很多: 4) 因为事务是自动开启的,所以存在安全隐患. 1.2 JDBC的优点 1) 因为是底层的数据库操作,所以执行效率很高: 2) sql语句可以自己编写,可以进行优化从而选择效率最高的那些. 1.3 Hibe

PHPUnit 入门案例

了解PHPUnit 本案例是关于创建三角形的一个单元测试入门案例,在netbeans环境中完成,关于在此环境中搭建phpunit这里不再描述,可以参考以下资料完成搭建工作: http://www.cnblogs.com/x3d/p/phpunit-in-netbeans8.html https://phpunit.de/manual/current/zh_cn/installation.html https://github.com/sebastianbergmann/phpunit-skele

_00017 Kafka的体系结构介绍以及Kafka入门案例(初级案例+Java API的使用)

博文作者:妳那伊抹微笑 个性签名:世界上最遥远的距离不是天涯,也不是海角,而是我站在妳的面前,妳却感觉不到我的存在 技术方向:Flume+Kafka+Storm+Redis/Hbase+Hadoop+Hive+Mahout+Spark ... 云计算技术 转载声明:可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明,谢谢合作! qq交流群:214293307  (期待与你一起学习,共同进步) # Kfaka的体系结构 # 学习前言 Kafka的整个学习过程就是自己看官网的文档,出

MyBatis学习(一)简介及入门案例

1.什么是MyBatis? MyBatis是一个支持普通SQL查询,存储过程,和高级映射的优秀持久层框架.MyBatis去掉了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解进行配置和原始映射,以将接口和Java的POJO映射成数据库中的记录. MyBatis作为持久层框架,主要思想是将程序中大量的SQL语句剥离出来,配置在配置文件中,以实现SQL的灵活配置.这样的好处是将SQL语句和程序代码分离,可以在不修改代码的前提下,直接在配置文件中修

Servlet简要介绍及入门案例。

什么是Servlet呢? Servlet 试运行在服务器端的一个小的java程序,接收和相应从客户端发送的请求. 那么Servlet的作用是什么呢? 处理客户端的请求,并且对请求作出相应. 下面是Servlet的简单入门案例: //编写一个类实现Servlet接口 public  class ServletTest1  implements   Servlet{ public  void  service(ServletRequest request , ServletResponse  res