最近借新项目开发的机会重写了自己的代码生成器,为了增加新鲜感,放弃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 是一款优秀的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作,使得前端开发更加高效便捷。jQuery 的核心理念是“写得少,做得多”...
【jQuery框架心得】 jQuery是由John Resig创建的一个高效、简洁的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及AJAX交互。jQuery的理念是“WRITE LESS, DO MORE”,即通过少量的代码...
本文主要根据实际使用经验,分享一些关于jQuery的核心知识点。 首先,要使用jQuery,我们需要在HTML文件中引入jQuery库。最常见的方式是通过下载jQuery文件,如`http://jquery.com/download/`,下载最新版本的压缩...
`js-0127-jQuery流行广告效果.rar` 可能包含了一些使用jQuery实现的动态广告效果实例,这对于学习如何利用jQuery创建吸引人的网页元素很有帮助。 `jquery手册.rar` 又一份jQuery的手册,可能包含不同的讲解角度或...
jQuery是JavaScript库中的一个巨擘,它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本资源针对初学者,旨在...这份"jQuery学习实例和心得"资源将是你宝贵的参考资料,帮助你在JavaScript的世界里更进一步。
### jQuery 心得体会 #### 一、简介 jQuery 是一款快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。它极大地提高了 Web 开发者的效率,使得复杂的操作变得简单易行。 ##...
jQuery 是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。这篇文章主要总结了学习jQuery的一些关键知识点。 首先,jQuery对象是通过jQuery包装DOM对象后生成的,它拥有...
jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...
至于提供的PDF教程,它可能涵盖了JQuery的基本语法、选择器、遍历、DOM操作、事件、动画、Ajax以及插件使用等内容。阅读这样的教程,可以帮助初学者系统地学习JQuery,并通过实例加深理解。 在学习过程中,配合给出...
### jQuery学习心得总结 #### 一、jQuery简介与特点 jQuery 是一款优秀的 JavaScript 库,它的出现极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。自2006年发布以来,jQuery 已经成为了前端...
**基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...
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作为一款优秀的JavaScript库,凭借其简洁的语法、强大的功能,深受广大前端开发者的喜爱。本文将结合实际经验,分享一些jQuery较为常用的用法及其应用场景。 ###...
本文总结述了15个值得开发人员关注的jQuery开发技巧和心得。非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! ...
于是最近就有了一个想法,想要梳理一下这些年学习以及使用JS的心得。 本系列资源主要是针对jQuery的相关知识点做一个类似提纲似的提炼,画出了一个十分完整的jQuery思维导图,一来可以作为今后温故知新的参照;二来...
本文将深入解析如何利用Ajax、jQuery以及JSON来实现这一功能,通过具体代码示例和实践心得,帮助读者理解并掌握这一技术要点。 ### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax(Asynchronous ...