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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
angularjs实现分页和搜索功能
Jan 03 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python连接字符串过程详解
2020/01/06 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python实现自动清理重复文件
2020/08/24 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
小学安全教育月活动总结
2014/07/07 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
财产分割协议书
2016/03/22 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android