就在5月28号周四下午五点的时候，接到xxx姐姐的电话，您是xxx吗？准备一下，周五上午八点半去远洋面试，一路风尘仆仆，颠颠簸簸，由于小编晕车，带着晕晕乎乎的脑子，小编就稀里糊涂的去面试了，温馨提醒，晕车的小伙伴家中常备晕车药，关于远洋面试的一些总结，小编会后续在博客中贴出，希望对有需要的小伙伴一些帮助，通过面试发现面试官大量的提问jquery的相关知识，那时年少，学习jquery的时候，想起来就是一把辛酸泪，于是，小编励志再把JQuery的相关知识复习一遍，把相关的知识点总结到博客中，欢迎不同意见的小伙伴一起讨论交流。今天小编主要跟大家分享一下jquery的一些概述，环境以及一个简单的入门实例。

有的小伙伴可能会问，我是否适合学习jquery这门课程呢？小编告诉你，肯定适合，就像谈恋爱一样，开始的开始，你并不能很好的判断对方究竟是不是你共度一生的那个人，从相识相守相知相惜，需要一个过程，对于准备做ajax前台开发的，熟悉js，了解ajax，想提高自己技术的小伙伴，想熟练掌握jquery使用方式的小伙伴都适合学习这门课程，通过jquery的学习，我们会学习到jquery的API的使用，一些小实例的实现方法，一些html、css、js的小知识。好了，接下来小编就简单介绍一下第一个jquery的实例，用户名校验，我们来简单分析一下这个小例子，首先我们来看服务器端思路分析，对指定用户名比如dingguohua返回用户名已经存在，对其他用户名，返回用户名可以使用，首先我们俩可能整个例子的路径结构如下所示：

首先，我们需要一个html文件，小编把她取名为UserVerify，除此之外我们需要编写css和js的文件，从遵循web标准的方式来看，我们要把css和js文件分别放置，为了便于管理，我们分别建立css和js的文件目录，放置这两种类型的文件，除此之外，我们可能会用到图片，我们需要单独来建立一个images的文件目录，放置一些图片信息，完成这个小例子的第一步就是来编写我们的html文件，要保证先把页面当中需要的一些内容信息通过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/userUerify.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>

我们来分析一下上面的代码，Doctype信息，可以告诉浏览器如何去渲染我们的页面，如何去识别展现页面上的信息，首先我们添加页面的title，然后，为了避免中文乱码问题，我们采取了UTF-8的形式，在上面的代码中，我们指定了页面所使用的css文件，把css的文件放在css文件下面，对应的在文件目录下面建立，除此之外，需要引入这个页面所使用的js的文件，这里需要两个js文件一个是jquery，另一个是我们自己编写的js文件，同样的在js目录里面加上这两个文件。接着我们来看body，body里面的内容是真正展现给用户的内容。当html的代码写完之后，我们发现和最终的页面相比，该有的页面都有了，但是样式不一样，这个时候需要通过css解决这个问题，html负责页面当中的内容，样式通过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="+encodeURL(encodeURL)(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的一些特点，Write less，Do More；JQuery is designed 头change the way that you write js；支持各种主流浏览器，包括IE6以上；以强大的css选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作；屏蔽浏览器差异，对DOM的操作提供了方便的扩展，具有强大的插件机制。jquery学习，未完待续~~~~~~

jquery实战第一讲---概述及其入门实例的更多相关文章

  1. Lucene第一讲——概述与入门

    一.概述 1.什么是Lucene? Lucene是apache下的一个开源的全文检索引擎工具包. 它为软件开发人员提供一个简单易用的工具包(类库),以方便的在目标系统中实现全文检索的功能. 2.能干什 ...

  2. Solr第一讲——概述与入门

    一.solr介绍 1.什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Serv ...

  3. 逆向实战第一讲,寻找OllyDbg调试工具的Bug并修复

    逆向实战第一讲,寻找OllyDbg调试工具的Bug并修复 首先我们要知道这个OD的Bug是什么. 我们调试一个UNICODE的窗口,看下其窗口过程. 一丶查看OllyDbg 的Bug 1.1spy++ ...

  4. jquery前端第一讲

    1.bootstrap里面的文件是什么意思: bootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.mi ...

  5. WebService第一天——概述与入门操作

    一.概述 1.是什么 Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...

  6. C语言_第一讲_C语言入门

    一.C语言的简介 1.C语言是一个标准,而执行标准的时候产生的自动化程序则是编译器2.了解:1983年美国国家标准化歇会(ANSI)制定了C语言标准.C语言的特点:3.代码的可移植性(理想状态是代码可 ...

  7. c#委托事件入门--第一讲：委托入门

    说起委托,有些刚刚入门c#的人感觉很高大上,没有接触过,但是其实很多人都用过Lambda表达式,实际上Lambda表达式就是一个委托. 关于委托入门有个大神写的很详细:张子阳的博客  C#中的委托和事 ...

  8. c#委托事件入门--第二讲：事件入门

    上文 c#委托事件入门--第一讲:委托入门 中和大家介绍了委托,学习委托必不可少的就要说下事件.以下思明仍然从事件是什么.为什么用事件.怎么实现事件和总结介绍一下事件 1.事件是什么:. 1.1 NE ...

  9. JQuery实战---初识JQuery+入门实例

    JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说 ...

随机推荐

  1. RAC基本原理

    RAC基本原理 什么是RAC? 多个实例跑在多个服务器上 一个数据库存放在共享的存储上,所有实例都可以访问 实例之间通过内联网络交换数据和信息 共享存储内容:数据文件.REDO.UNDO.控制文件 参 ...

  2. CentOS 7 安装MySQL 5.6遇到问题及解决方案

    centos下安装mysql真的没有想象中那么容易,在这里我总结一下遇到的问题 1. ERROR 2002 (HY000): Can’t connect to local MySQL server t ...

  3. 修改firefox的默认缩放比

    我们在使用firefox时,发现页面的缩放比只能一个一个手动调整,当跳转到新的页面时默认缩放比又还原了,这个时候又要重新调整,相当不方便. 下面介绍修改默认缩放比的方法: 首先,打开firefox,然 ...

  4. vim的基本介绍

    vim四种模式: 1.正常模式(Normal-mode) 当我们打开vim时就会进入到正常模式,这个时候是不能编辑的,一般用于浏览文件,包括复制,删除一些文本操作.我们可以通过键盘的上下左右来进行光标 ...

  5. 两个App之间调起通信

    前言 经常使用一些app的分享功能,比如点击QQ分享,就从app打开(跳转到)QQ,然后分享完之后又回到我们的app,那么这是怎样实现的呢? 假设有这么一个需求,由app1跳转到app2,当app2完 ...

  6. javascript装饰器模式

    装饰器模式 什么是装饰器 原名decorator 被翻译为装饰器 可以理解为装饰 修饰 包装等意 现实中的作用 一间房子通过装饰可以变得更华丽,功能更多 类似一部手机可以单独使用 但是很多人都愿意家个 ...

  7. JavaScript正则表达式模式匹配(2)——分组模式匹配

    var pattern=/google{4,8}$/; // {4,8}$表示匹配结尾4-8次 var str='googleeeeeeeee'; // 表示e的4-8次 alert(pattern. ...

  8. solr服务器搭建

    百度百科定义:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Ht ...

  9. PHP echo和print 语句

    PHP  echo 和 print 语句 在 PHP 中有两个基本的输出方式: echo 和 print. 本章节中我们会详细讨论两个语句的用法,并在实例中演示如何使用 echo 和 print. P ...

  10. Lua热更新时正确设置文件名

    Lua热更新时正确设置文件名(金庆的专栏 2016.12)Lua热更新模块见:https://github.com/jinq0123/hotfix其中使用 load(chunk) 来加载更新后的内容, ...