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

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实现方式更为优雅,更加无侵入。

 

分享到:
评论

相关推荐

    jquery学习心得

    ### jQuery 学习心得 #### 一、简介与特点 jQuery 是一款优秀的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作,使得前端开发更加高效便捷。jQuery 的核心理念是“写得少,做得多”...

    jQuery框架心得

    【jQuery框架心得】 jQuery是由John Resig创建的一个高效、简洁的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及AJAX交互。jQuery的理念是“WRITE LESS, DO MORE”,即通过少量的代码...

    jquery心得分享

    本文主要根据实际使用经验,分享一些关于jQuery的核心知识点。 首先,要使用jQuery,我们需要在HTML文件中引入jQuery库。最常见的方式是通过下载jQuery文件,如`http://jquery.com/download/`,下载最新版本的压缩...

    jquery零碎实例和学习心得

    `js-0127-jQuery流行广告效果.rar` 可能包含了一些使用jQuery实现的动态广告效果实例,这对于学习如何利用jQuery创建吸引人的网页元素很有帮助。 `jquery手册.rar` 又一份jQuery的手册,可能包含不同的讲解角度或...

    jQuery学习实例和心得

    jQuery是JavaScript库中的一个巨擘,它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本资源针对初学者,旨在...这份"jQuery学习实例和心得"资源将是你宝贵的参考资料,帮助你在JavaScript的世界里更进一步。

    jquery心得

    ### jQuery 心得体会 #### 一、简介 jQuery 是一款快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。它极大地提高了 Web 开发者的效率,使得复杂的操作变得简单易行。 ##...

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

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。这篇文章主要总结了学习jQuery的一些关键知识点。 首先,jQuery对象是通过jQuery包装DOM对象后生成的,它拥有...

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...

    JQuery学习心得

    至于提供的PDF教程,它可能涵盖了JQuery的基本语法、选择器、遍历、DOM操作、事件、动画、Ajax以及插件使用等内容。阅读这样的教程,可以帮助初学者系统地学习JQuery,并通过实例加深理解。 在学习过程中,配合给出...

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

    ### jQuery学习心得总结 #### 一、jQuery简介与特点 jQuery 是一款优秀的 JavaScript 库,它的出现极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。自2006年发布以来,jQuery 已经成为了前端...

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

    **基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...

    关于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作为一款优秀的JavaScript库,凭借其简洁的语法、强大的功能,深受广大前端开发者的喜爱。本文将结合实际经验,分享一些jQuery较为常用的用法及其应用场景。 ###...

    15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

    本文总结述了15个值得开发人员关注的jQuery开发技巧和心得。非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! ...

    完整jquery思维导图/框架图

    于是最近就有了一个想法,想要梳理一下这些年学习以及使用JS的心得。 本系列资源主要是针对jQuery的相关知识点做一个类似提纲似的提炼,画出了一个十分完整的jQuery思维导图,一来可以作为今后温故知新的参照;二来...

    ajax使用jquery json实现的省市县三级联动经验总结

    本文将深入解析如何利用Ajax、jQuery以及JSON来实现这一功能,通过具体代码示例和实践心得,帮助读者理解并掌握这一技术要点。 ### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax(Asynchronous ...

Global site tag (gtag.js) - Google Analytics