就在5月28号周四下午五点的时候。接到xxx姐姐的电话，您是xxx吗？准备一下，周五上午八点半去远洋面试，一路风尘仆仆，颠颠簸簸，因为小编晕车，带着晕晕乎乎的脑子。小编就稀里糊涂的去面试了，温馨提醒，晕车的小伙伴家中常备晕车药，关于远洋面试的一些总结。小编会兴许在博客中贴出，希望对有须要的小伙伴一些帮助，通过面试发现面试官大量的提问jquery的相关知识，那时年少。学习jquery的时候，想起来就是一把辛酸泪，于是。小编励志再把JQuery的相关知识复习一遍，把相关的知识点总结到博客中，欢迎不允许见的小伙伴一起讨论交流。
今天小编主要跟大家分享一下jquery的一些概述。环境以及一个简单的入门实例。
有的小伙伴可能会问，我是否适合学习jquery这门课程呢？小编告诉你，肯定适合，就像谈恋爱一样，開始的開始。你并不能非常好的推断对方到底是不是你共度一生的那个人。从相识相守相知相惜。须要一个过程，对于准备做ajax前台开发的。熟悉js，了解ajax，想提高自己技术的小伙伴，想熟练掌握jquery使用方式的小伙伴都适合学习这门课程。通过jquery的学习，我们会学习到jquery的API的使用，一些小实例的实现方法，一些html、css、js的小知识。好了，接下来小编就简介一下第一个jquery的实例。username校验，我们来简单分析一下这个小样例。首先我们来看server端思路分析，对指定username比方dingguohua返回username已经存在，对其它username，返回username能够使用，首先我们俩可能整个样例的路径结构例如以下所看到的：
首先，我们须要一个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-username校验</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>
请输入username:<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被按下的神话。须要将文本框的数据获取到。然后发送给server端，最后接受server端返回的数据。填充我们预留的div中，这样用就能够看到结果
*2.文本框上，用户按键之后，须要推断文本框中的内容是否为空。假设不为空，红色的边框和背景图就应该取消，否则保留
* */
/*
*须要在页面装载完毕时注冊上这些工作
**/
$(document).ready(function(){
//这里面的内容就是页面装载完毕后须要执行的代码
var userNameNode=$("#userName");
//须要找到button按钮，注冊事件
$("#verifyButton").click(function(){
//1.获取文本框的内容
var userName=userNameNode.val();
//2.将这个内容发送给server端
if(userName==""){
alert("username不能为空");
}else{
$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName="+encodeURL(encodeURL)(userName)),null,function(response){
//3.接受server端返回的数据，填充到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-***能够控制背景图，以及背景图的位置。反复显示的方式等等。这些小知识点，我们都能够在这个小样例得到充分的认识。补充一个小的知识点，发送给server端的数据在js中做连词encodeURL。然后再server端的代码中按UTF-8的方式做一次URLDecode。能够解决中文中的乱码问题。
小编寄语：这篇博客。小编主要简单的介绍了JQuery的一些基础知识，然后举了一个简单的username校验的样例，文章的末尾。小编简单总结一下jquery的一些特点，Write less，Do More。JQuery is designed 头change the way that you write js；支持各种主流浏览器。包含IE6以上。以强大的css选择器为基础。差点儿全部的操作都先使用选择器查找DOM对象，然后对其进行各种操作；屏蔽浏览器差异。对DOM的操作提供了方便的扩展，具有强大的插件机制。jquery学习，未完待续~~~~~~