JQuery使用心得

yueguangyuan

浏览: 336894 次
性别:
来自: 新加坡

最近访客更多访客>>

tom2139779

in355hz

MartinDon

maye123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ruby on Rails & Ajax

jQuery JavaScript CSS Django Python

最近借新项目开发的机会重写了自己的代码生成器，为了增加新鲜感，放弃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实现方式更为优雅，更加无侵入。

分享到：

复杂Struts Validation汇总 | Python使用心得

2008-09-13 04:06
浏览 3005
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论