jQuery实战1:概述，环境准备及入门实例
jQuery是一套跨浏览器的JavaScript函数库，简化HTML与JavaScript之间的操作。由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一個版本。目前是由Dave Methvin领导的开发团队进行开发。全球前10,000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript函数库。
jQuery的特点：
- Write less, Do more。
- jQuery is designed to change the way that you write JavaScript。
- 支持各种主流浏览器,包括IE,FireFox2以上,Safari2以上和Opera9以上的版本。
- 以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作。
- 屏蔽浏览器差异,对DOM的操作提供了方便的扩展,易用的事件处理API和动画API。
- 强大的插件机制。
版本发布
JQuery目前分成1.x版与2.x版，这两种版本发布，后者不再支持IE 6/7/8，前者通过jQuery Migrate plugin与先前版本保持相容。
学习环境准备
1.一款自己喜欢的IDE。作为一名Java程序员，Eclipse是我最佳选择。
2.各种主流浏览器。考虑到浏览器的兼容问题，机器上最好同时装上Firefox,Chrome,Opera，IE等。由于我使用的操作系统是ubuntu,所以暂时不考虑IE。
3.自己熟悉的web服务器。这里以tomcat6.0为例进行学习。
4.api参考手册。Jquery1.8.3和w3school,w3school里面的api较多，覆盖了html,css到js,前端到后台的一些参考手册，但是针对性没有Jquery的参考手册，建议两者都可以选择，或者重点放在前者。
入门案例
1.下载jQuery文件。共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。压缩版一般以min.js结为，其目的是为了在生产时减少文件大小，降低网络带宽,这里两者都可以下载下来，官方下载地址。
2.jQuery 库位于上诉下载的js文件中，其中包含了所有的 jQuery 函数。 可以通过下面的标记把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="jquery.js">script>
head>src里面的内容替换成你的jQuery文件的位置。除了上诉引入jQuery的方法之外，还可以引入谷歌或者微软的CDN里面的jQuery文件，用法如下：
使用 Google 的 CDN
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
script>
head>使用 Microsoft 的 CDN
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
script>
head>jQuery的基础语法是:
$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作，简单案例如:
$(document).ready(function(){
alert("Hello Jquery");
});表示这是jQuery语法，document与JavaScript的document相同，对整个页面这个节点，ready()表示当页面加载结束这一事件，与js的onload有些相同， (document).ready();里面是一个匿名函数，表示加载结束这也这个页面之后将触发函数体里面的内容。而这里的函数体只有一句话alter(“Hello Jquery”),表示在页面弹出窗口显示”Hello Jquery”,如果你是第一次接触jQuery，一定要运行出这个HelloWorld级别的程序出来，因为今后的博客与知识都是建立在这个程序的基础之上的。
好了，现在让我们来正式入门《jQuery实战》系列课程的第一节，做一个校验用户名合法性的模块。
功能需求：
一般在注册用户名之前，先对用户名的合法性进行校验。如果数据库中已经存在用户名则返回不可注册字样，如果数据库中没有被注册过，则返回可以注册字样。输入框中没有输入任何字符时，输入框红色波浪线提示，当输入框输入有字符时，红色波浪线自动消失。
html/jsp页面代码如下:
<body>
请输入用户名: <input type="text" id="userName" class="userText"/>
<button id="verifyButton">校验button><br />
<div id="result">div>
body>body里的标签比较简单，一个input输入框提供给用户输入将要注册的用户名，button是一个按钮，这里不是用form表单提交，而是用ajax提交，所以不用form括起来，此外，这里还预留了一个内容空白的div,留作显示相应结果之用。
为了方便管理js文件，每个模块都单独的写一个js文件，本模块的userVerify.js，需要通过Javascript代码来做两件事情：
1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据， 填充到我们预留的div中，这样用户就可以看到结果
2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留。
//这里面的内容就是页面装载完成后需要执行的代码
var userNameNode = $("#userName");
//需要找到button按扭，注册事件
$("#verifyButton").click(function() {
//1.获取文本框的内容
var userName = userNameNode.val();
//2.将这个内容发送给服务器端
if (userName == "") {
alert("用户名不能为空");
} else {
$.get("../userVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
//3.接收服务器端返回的数据，填充到div中
$("#result").html(response);
});
}
});注意：上面的代码是囊括在 (document).ready();体里面。第一行代码的意思是将id为userName的节点取出来，赋值给变量userNameNode。 (“#verifyButton”).click(function() {});的含义是监听id为verifyButton的元素，触发单击事件时执行匿名函数，做的处理是将userNameNode的值取出来，判断是否为空，若不为空，则通过ajax的get方法向服务器发送数据请求。
jQuery的ajax get请求语法如下:
jQuery .get()方法 .get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
本例用的get请求，所以请求的参数是通过url拼接传递的。后台的Servlet接受数据如下:
public class UserVerify extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String param = request.getParameter("userName");
System.out.println("userName : " + param);
if (param == null || param.length() == 0) {
out.println("用户名不能为空");
} else {
String userName = URLDecoder.decode(param, "UTF-8");
if ("admin".equals(userName) || "超管".equals(userName)) {
out.println("用户名[" + userName + "]已经存在，请使用别的用户名注册");
} else {
out.println("可以使用用户名[" + userName + "]注册");
}
}
} finally {
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}
}这个Servlet的doGet,doPost都是继承自Servlet父类来的，doGet负责相应get请求，doPost负责响应post请求，但是无论是get还是post，我们都可以让它通通用过processRequest()处理请求。processRequest函数的主要内容为：先获取前端传递过来的userName参数值。当不为空时进行判断是否是合法的，本系列博客的重点放在前端，所以没有对数据库中的用户名合法性校验，只是简单的在Servlet里面进行简单的判断，当用户名为”admin”或者”超管”的时候不合法，其他字符串都合法。
为了兼容中文字符串，js需要将userName进行两次编码：encodeURI(encodeURI(userName)。
为了实现输入框红色波浪线提示的功能，这里需要添加css文件，里面保存了输入框的样式。这合法div+css的书写原则，既html之负责基本骨架，css负责具体样式展示。
userVerify.css的代码如下:
/*控制文字边框是红色实线*/
.userText{
border: 1px red solid;
background-image: url("../image/userVerify.gif");
background-repeat: repeat-x;
background-position: bottom;
}红色波浪线的效果是通过背景图片展示出来的,小红色波浪线通过repeat-x不断的重复，达到底部波浪线的效果。
为了达到提示效果，必须监听键盘事件，其中用到keyup事件,keyup语法如下:
$(selector).keyup(function)
function 可选。规定当发生 keyup 事件时运行的函数。
jQuery对应的处理代码
//处理用户名输入框
$("#userName").keyup(function() {
var value = userNameNode.val();
if(value == "") {
$("#userName").addClass("userText");
} else {
$("#userName").removeClass("userText");
}
});addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。removeClass() 方法从被选元素移除一个或多个类。如果没有规定参数，则该方法将从被选元素中删除所有类。上述代码的含义是当id为userName的节点键盘松开时候执行函数里面的内容，从input里面取到值，当值为空的时候，把userText的class加上，达到显示波浪线的效果。当输入框的值不为空的时候移除userText的class,到达去除红色波浪线的效果。
本节知识点
- 1.HTML负责页面内容,CSS负责页面样式,Javascript负责页面行为
- 2.HTML中应该有DOCTYPE来告知浏览器的渲染显示方式
- 3.可以先定义div或span节点用于以后显示服务器返回数据。
- 4.border属性可以控制页面元素的边框
- 5.background-*可以控制背景图,以及背景图的位置,重复显示的方式
- 6.可以通过#idname或.classname的方式来个制定的html节点定义样式
- 7.可以通过$(document).ready(function(){})的方式来定义页面装载完成时,需要执行的方法。
- 8.可以通过$()方法来获得页面的指定节点,参数是某种css的选择器
- 9.可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据,定义事件,执行操作。
- 10.val()方法可以获得节点的value属性值
- 11.html()方法可以设定某个节点中的html内容
- 12.click()方法可以响应鼠标点击事件
- 13.keyup()方法可以响应键盘弹起的事件。
- 14.$.get()方法可以和服务器端进行get方式的交互,注册的callback方法会再数据回来的时候被调用,这个方法会接收到代表服务器端返回数据的一个纯文本的参数
- 15.addClass(),removeClass()方法可以给某个节点添加或删除一个class
- 16.发送给服务器端的数据在javascript中做两次encodeURI,然后在服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文乱码问题。
代码下载地址:https://github.com/shizongger/JqueryInAction
参考资料:
- 维基百科
- jquery帮助文档
- 李兴奎老师《jQuery实战》