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的方法。），另外，把它放入到一个函数中，通过页面上某个动作来激活函数也是一个不错的办法。

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

这个主题有一些特点：

Header上的书签收藏的链接；这个ICON以及链接是从ThinkAgain的wp_addbookmarks上搬过来的，我觉得这种纯HTML的事直接放在主题里就好了，弄成插件略微占了点服务器资源。ThinkAgain的效果更不错，平常情况下ICON是用CSS的ALPHA模糊了，一旦鼠标移上去（热点）又变成正常的图标。我把这个效果试着写入CSS中，在CSS校验的时候被告知FLITER:ALPHA不存在于CSS2.1，存在于CSS3.0，另外一个opacity又是语法错误，只好不弄这个效果了。

10种语言翻译功能。这个功能虽然实用性不大，但如果有了这功能就自我感觉良好，YY一下。这个功能应该也有WP插件能提供的，此外Google也提供了Widget，相比之下，使用插件略微有点浪费，使用Google Widget又担心JS的调用影响速度，而我的做法是内置的HTML的 <a>链接，不会拖累速度。这些国旗的ICON是我先前介绍的FAMFAMFAM出品的世界各国国旗，效果还挺不错的。而Google的网页翻译的URL也容易找到。

内置多种插件支持，包括了Thinkagain的Hot Friends，用于分页的WP-PageNavi，当然，自己的插件Reviewers_Info以及NeekeyBeta服务也是不能缺少的。特别针对WP-PageNavi的设计了更匹配页面的CSS风格。
更加完美的Gravatar支持。由于现在Gravatar在国内也是很普及了，该主题对Gravatar提供了更好的支持，甚至连文章的作者都已经用Gravatar头像来显示了

标准的XHTML和CSS验证。已经通过了XHTML 1.0 Traditional，CSS 2.1认证。XHTML认真中比较容易出错的地方一个是 <img> 标签应该有 alt=”" 说明，另外是<a>或<img>等调用URL时 http://example.com/example.php?var1=A&var2=B，其中的&在HTML下应该用&amp;替换，当然，如果是XHTML 1.0 Strict标准，别忘了<a> 链接里不能用 target=”_blank”（新窗口打开）。通过了CSS和XHTML验证，我就放心地在页面的FOOTER挂上了W3.ORG的链接了。

至于小挂件方面，在FOOTER放置了ALEXA和Google Pagerank的图标显示，都是80*15px大小的图标，方便地让访客了解到你的博客的信息。，这个Alexa排名显示是特别为这个主题准备的，如果您想使用，请在网页的任意地方添加HTML代码 <img src=”http://dev.neekey.com/alexa-80×15.php?s=photozero.net” alt=”" /> ，其中粗体部分更换为你的网址。

支持主流的Firefox 3 和IE 7。通过Clicki的统计和留言的浏览器统计显示，我的博客访客中，Firefox是最常使用的浏览器，这与访客人群多为技术人员或对IT有一定了解的访客为主有关。另外，由于我的电脑上已经没有IE6，且IE6也算已经被淘汰，也没有去测试了，如果用IE6的朋友感觉很乱，还望见谅！

除了主题更换了，页面也做了一定的调整，在Zeus博客的指点下，我也创建了链接页面，今后博客首页只用Hot Friends显示本月最多回复TOP 20以及自己的NeekeyBeta项目的链接，其他链接转到Links页面，还望见谅。此外，我还把插件的页面重新划分了，看起来不会太乱了。

如图，一个常见的网页效果，像QQ书签，百度收藏均使用这种效果，在用户未登录时，“弹”出一个登录框，输入帐号密码后通过AJAX激活后去除该框即可。这个框不是在浏览器之外弹出的，也不是漂浮的，所以也不会被各种浏览器拦截。怎么实现呢？实际上是先创建一个底下的层，长和宽均为全屏，再使用CSS的FLITER的ALPHA滤镜效果，使背景模糊，并且不可选，再在此上创建一个登录框即可。

1.准备好一个网页模板，建议是符合XHTML4.0的，如果没有，也可以到 www.freecsstemplates.org 下载一个。

2.

在页面最尾部的</body>前加上

<div id=mask style=display:none > </div>
//请自行加上引号以符合XHTML标准 ,中间最好加一个空格的HTML转义字符，以免某些浏览器当容器的内容是空的时候不会显示。这是一个背景模糊的隐藏层,另外，默认是隐藏的，可以在页面载入的时候用JS ，像<body onload=check();> 这样来激活

在CSS中创建

#mask{position:absolute;z-index:2;top:0px;left:0px; right:0; bottom:0;background-color:#999999;filter:alpha(opacity=50);-moz-opacity:0.50;opacity:0.50;}
//请注意，这里没有定义这个层的长和宽，因为直接定义 100%可能会不兼容某些浏览器,所以要在后面使用JS获取屏幕宽度和高度后再赋值。位置是相对的才行哦！

现在来创建登录框的部分

<div id=loginform style=display:none>
<table>
<tr><td>
    <form>
    <input />
    ……
    </form>
</td>
</tr>
</table>
</div>

//这是登陆框的主题部分，建议在这个容器以内使用TABLE以便定位，否则某些浏览器会变形。

再添加loginform的CSS定义：

#loginform{position:absolute;z-index:4;width:600px;height:360px; background-color:#F5FFE0;border:1px solid #A5CF3D;}

//这里面的长，宽，可以先预设，同样，相对于顶部和左部的距离也最好用JS来设置。

现在来设置一下JavaScript

<script>
function check(){
//请自行根据情况设置条件，或者也可以用 <a onlick=check();>Check</a>这样来使用，那就不需要判断条件了。
if 条件 {
 $(‘mask’).style.height=document.body.clientHeight + ‘px’;
 $(‘mask’).style.width=document.body.clientWidth + ‘px’;
 $(‘mask’).style.display=’block’;
//设置模糊层的宽和高，并让它显示出来，需要在后面加上 ‘px’，否则Firefox浏览器会出错
 $(‘loginform’).style.top=(document.body.clientHeight -350)/2 + ‘px’;
 $(‘loginform’).style.left=(document.body.clientWidth -600)/2 + ‘px’;
 $(‘loginform’).style.display=’block’;
//设置弹出框距离顶部和左部的距离，也可以固定为 xxx px，并让它显示出来

}
}

function close1(){
 $(‘loginform’).style.display=’none’;
 $(‘mask’).style.display=’none’;
}
//如果要关闭这个层只要让他们设置为隐藏就可以了。

</script>

下次有空再把部分代码贴出来讲解。