`
yueguangyuan
  • 浏览: 332873 次
  • 性别: Icon_minigender_1
  • 来自: 新加坡
社区版块
存档分类
最新评论

JQuery使用心得

jQueryJavaScriptCSSDjangoPython
阅读更多

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

 

分享到：
| Python使用心得
评论
发表评论

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

相关推荐

    jquery心得

    jquery 使用心得，适用于刚接触的学员们使用

    jquery学习心得

    自己总结的一些jquery常用的方法，很容易上手的。希望大家支持

    jquery零碎实例和学习心得

    jquery零碎实例和学习心得 非常实用

    jQuery框架心得

    jQuery是继prototype之后又一个优秀的Javascrīpt框架。

    jQuery学习实例和心得

    初学者非常有用，从不会到会，容易懂. jQuery中文入门指南，翻译加实例，jQuery的起点。 jQuery技巧总结。

    jquery心得分享

    根据自己实际使用中，从新手到普通开发者中，遇见的各种常见问题所总结出来的经验总结

    jQuery学习心得总结(必看篇)

    下面小编就为大家带来一篇jQuery学习心得总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    关于jQuery UI 使用心得及技巧

    1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题——Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI ...

    jquery 开发实例心得

    很全很使用的jquery开发 经验之谈。

    jQuery 使用个人心得

    下面是jquery比较常用的一些操作实现方式。

    Jquery mobile 从设计到开发

    移动开发中可以参考借鉴的工具书之一，是移动开发和轻应用开发的参考材料

    jQuery开发技巧和心得_知识

    jQuery开发技巧和心得_知识

    JQuery个人总结（很全面）

    目录： 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作：取值和赋值 5.元素的操作：移动 6.元素的操作：复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果

    jquery50个实例下载

    jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&ouml...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。

    jQuery权威指南-源代码

    希望这部耗时数月、承载了我近4年jQuery开发心得和体会的拙著能给每一位阅读过它的读者带来技术上的提升和思路上的启发。非常希望能借本书出版的机会与国内热衷于jQuery技术的开发者交流，如果大家想联系我，欢迎给...

    jquery框架的js库

    jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&ouml...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。

    基于jquery的树形结构JsTree 使用心得

    NULL 博文链接：https://elfasd.iteye.com/blog/1838776

    jquery使用技巧，轻轻松松入门，30分钟精通

    接触jquery几年，留下的心得， 很容易上手，初学者必备宝典，深入学习者，不可少的良师。

Magicbox
Global site tag (gtag.js) - Google Analytics