JQuery使用心得
最近借新项目开发的机会重写了自己的代码生成器，为了增加新鲜感，放弃Swing+Velocity的死板套路，改用JQuery+Django+Cheetah，既然用了就不能白用，发表自己的见解表示我没白用 ：P（关于Django、Python的叙述见http://yueguangyuan.iteye.com/blog/241393）
写Django、Python的时候多是在发牢骚，但是JQuery不同，我太喜欢它了，所以这篇日志应该会更阳光。
1.JQuery颠覆JavaScript的编码传统，这是我最想说的一个观点，我不知道其他用户怎么想，这几年用过几个库，Prototype、YUI、DWR，尽管它们目的不尽相同，但是就功能重合这部分功能比较而言，JQuery的表现很出色，因为它对Web界面的操作真是太强悍，无论是DOM、HTML甚至CSS，它都毫不含糊，而且控制能力超强，并且及其简洁，这大大提升了JavaScript在Web领域的控制能力。
2.我认为JQuery的一个很大的好处就是在增加开发者对JavaScript的控制力的情况下，让JavaScript更大程度的与HTML剥离，尽管这一点使用其他库甚至你手写也都能完成，但是JQuery的做法却是一个自然而然的过程。这就好像Google为了一个Firefox的默认搜索引擎就可以每年给Mozilla基金会几千万美刀，这种“自然而然”的东西在对软件开发的影响上有着不言而喻的魔力。
看来我果然不适于唱赞歌，说好话总是说不了太多，JQuery的强劲我也只是体验到冰上一角，毕竟我才写了百来行JQuery代码，它的基础库还没搞熟练，但是有了几个常用的命令我已经可以将我的JavaScript代码简洁许多，以后有机会会去体验它的插件库之类。为了表达我对JQuery的喜爱，特地选几段我的代码拿出来，献丑。
A.JQuery版Drag Table
function drag(layer, title){
title.mousedown(function(evt){
var x = evt.pageX - layer.offset().left;
var y = evt.pageY - layer.offset().top;
layer.setCapture;
$(document).mousemove(function(evt){
layer.css("left", (evt.pageX - x));
layer.css("top", (evt.pageY - y));
});
$(document).mouseup(function(){
layer.releaseCapture;
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
});
}
回想起我最早完全自己手写（基本都是抄的）Drag Label的时候那可真是苦啊（使用JS实现拖动 BBCode版 ），再看看这段代码，差距啊。
调用以上Function看效果，运行下面的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>JQuery Demo</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function drag(layer, title){
title.mousedown(function(evt){
var x = evt.pageX - layer.offset().left;
var y = evt.pageY - layer.offset().top;
layer.setCapture;
$(document).mousemove(function(evt){
layer.css("left", (evt.pageX - x));
layer.css("top", (evt.pageY - y));
});
$(document).mouseup(function(){
layer.releaseCapture;
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
});
}
$(document).ready(function(){
drag($("#over"), $("#title"));
});
</script>
<style type="text/css" rel="stylesheet">
.mask{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
background: #cccccc;
cursor: default;
width: 200px;
z-index: 10;
opacity: 1;
border: 1px solid #1840C4;
}
.title{
background: #95B4DC;
font-size:14px;
cursor: default;
float:left;
width: 200px;
}
.content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
.t{
float: left;
}
body{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="over" class="mask">
<div id="title" class="title">
<span id="t" class="t">Drag Me</span>
</div>
<div id="content" class="content">copy your fileds name here:<br/>
I'm the body.
</div>
</div>
</body>
</html>
有必要说明一点，这些特效实现都十分依赖CSS，JS代码段意味着你需要准备一个设计良好的CSS文件。
B.使用JQuery Selector为你的Table添色
Selector并不是JQuery自有的东西，而是W3C的标准（出自我一个朋友的原话），具体细节可以去http://www.w3.org/TR/CSS21/selector.html查看。JQuery更好的完成了这一功能。
先看一下代码
$(document).ready(function(){
$("table.displaytable tr:odd").addClass("displaytable_odd");
$("table.displaytable tr:not(:has('th'))").mouseover(function(ev){
this.style.backgroundColor='#c1edff';
});
$("table.displaytable tr:not(:has('th'))").mouseout(function(ev){
this.style.backgroundColor='';
});
});
实现两个功能，一个使用类displaytable的Table中奇数行tr将增加displaytable_odd的class，就实现了隔行变色；另一个功能是为刚table增加鼠标移动到上面的highlight的功能（并且会忽略表头th行）。这种方式真的是让人叫绝，因为传统的做法一般都会让你的代码变得丑陋不堪。
那么在实际使用的时候代码示例如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>JQuery Demo</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table.displaytable tr:odd").addClass("displaytable_odd");
$("table.displaytable tr:not(:has('th'))").mouseover(function(ev){
this.style.backgroundColor='#c1edff';
});
$("table.displaytable tr:not(:has('th'))").mouseout(function(ev){
this.style.backgroundColor='';
});
});
</script>
<style type="text/css" rel="stylesheet">
body {
font-family: arial, Helvetica;
font-size:12px;
margin: 0px auto;
background: #F4F4F4;
text-align; center;
}
table.displaytable {
border: 1px solid #cccccc;
padding: 3px;
border-spacing: 0px;
border-collapse: collapse;
width: 50%;
}
table.displaytable th {
text-align: center;
border: 1px solid #cccccc;
}
table.displaytable td {
font-size: 12px;
border: 1px solid #cccccc;
padding: 2px;
}
table.displaytable .displaytable_odd {
background: #ffffff;
}
</style>
</head>
<body>
<div style="text-align:center">
<table class="displaytable">
<tr>
<th>S/N</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Tom</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>Mike</td>
<td>17</td>
</tr>
<tr>
<td>3</td>
<td>Lucy</td>
<td>14</td>
</tr>
</div>
</table>
</body>
</html>
以上演示的仅仅是jQuery的很小一点功能，你可能会说这些功能其他框架甚至手写都可以完成，但是我想要说的是jQuery实现方式更为优雅，更加无侵入。