jQuery简单入门示例之用户校验demo示例


Posted in Javascript onJuly 09, 2016

本文实例讲述了jQuery简单入门示例之用户校验。分享给大家供大家参考,具体如下:

jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉......

通过JQuery的学习,我们可以学到哪些知识nie,比如我们会学会JQuery的API函数的使用,以及简单的实例的实现方法还有一些html、css、js的小知识,作为明星级的框架JQuery,都有谁在使用nie,比如我们熟悉的Goole、IBM、ORACLE、DELL、土豆等等,都在使用JQuery做前端的开发,我们的JQuery是不是很火爆。

介绍完了JQuery的一些基本知识以后,接下来,小编简单来编写一个实例---用户名校验,首先,我们来分析一下这个小例子的代码思路,首先服务器端思路分析,对指定用户名返回用户名已经存在,对其他用户名,返回用户名可以使用;输入:用户名;输出:提示信息,接着我们来编写代码,编写代码之前,小编简单对这个小例子的目录进行一个简单的描述:我们需要一个html的文件,我们取名叫做UserVerify,除此之外,我们需要写css和js的文件,现在比较流行。遵循web标准来看,我们需要把css文件和js文件单独放置,便于管理,我们需要分别建立css文件和js文件,除此之外,应用当中可能要用到图片,所以我们单独建立一个images文件,接着,我们开始编写代码:

有一个页面文件,先来编辑html,保证内面内容通过html标签表示出来,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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.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>

接着,在css文件目录下建立一个css文件,编写css的代码:

.userText {
  /*控制文本框的边框是红色的实线*/
  border: 1px solid red;
  background-image: url(../images/userVerify.gif);
  background-repeat: repeat-x;
  background-position: bottom;
}

相应的,在js中我们也要建立两个文件,一个jquery一个userVerify,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接下载,接着,我们来编写userVerify的代码,来给整理页面添加行为能力:

/*
 * 需要通过Javascript代码来做两件事情
 * 1.button被按下的时候,需要将文本框中的数据获取到,然后发送给服务器端,最后接受服务器返回的数据,填充到我们预留的div中,这样用户就可以看到结果
 * 2.文本框上,用户按键之后,需要判断文本框中的内容是否为空,如果不为空,红色的边框和背景图就应该取消,否则保留
 * */
/*
 * 需要在页面装载完成是注册上这些工作
 * */
$(document).ready(function() {
  //这里面的内容就是页面装载完成后需要执行的代码
  var userNameNode = $("#userName");
  //需要找到button按扭,注册事件
  $("#verifyButton").click(function() {
    //1.获取文本框的内容
    var userName = userNameNode.val();
    //2.将这个内容发送给服务器端
    if (userName == "") {
      alert("用户名不能为空");
    } else {
      $.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
          //3.接收服务器端返回的数据,填充到div中
          $("#result").html(response);
        });
    }
  });
  //需要找到文本框,注册事件
  userNameNode.keyup(function(){
    //获取当前文本框中的内容
    var value = userNameNode.val();
    if (value == "") {
      //让边框变成红色,并且带背景图
      userNameNode.addClass("userText");
    } else {
      //去掉边框和背景图
      userNameNode.removeClass("userText");
    }
  });
});

我们来看一下运行效果:

jQuery简单入门示例之用户校验demo示例

小例子,小编就演示到这里,通过这个小例子,我们知道html负责页面内容,css负责页面样式,js负责页面行为,html中应该有doctype来告知浏览器的渲染显示方式,border属相可以控制页面元素的边框,background-***可以控制背景图,以及背景图的位置,重复显示的方式等等,这些小知识点,我们都可以在这个小例子得到充分的认识,补充一个小的知识点,发送给服务器端的数据在js中做连词encodeURL,然后再服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文中的乱码问题。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 #Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 #Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 #Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
深入浅析JavaScript中的Function类型
Jul 09 #Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
jQuery获取同级元素的简单代码
Jul 09 #Javascript
You might like
symfony表单与页面实现技巧
2015/01/26 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python实现按中文排序的方法示例
2018/04/25 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
在python中pandas的series合并方法
2018/11/12 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
公司门卫岗位职责
2014/03/15 职场文书
节能减排倡议书
2014/04/15 职场文书
扬尘污染防治方案
2014/06/15 职场文书
广播体操口号
2014/06/18 职场文书
大型公益活动策划方案
2014/08/20 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python