jQuery教程 第一篇

jQuery是一个十分优秀的JavaScript库，使用jQuery，可以让网页客户端的JS编写更为简单，效果也更加出众。

jQuery主要提供了AJAX，CSS操作，控制DOM等功能。无论你是要使用AJAX连接服务器与客户端，还是控制页面上某个按钮（输入框的属性），获取输入框的值，隐藏或显示某个DIV，各种动画效果，jQuery绝对是不二选择。

好了，就简单说说如何使用jQuery吧。

首先要下载jQuery文件，目前jQuery最新版本为1.2.6，jQuery官方已经有经过压缩版的JS文件，可以直接用于产品的使用，这个包大概在30KB左右，用于网络传输丝毫不会影响网页的载入速度。此外，jQuery还提供了没有编译的源代码，想知道jQuery工作原理的不妨下载来看看，不过我是没多大兴趣了，我只是用jQuery来做我的产品。

使用任何一门脚本语言一定不能少了它的文档，没有文档就无从下手，遇到问题就要不停地Google。jQuery似乎对国际化的支持不够完善，官方也没有提供其他语言的文档，而国内已经有人翻译了一个比较完善的文档点此下载 。

要使用jQuery，首先在HTML文件中调用jQuery文件，调用这个文件就跟调用别的JS文件一样的：

现在你就可以在页面里随心所欲地使用jQuery提供的功能了。先来一个最简单的应用：

这是一个简单的例子，用于在文档载入成功以后弹出提醒“LOADED”。jQuery中所有功能都要用美元符号开头，如果有一个要绑定一个DOM控件，就可以在括号后输入这个DOM，比如要控制一个DIV，ID为“page”,就是使用$(‘#page’)，控制一个SPAN，CLASS为“entry”，在jQuery中就是使用$(‘.entry’)，如果控制所有的A链接，直接使用$(‘a’)。这与CSS的语法规则有点类似。

隐藏、显示、高度、宽度

在某些AJAX情况下，我们可能会把所有的内容都放入在一个网页中，比如没登陆的时候提示的登录框，通过AJAX登陆成功后提示登陆信息等，这必然要用到一些隐藏、显示的方法。以往用Javascript就要 DOM.style.display=none，显示就要用 DOM.style.display=block ，这样的代码显得冗长，用jQuery就容易多了。在AJAX过程中显示Loading信息：

这个Loading的风格可以是背景用Filter:alpha模糊，这样用户就不能点击页面中的任何东西了，防止重复提交。要做这个Loading信息，首先在页面HTML中输入一个DIV,ID为 loading，容器内放上一个合适的Loading文字或图标。为了兼容更多浏览器，需要即时对#loading赋予当前页面的高度和宽度，保证loading能覆盖整个页面。

这个代码能做一个层，长宽为页面的最大值，z-index层是最上面，把下面的内容透明覆盖（模糊处理），而且鼠标只能在上一层活动，而不能触摸到页面。（该CSS可能不符合CSS语法规范）

$(‘#loading’).show();是一个让#loading显示的代码，同样，有显示就有隐藏，隐藏使用$(‘#loading’).hide();，此外，还可以在show(),hide()里面加入参数，使它发生动作时更为美观。比如$(‘#loading’).show(‘slow’);，是让#loading慢慢地显示出来，更多的参数请参考文档。

需要注意的是，如果使用AJAX，在触发AJAX事件时使用$(‘#loading’).show(‘slow’);，在AJAX结束时就不要再使用$(‘#loading’).hide(‘slow’);因为slow是一个比较慢的过程（可能需要0.5秒），而AJAX是一个异步调用的过程，这样的结果导致了$(‘#loading’).show(‘slow’);和$(‘#loading’).hide(‘slow’);几乎是同时进行，可能会导致Javascript发生错误或效果无法显示。

$(‘#loading’).height(’100px’);这个代码能够把一个高度的数值赋予一个控件，如果没有数值 var heightvalue = $(‘#loading’).height(); ，则是返回一个控件的高度。$(‘#loading’).height($(document).height());就是把整个页面的高度赋值给#loading，使#loading的高度为整个页面的高度，width的用法也是一样的。

关于这个Loading的效果，可以去 http://beta.neekey.com 看看。

CSS

有时候我们需要在页面中即时改变CSS的值（比如对某个出错的信息加粗、红色显示），可以用$(‘#box’).css(‘name’,'value’);的方法来做。现在有个DIV，ID为“box”，里面有一些文字“账号密码输入错误”，这时候需要对这个BOX进行一些处理：

其他信息请参考文档。

AJAX

AJAX是jQuery里面比较重要的应用。jQuery的AJAX分为几个函数，适应不同任务的要求，有完整版的$.ajax(); （类似于PHP中用fsockopen函数），有普通的$.post(); ,$.get(); （类似于PHP中的file_get_contents()函数，fsockopen的阉割版），还有调用Script的 $.getScript();（类似于PHP中的include()语句） 具体需要看你需要用于什么用途了。（以上的比喻可能不是很恰当，仅作为理解使用）

一个完整的AJAX范例

这个代码中除了用到基本版的AJAX调用，后面的注释写得比较完整了。这里用到了$(‘#email’).value()，是调用一个ID为email的值，请在页面中做一个input输入框，ID为“email”，AJAX时就能获取#email的值并进行AJAX调用了。

除了value()还有 html() text() attr()等获取值的方法， html()是获取整个HTML，如果有个DIV,ID为“page”，同时这个层里还嵌套着数个层，调用$(‘#page’).html()时，会把里面包括HTML TAG在内的所有的字符全部调用，而text()方法只调用文本，也就是去除HTML标记后的内容，attr用于调用某个属性，比如一个 input，有ID为“email” ，CLASS为“input1” ，调用$(‘#email’).attr(‘class’) 会返回CLASS的值“input”。

此外，html() text()还像 css() 一样，拥有赋值的功能，使用方法也类似，attr就要用$(‘#email’).attr(‘class’,'NewValue’) 的方法来赋值了。

返回AJAX中，dataType不能胡乱填写，如果以XML形式返回信息就应该填写xml，同时服务端也最好输出header()的Content-Type为XML，如果只是调用某个HTML页面并把它输入到网页中，填写html就可以了。

更多的AJAX方法请参考文档。

注意：很多使用方法需要在文档加载完成以后调用，特别是把JS文件放在头部的尤其应该注意这个问题，浏览器解释时按照从上到下的顺序解释，如果在刚载入JS就做某个命令如 $(‘#box’).css(‘name’,'value’)，此时文档上还不存在#box，这样会导致JS错误，所以需要把这个命令放到$.ready({…});中去 （jQuery规定$.ready({…});等同于$(document).ready({…});，因为只有document有ready的方法。），另外，把它放入到一个函数中，通过页面上某个动作来激活函数也是一个不错的办法。

第一篇到此结束，该文章本人的拙作，在某些术语方面可能不是十分准确，请以文档为准，如果有错欢迎纠正。下一篇什么时候写，看看反响是否热烈