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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
js读取配置文件自写
Feb 11 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
jquery实现提示语淡入效果
May 05 jQuery
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 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
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python实现贪吃蛇小游戏
2020/03/21 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
服装采购员岗位职责
2014/03/15 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS