`
longzhun
  • 浏览: 374572 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

跟我学JQuery---------------第一课

阅读更多

官方网站:www.jquery.com

创立者:John Resig

 

请到官方网站下载jquery-1.6.1.min.js

 

 

第一个案例:用户名效验

首先看看我的包目录:


 

大家按照我的包结构把项目建好

 

UserVerify.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>JQuery实战1-用户名校验</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/userVerify.css" />
		<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="js/userVerify.js"></script>
	</head>
	<body>
		请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
		<div id="result"></div>
	</body>
</html>

 

 

 userVerify.css

.userText {
	border: 1px solid red;
	background-image: url(../images/userVerify.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

 

 

userVerify.js

/*
 * 需要通过Javascript代码来做两件事情
 * 1.button被按下的时候,需要将文本框中的数据获取到,然后发送给服务器端,最后接受服务器返回的数据,填充到我们预留的div中,这样用户就可以看到结果
 * 2.文本框上,用户按键之后,需要判断文本框中的内容是否为空,如果不为空,红色的边框和背景图就应该取消,否则保留
 * */

/*
 * 需要在页面装载完成是注册上这些工作
 * */
$(document).ready(function(){
	//这里面的内容就是页面装载完成后需要执行的代码
	var userNameNode = $("#userName");
	//需要找到button按扭,注册事件
	$("#verifyButton").click(function(){
		//1.获取文本框的内容
		var userName = userNameNode.val();
		if(userName == ""){
			alert("用户名不能为空");
		}else{
			//2.将这个内容发送给服务器端
			$.get("UserVerify?userName=" + encodeURI(encodeURI(userName)),
					null,function(data){
				//3.接收服务器端返回的数据,填充到div中	
				$("#result").html(data);
			});
		}
	});
	//需要找到文本框,注册事件	
	userNameNode.keyup(function(){
		//获取当前文本框中的内容
		var value = userNameNode.val();
		if(value == ""){
			//让边框变成红色,并且带背景图
			userNameNode.addClass("userText");
		}else{
			//去掉边框和背景图
			userNameNode.removeClass("userText");
		}
	});
	
});

 

UserVerify.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


package com.ascvalue;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author longzhun
 */
public class UserVerify extends HttpServlet {
   
    /** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
    * @param request servlet request
    * @param response servlet response
    */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String param = request.getParameter("userName");
            if (param == null || param.length() == 0) {
                out.println("用户名不能为空");
            } else {
                String userName = URLDecoder.decode(param, "UTF-8");
                if (userName.equals("wangxingkui")) {
                    out.println("用户名[" + userName + "]已经存在,请使用别的用户名注册");
                } else {
                    out.println("可以使用用户名[" + userName + "]注册");
                }
            }
        } finally { 
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

 

web.xml

 

<servlet>
        <servlet-name>UserVerify</servlet-name>
        <servlet-class>com.ascvalue.UserVerify</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>UserVerify</servlet-name>
        <url-pattern>/UserVerify</url-pattern>
    </servlet-mapping>

 

 

按照以上步骤,咱们第一个案例就很快完成了

简单吧

 

下面总结一下第一课学到的知识:

1。可以通过#idname或.classname的方式来个制定的html节点定义样式

2。可以通过$(document).ready(function(){})的方式来定义页面装载完成时,需要执行的方法

3。可以通过$()方法来获得页面的指定节点,参数是某种css的选择器

4。可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据,定义事件,执行操作

5。val()方法可以获得节点的value属性值

6。html()方法可以设定某个节点中的html内容

7。click()方法可以响应鼠标点击事件

8。keyup()方法可以响应键盘弹起的事件

9。$.get()方法可以和服务器端进行get方式的交互,注册的callback方法会再数据回来的时候被调用,这个方法会接收到代表服务器端返回数据的一个纯文本的参数

10。addClass() removeClass()方法可以给某个节点添加或删除一个class

11。发送给服务器端的数据在javascript中做两次encodeURI,然后在服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文乱码问题

 


 

  • 大小: 10 KB
分享到:
评论

相关推荐

    SYPRO示例项目源码和EasyUI入门视频教程

    第05课(讲解easyui的form控件、validatebox控件、怎样跟后台交互) 第06课(讲解easyui的layout的使用) 第07课(讲解datagrid的基本应用,后台交互,排序功能) 第08课(讲解datagrid的查询,toolbar的多种创建方式,清空...

    MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测(含模型描述及示例代码)

    内容概要:本文档详细介绍了基于 MATLAB 实现的 LSTM-AdaBoost 时间序列预测模型,涵盖项目背景、目标、挑战、特点、应用领域以及模型架构和代码示例。随着大数据和AI的发展,时间序列预测变得至关重要。传统方法如 ARIMA 在复杂非线性序列中表现欠佳,因此引入了 LSTM 来捕捉长期依赖性。但 LSTM 存在易陷局部最优、对噪声鲁棒性差的问题,故加入 AdaBoost 提高模型准确性和鲁棒性。两者结合能更好应对非线性和长期依赖的数据,提供更稳定的预测。项目还展示了如何在 MATLAB 中具体实现模型的各个环节。 适用人群:对时间序列预测感兴趣的开发者、研究人员及学生,特别是有一定 MATLAB 编程经验和熟悉深度学习或机器学习基础知识的人群。 使用场景及目标:①适用于金融市场价格预测、气象预报、工业生产故障检测等多种需要时间序列分析的场合;②帮助使用者理解并掌握将LSTM与AdaBoost结合的实现细节及其在提高预测精度和抗噪方面的优势。 其他说明:尽管该模型有诸多优点,但仍存在训练时间长、计算成本高等挑战。文中提及通过优化数据预处理、调整超参数等方式改进性能。同时给出了完整的MATLAB代码实现,便于学习与复现。

    palkert_3ck_01_0918.pdf

    palkert_3ck_01_0918

    pepeljugoski_01_1106.pdf

    pepeljugoski_01_1106

    tatah_01_1107.pdf

    tatah_01_1107

    [AB PLC例程源码][MMS_046393]Motor Speed Reference.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    基于51的步进电机控制系统20250302

    题目:基于单片机的步进电机控制系统 模块: 主控:AT89C52RC 步进电机(ULN2003驱动) 按键(3个) 蓝牙(虚拟终端模拟) 功能: 1、可以通过蓝牙远程控制步进电机转动 2、可以通过按键实现手动与自动控制模式切换。 3、自动模式下,步进电机正转一圈,反转一圈,循环 4、手动模式下可以通过按键控制步进电机转动(顺时针和逆时针)

    [AB PLC例程源码][MMS_041234]Logix Fault Handler.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_042348]Using an Ultra3000 as an Indexer on DeviceNet with a CompactLogix.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    智慧校园平台建设全流程详解:从需求到持续优化

    内容概要:本文详细介绍了建设智慧校园平台所需的六个关键步骤。首先通过需求分析深入了解并确定校方和使用者的具体需求;其次是规划设计阶段,依据所得需求制定全面的建设方案。再者是对现有系统的整合——系统集成,确保新旧平台之间的互操作性和数据一致性。培训支持帮助全校教职工和学生快速熟悉新平台,提高效率。实施试点确保系统逐步稳定部署。最后,强调持续改进的重要性,以适应技术和环境变化。通过这一系列有序的工作,可以使智慧校园建设更为科学高效,减少失败风险。 适用人群:教育领域的决策者和技术人员,包括负责信息化建设和运维的团队成员。 使用场景及目标:用于指导高校和其他各级各类学校规划和发展自身的数字校园生态链;目的是建立更加便捷高效的现代化管理模式和服务机制。 其他说明:智慧校园不仅仅是简单的IT设施升级或软件安装,它涉及到全校范围内的流程再造和创新改革。

    AI淘金实战手册:100+高收益变现案例解析

    该文档系统梳理了人工智能技术在商业场景中的落地路径,聚焦内容生产、电商运营、智能客服、数据分析等12个高潜力领域,提炼出100个可操作性变现模型。内容涵盖AI工具开发、API服务收费、垂直场景解决方案、数据增值服务等多元商业模式,每个思路均配备应用场景拆解、技术实现路径及收益测算框架。重点呈现低代码工具应用、现有平台流量复用、细分领域自动化改造三类轻量化启动方案,为创业者提供从技术选型到盈利闭环的全流程参考。

    palkert_3ck_02_0719.pdf

    palkert_3ck_02_0719

    2006-2023年 地级市-克鲁格曼专业化指数.zip

    克鲁格曼专业化指数,最初是由Krugman于1991年提出,用于反映地区间产业结构的差异,也被用来衡量两个地区间的专业化水平,因而又称地区间专业化指数。该指数的计算公式及其含义可以因应用背景和具体需求的不同而有所调整,但核心都是衡量地区间的产业结构差异或专业化程度。 指标 年份、城市、第一产业人数(first_industry1)、第二产业人数(second_industry1)、第三产业人数(third_industry1)、专业化指数(ksi)。

    [AB PLC例程源码][MMS_046305]R2FX.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    精品推荐-通信技术LTE干货资料合集(19份).zip

    精品推荐,通信技术LTE干货资料合集,19份。 LTE PCI网络规划工具.xlsx LTE-S1切换占比专题优化分析报告.docx LTE_TDD问题定位指导书-吞吐量篇.docx LTE三大常见指标优化指导书.xlsx LTE互操作邻区配置核查原则.docx LTE信令流程详解指导书.docx LTE切换问题定位指导一(定位思路和问题现象).docx LTE劣化小区优化指导手册.docx LTE容量优化高负荷小区优化指导书.docx LTE小区搜索过程学习.docx LTE小区级与邻区级切换参数说明.docx LTE差小区处理思路和步骤.docx LTE干扰日常分析介绍.docx LTE异频同频切换.docx LTE弱覆盖问题分析与优化.docx LTE网优电话面试问题-应答技巧.docx LTE网络切换优化.docx LTE高负荷小区容量优化指导书.docx LTE高铁优化之多频组网优化提升“用户感知,网络价值”.docx

    matlab程序代码项目案例:matlab程序代码项目案例matlab中Toolbox中带有的模型预测工具箱.zip

    matlab程序代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    pepeljugoski_01_0508.pdf

    pepeljugoski_01_0508

    szczepanek_01_0308.pdf

    szczepanek_01_0308

    oif2007.384.01_IEEE.pdf

    oif2007.384.01_IEEE

    stone_3ck_01_0119.pdf

    stone_3ck_01_0119

Global site tag (gtag.js) - Google Analytics