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语言本身谈项目实战
Dec 27 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
React组件生命周期详解
Jul 03 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
使用vue for时为什么要key【推荐】
Jul 11 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函数
2010/02/16 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php图像处理类实例
2015/07/28 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python OS模块实例详解
2019/04/15 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
2014年党员自我评价材料
2014/09/22 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
靠谱的活动总结
2019/04/16 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python