jQuery实战1:概述，环境准备及入门实例

来源：互联网发布：nba数据统计排名编辑：程序博客网时间：2024/06/05 04:06

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与先前版本保持相容。

發佈日期版本號碼備註2006年8月26日1.0最初的穩定版本2006年8月31日1.0.12006年10月9日1.0.22006年10月27日1.0.32006年12月12日1.0.4Last 1.0 bug fix2007年1月14日1.12007年1月22日1.1.12007年2月27日1.1.22007年7月1日1.1.32007年7月5日1.1.3.12007年8月24日1.1.42007年9月10日1.2jQuery 1.2版以后默认取消XPath支持，改为插件支持2007年9月16日1.2.12008年1月15日1.2.22008年2月8日1.2.32008年5月19日1.2.42008年5月21日1.2.5修正1.2.4版的bug2008年5月24日1.2.62009年1月14日1.3Sizzle選擇器引擎導入至核心，移除過時API^[11]2009年1月21日1.3.12009年2月20日1.3.22010年1月14日1.42010年1月25日1.4.12010年2月19日1.4.22010年10月16日1.4.32010年11月11日1.4.42011年1月31日1.52011年2月24日1.5.12011年3月31日1.5.22011年5月3日1.6改善attr()與val()的效能2011年5月12日1.6.12011年6月30日1.6.22011年9月1日1.6.32011年9月12日1.6.42011年11月3日1.7移除過時API^[12]2011年11月21日1.7.12012年3月21日1.7.22012年8月9日1.8.0Sizzle選擇器引擎重寫，提高動畫與$（html, props）更具彈性.，移除過時API^[13]2012年8月30日1.8.12012年9月20日1.8.22012年11月13日1.8.32013年1月15日1.9.0移除過時API^[14]2013年2月4日1.9.12013年5月23日1.10.0移除過時API^[15]2013年5月30日1.10.12013年7月3日1.10.22014年1月24日1.11.02014年5月1日1.11.12014年12月18日1.11.22015年4月28日1.11.3修復在iOS 8.2與8.3裡的錯誤。2013年4月18日2.0.0除去對Internet Explorer 6-8的支援以提高性能，並降低文件大小2013年5月24日2.0.12013年5月30日2.0.22013年7月3日2.0.32014年1月24日2.1.02014年5月1日2.1.12.1.22014年12月18日2.1.32015年4月28日2.1.4修復在iOS 8.2與8.3裡的錯誤。

学习环境准备

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实战》

0 0