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

前端之家收集整理的这篇文章主要介绍了jQuery简单入门示例之用户校验demo示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了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标签表示出来,代码如下:

JQuery实战1-<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>校验 <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 请输入用户名:

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

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

代码来做两件事情 * 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"); } }); });

我们来看一下运行效果

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》、《》及《

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

原文链接:https://www.f2er.com/jquery/47378.html

猜你在找的jQuery相关文章