文章存档 » 四月 2011

浅谈jQuery

jQuery Icon

第一次分享会开始,第一次分享的是表面上的东西。这里所说的表面上的东西并不是指十分浅显的东西,而是直接与用户交互的那一部分。我们重点来说一说JavaScript的一个比较流行的库——jQuery。

JavaScript和HTML还有CSS一样,都是下载到用户本地,由用户的浏览器进行解释和执行的。

1、jQuery是什么

刚才已经说过了,它是一个JavaScript的库。这些库被用来简化JavaScript的开发,利用这些库,可以降低开发人员JavaScript的技术门槛,使用一些简单的方法实现高兼容性,高移植性的功能。比如对于初学者来说,难以写出同时兼容IE,Firefox,Chrome,Opera的JavaScript代码来,因为需要考虑的方面比较多。但是利用第三方库,这些兼容性问题就可以忽略掉了。说着说着感觉有点像Java的样子。

第三方库是怎么个作用呢?打个比方吧。比如说你想吃饺子,就得活面,做饺子馅,然后包饺子,再煮饺子。经过了这么多过程才终于可以吃了。库呢,就是把活面,做馅,包饺子这些过程全都交给一个包饺子机去做。你只要把原料放到里面,一按按钮,饺子就出来了。生活一下子就简单了!

除了jQuery,还有其他一些比较优秀的JavaScript库。例如Prototype,YUI,MooTools等等。其中Prototype是最早成型的JavaScript库之一,因为成型年代比较早,对面向对象的编程思想把握不是很到位,所以结构比较松散,现在似乎在慢慢改进,仍旧有一些网站使用这个库。

YUI是由Yahoo公司开发的JavaScript工具集,封装了一系列比较丰富的功能。现在和大龙在做的Moodle开发中,其中的JavaScript库使用的便是YUI。看过YUI2的部分文档,YUI2虽然封装了很多工具,但是使用上还是不够方便,有很多类似JavaScript的原始方法。YUI3作出了很大改进,向着简单易用的方向,改善了许多。

jQuery如此流行的原因就是因为它简单易用,容易上手。拥有轻量级的库,强大的选择器,出色的DOM操作,各种事件处理,兼容性解决方案等等特性。

jQuery强调的理念是写得少,做得多。虚的东西不多说了,咱们主要是分享经验,不是给jQuery做广告。

2、代码示例

点我穿越

一般来说,一个button的点击不会出现任何效果。但是可以利用JavaScript来控制它的点击效果。比如,我点这个按钮,浏览器就显示出个OK。再点一下又出来个OK。这都是浏览器解释出来的,并没有写到html文档中。我再刷新一下这个页面,这些OK就消失了。

$(),美元符号,这个是jQuery的工厂函数。能做选择器来用,也能用来创建节点。示例代码中的$(“button”)就是选中下面文档里<button></button>这个节点。同理,$(“#box”)是选中ID为box的节点。这里括号里面的选择方法和CSS是一样的。Click还有append就是jQuery的一系列方法中的两个。前者是监测点击事件,后者是用来向HTML中添加字符串或者各种元素。

这里说到了节点,为什么说成是节点,我们往下看。

3、jQuery对象 VS DOM对象

初次接触jQuery,经常分不清jQuery对象和DOM对象。冷不丁写出来一段代码,很有可能就不知道用什么方法来进行下一步。对用惯了JavaScript直接编码的人来说,这种障碍可能更大一些。初学者直接跨过JavaScript而是用jQuery的话,也需要对这两个对象深入理解才能进行更深入的学习。

什么是DOM?英文全称是Document Object Model,即文档对象模型。每一份DOM都可以表示成一棵树。树中的每个节点都是DOM元素节点。通过JavaScript方法获得的DOM元素就是DOM对象。而通过jQuery选择器取得的DOM元素,是对DOM对象进行的一个包装,此时得到的就是jQuery对象。对于jQuery对象,就可以使用相应的jQuery方法。

DOM对象,jQuery对象,我想了很久,想到一个比较形象的比喻可以解释他们的关系。想在用户交互界面实现一个功能,可以使用JavaScript方法操作DOM,也可以使用jQuery方法来操作DOM实现同样的功能。这就像是煮饭。有米有水,一个人选择生火用大锅煮饭,另一个人选择用电饭锅来煮。这两个人呢相当于不同的选择器;使用的灶台大铁锅,或者是电饭锅就是不同的封装;灶台点火,电饭锅插电,这就是两种不同方法。当然最后的结果都是生米煮成熟饭。而灶台不能插电,电饭锅不能点火,两种不同的对象不能使用此对象不存在的方法。不知道说清楚了没有,大家还要自己主动去研究研究理解理解。

分清DOM对象和jQuery对象对以后的使用会有很大帮助。DOM对象和jQuery对象之间还可以进行转换,这里就不详细介绍了,很简单。

4、DOM操作

DOM操作是JavaScript控制里最常用的操作之一。做前端,那必然会对页面显示的样式做各种各样的控制。这就离不开DOM操作。我将示例代码1做了一点点小修改,于是就诞生了示例代码2。我当时学jQuery的时候基本就是这样一点点研究这东西怎么用的。其实特别容易上手,有一些地方跟Java的语法比较像。

示例代码1里面已经提到了DOM的选择器以及向文档中插入文本。插入节点也是同样的道理,只要把文本换成HTML代码就是了。插入这个节点以后呢,DOM那棵树里面就多了一个节点。

看代码示例2,点我穿越。这段代码比示例代码1多了一个变量,用于标记一下是第几次点击。JavaScript中的变量是用var来声明的,和PHP中的变量类似,也是弱类型的,随着使用,可以随时将它的类型改变成需要的类型。然后,我每点击一次 “It works!”,就向id为box的盒中的ul节点下面添加li节点。这就是基本的向DOM中添加节点的方法。很简单,和添加字符串一样。Append方法和appendTo方法,这俩挺有意思。这个我就不说了,你们如果有兴趣研究jQuery的话,查文档的时候就能看到,然后实际编码实现一下就知道怎么回事了。

既然有创建和添加节点,那肯定有删除节点对吧。删除一个节点是使用remove方法。$(“#box”).remove();只要执行这一句,ID为box的节点就被删除了。我在给Cybery Reader添加Ajax效果的时候我就想,用户点击一个订阅源,我要把中间的内容清空,然后显示这个订阅源下的文章。然后呢,我就用了remove()方法。结果发现,整个盒都被删了。难道我还得新建一个盒?然后我就把删掉的盒子又用前面创建节点的方法添加回去了……再把订阅源中的文章添加到这个节点下。想想这种方法挺对的是吧?

我就想,我这办法也太闹心了吧,就没有个简单点的办法?后来我翻了一下方法列表,给找到了。清空节点中的内容可以使用empty方法,empty方法只清除当前选中元素的子元素。我们试一下,在代码示例2里面,给$(“#box ul”)对象添加一个empty()方法是什么效果。注意,jQuery支持方法的连接操作。用“.”将一个jQuery对象要执行的方法依次连接起来,执行的时候浏览器就会按照方法连接的顺序依次执行。

DOM操作中还有属性操作,样式操作以及文本操作。以Cybery Readeractions.js中的代码为例说明一下属性操作的方法attr()。Attr()接收两个参数,第一个参数是属性名称,第二个参数是属性的值,这两个参数都是字符串。如果只有一个参数,返回值是DOM元素中这个属性的值。如果再加上第二个参数,则把第一个参数指定的属性的值设置为第二个参数的值。例如actions.js第100行这段代码里面。首先取src属性的值,判断一下它是什么,然后108行和116行就是对这个属性进行修改。

样式操作、设置和获取HTML、文本的示例可以参考jQuery手册,不外乎使用几个方法,可能对一些值进行转换,也是比较简单的内容。不再举例了。

5、事件绑定

看代码示例3,点我穿越。一般的理解,我点击“伤不起有木有!”以后呢,这个列表中会再添加一个“伤不起”的项。这都没问题。我点新添加的“伤不起”,看看会不会再向列表中添加一个“伤不起”呢?

啊哦,一点反应都没有。这是为什么呢?因为新添加的节点对于浏览器来说是一个全新的对象,而脚本中并没有给这个新对象绑定任何动作。就好象我新买个电饭锅放家里,但是不插电,那它就永远无法工作。

给这段代码加一点小改进,就可以让新建元素工作了。看代码示例4,点我穿越,用count变量记录添加节点的顺序,为每个节点制定一个ID,然后新建节点以后用选择器选取此ID的节点,为它绑定一个click事件。这样就可以工作了。看看效果。我再点击“伤不起”的时候,这个伤不起的后面就出现了“有木有!”。有木有!有木有!

在一个jQuery对象后面加上.click这样就给这个对象绑定了click事件。还可以显示地使用bind(“click”, function(){…})来绑定click事件。如果想要取消绑定,可以使用unbind方法。

6、Ajax

Ajax全称Asynchronous JavaScript and XML,即异步JavaScript和XML。具体的技术细节这里就不研究了,直接说说jQuery中Ajax的使用。第一次作业里有的同学使用的iframe方法在当前页面载入其他页面的内容。有兴趣可以换成Ajax方法试试。

最简单的是load()方法了,这个方法有3个参数,url, data, callback。其中后两个参数都是可选参数。url参数是请求HTML页面的URL地址,data是发送至服务器的数据,callback是请求完成时的回调函数,无论请求成功或失败都会执行这个函数。

看下一个代码示例,点我穿越。看这段代码能不能大致了解一下我要做什么?点击”It works!”,然后向服务器发出GET请求,获取test.html页面。把这个页面中的内容添加到box中。

Load()方法通常用来从Web服务器上获取静态的数据文件,但是在实际项目中,总是需要给服务器传递一些参数。或许只是悄悄地上传一些数据,并不涉及到DOM操作。这时就可以使用$.post()和$.get()方法了。

看一下Cybery Reader中的Feed列表。这里面每一项都是一个链接,理论上我点击这个链接页面会跳转到链接制定的页面。但是我点一下,它为什么没有跳转呢?在click事件的function函数的最后打一行return false,这样就阻止了页面的跳转。并且使用POST方式向服务器发送了这个链接。

$.get()方法使用GET方法来进行异步请求,$.post()方法使用POST方式来进行异步请求。参数有url,data,callback,type。比load()方法多了一个type,表示服务器端返回内容的格式,包括XML,HTML,Json等。使用这两种方法能够显示地表现出用何种方式来进行异步请求。以actions.js中的代码来解释$.post方法的使用。40行使用Ajax动态添加评论。请求的页面是/comment/,发送的数据是comment。试着发送一条评论,看看Firebug上监视到的结果,结合我们这个callback function就知道这里是如何工作的了。$.get()方法与$.post()方法使用上完全相同。

Ajax就说到这里不再深入了。有兴趣的话,可以继续研究如何使用XML或者JSON来传送数据。

7、没讲到的东西

动画没有讲,这部分我用到的不是很多,感觉和事件处理也十分相似,看看jQuery文档就能知道个大概。

表单、表格的操作没有说。这个和DOM的属性操作很像。

XML、JSON会在Ajax中有涉及。XML就是另一种文档格式了,十分强大,在很多地方都用得上。已经超出今天的范围了,有兴趣的到图书馆借本书看看。或者查在线文档。JSON这个用得比较多,也是用来传递大块数据的。比如你的PHP脚本想要和JS脚本进行数组的传递,用JSON就很方便。

各种细节问题。单纯分享经验嘛,细节问题就不讨论了,不然就变成讲课了。其实说着说着已经变成jQuery快速入门了。快餐一般都没营养,想吃点好的,多看书多研究吧!

8、示例代码目录

Cybery Reader v1.0 Released

主界面全部操作采用Ajax技术,具体内容:

  1. 点击订阅列表中的链接,就可以在中央区域看到订阅源中的文章。
  2. 未读文章数量实时显示:点击一篇未读过的文章,该订阅源在列表中的未读文章数会自减1。
  3. 可以向文章添加评论了:打开一篇文章,会在右侧边栏中看到本站其他用户对该篇文章做出的评论。用户也可以自由地向文章添加评论。注意:不会评论到原文章。评论只供站内用户查看。
  4. 可以为文章添加收藏标记了:每篇文章前面都有一颗五角星,点击以后五角星会点亮,系统会记录下这是用户喜欢的文章。
  5. 同一个订阅源内,同时只展开一篇文章供用户查看。
  6. 将添加订阅的功能移动到了主界面中,在主界面即可完成新订阅源的订阅工作。点击“添加订阅”会弹出文本框要求用户输入订阅地址。如果用户添加订阅时提交了一个含有订阅点的页面的链接,系统会发现该页面中的订阅点,并给出用户提示让用户选择需要订阅的RSS。
  7. 用户成功添加订阅源后,自动刷新Feed列表。

体验新版的Cybery Reader

PureWeber Goo Shortener编写总结

接到任务

上周的某一天收到段神的邮件,得到任务一枚:要我利用已经由7lemon编写好的API写一个提供短网址服务的页面,并提供给了我PSD设计稿。虽然看起来并不是很难的任务,然而我对css还相当生疏,而且之前也没有根据PSD来设计页面的经验(谈不上设计倒是,只是实现了界面而已)。

趟地图

我琢磨着PSD 2 div+css肯定是一项已经被广泛使用的方式,遂去问度娘,得到文章一篇《PSD网页切图制作HTML全过程教程》)上面给出了一个PSD切图制作html的教程,相当详细,对于入门者很是受用。我照着做下去,却遇到了一个问题:自己切的图总是不能正确显示在网页上,比如切出了按钮的图,加入到css中,按钮还是原来的样子,后来分析后发现是切图的问题,一定要用切片工具选定一个区域后再切图,而不能只是将画面调整至想要的状态后直接ctrl+shift+alt+s。

完成任务&修正八阿哥

解决了上述问题,开始各种切图,写css,却在安排组件位置时遇到了麻烦,不知道该如何书写css语句以将组件(图片)安排至我想要的位置,一开始很傻X的使用了position: absolute手动定义坐标,实为权宜之计,因为只要浏览器大小一变,布局就又乱了,后来经段神指点,得知可以将一个div中加上margin: 0 auto并给div设置好大小,这样就可以自动地将页面调整至居中,然后将其他组件放在上面的div里布局,相当于认为指定了页面的大小。之后的组件再在div中内部使用绝对坐标布局即可,还有一点,在一个div内部的div中如果使用了posiotn: absolute其top, left属性是相对于上层的div而言的,不是屏幕的左上角。

绘制好了界面,加入逻辑部分(这部分灰常简单,直接将API include进来调用即可)就基本完成了,发给段神,收工,转天却收到段神的邮件,指出了几个问题,其中一个是meta标签与php的header只写一个即可,还有一个是说我切图不够精准,这一点我还真没有注意,打开浏览器放大几倍才发现很多地方下面的边框被我无情地切掉了。还有一个问题是给出的按钮有两个状态,而我给当成一个状态使用了,改正这一点的时候,我又学会了一个新东西:input标签的事件属性,通过触发时间的处理可以实现动态改变样式的效果,即使用this.className=xxx(具体方法参见本文末尾的参考资料)。

最后还修正了一个问题:文本框中的文字在出IE之外的浏览器中都能显示在文本框的中央,然而在IE中却总是靠上一点,经7lemon指点,在css中设置了line-height属性与图片大小一致后得到解决。

通过这次的coding,让我体会到了div+css之美,还有仔细与严谨的重要性。

最终效果

PureWeber Goo Shortener

参考资料

PureWeber Goo Shortener – 学生作品

简介

这里是 bearzx(张雄) 和 7lemon(付建宇) 同学共同开发的 PureWeber Goo Shortener :http://goo.gl/a92Yc

欢迎大家参观、拍砖。

该程序是一个Goo.gl的包装,通过调用Goo.gl服务将长网址变换为短网址。

Goo.gl的API库由7lemon同学开发,界面设计由dzy0451同学山寨,界面实现和主程序由bearzx开发。

下载源代码

下载

WP Goo Shortener – 基于Goo.gl的WordPress短网址插件

WordPress插件WP Goo Shortener正式发布啦!下载地址:http://goo.gl/JE58N

插件介绍

WP Goo Shortener的作用是将文章链接转换成goo.gl短链接并按照指定格式附加到文章末尾,还可以将文章中指定的链接转换为goo.gl短链接后发布。此次发布的版本为1.0版。此插件还会有后续版本发布,敬请关注。

安装方法

进入Wordpress后台,在左边栏的“插件”菜单中点击“添加新插件”,直接选择上传WP-Goo-Shortener.zip即可。也可以在服务器端进入Wordpress的wp-content/plugins/目录,将WP-Goo-Shortener.zip中的文件解压到该文件夹内。然后到Wordpress后台激活插件即可。

使用说明

激活插件后,再次查看文章,就会将该文章链接的goo.gl短链接显示在文章末尾。您可以通过“GooShortener设置”页面来决定是否显示该链接,或者设置其显示为不同的格式。格式说明:通配符%url和%text在1.0版本中均会被替换成相应的goo.gl短链接。暂不支持自定义%text显示的内容。

使用此插件将文章中的长链接转换为短链接可使用如下形式:

<a href="http://goo.gl/eAzYi">http://goo.gl/eAzYi</a>

文章发布后会自动将链接缩短。缩短样式可参见文章开头的下载链接。

如果想在主题中自定义短链接显示位置,请关闭自动在文章末尾添加短链接的选项。然后在编辑主题时,在The Loop中调用以下两个函数:

  • the_goo_short_url():打印文章短链接(仅输出URL)
  • the_goo_short_link():按照设定的格式打印文章短链接

WP-Goo-Shortener 还提供两个函数,开发者可以在其他位置调用这两个函数:

  • get_goo_short_url($post_id):获取ID为$post_id的文章的短链接(仅输出URL)
  • get_goo_short_link($post_id):按照设定格式获取ID为$post_id的文章的短链接

联系信息

  • 作者:7lemon
  • 博客:http://www.7lemon.net
  • 邮箱:7lemonsoul (at) gmail.com

Reset CSS的前生今世

存在即合理。那么Reset CSS从无到有,到底有神马用处呢?

1. 先来说说Reset CSS的由来

话说很早很早以前,傲来国海外的一座岛上有一块石头……不对不对,那是西游记……

重来。

话说大伙儿还在中学埋头啃书的时候,即不远不近的2004年,一个专注于Web标准的帅哥Tantek被CSS的浏览器兼容问题搞烦了,他苦恼于各种浏览器自定标准,于是就想自己统一一下CSS以方便使用,于是乎就产生了undohtml.css

所以说,Reset CSS存在的理由,就是因为它消除了不同浏览器对HTML元素的默认CSS解释的差异性。比如 <ul></ul> 在IE6-8和FF下默认的缩进就不一样。

IE6-8中是margin-left:40px;padding-left:0,而FF中是margin-left:0;padding-left:40px

2. Reset CSS的工作原理

其实Reset CSS的工作原理非常之简单啦。

就是写一个reset.css文件,在里面将HTML元素的一些style定义一次,然后在网页中引入这个reset.css文件就可以了。

有了这个reset.css,各个浏览器在解析CSS的时候就会遵循reset.css中统一的style定义,于是这个世界就清净了。

3. 实现方式

具体的实现方式请移步:打造自己的reset.css,作者写得非常好,我就不做重复性的劳动了。

这里给出YUI的reset.css让大家先睹为快吧:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; }

4. 其他的声音

什么东西使用过度都是不对的。

对于Reset CSS的使用也有了很多反对的声音。

比如”打造自己的reset.css“的作者自己后来又写了一篇文章:”真的还需要reset.css么?“。

其实到底用不用Reset CSS,也是个见仁见智的问题,不能一概而论。

NB的Eric对于反对使用Reset CSS的回应是:

Because this isn’t a field of straightforward answers and universal solutions.We are often faced with problems that have multiple solutions, none of them perfect.

To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft.

That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.

我个人的意见是:

  • 新手请用reset.css。优点是消除学习初期很多你觉得莫名其妙的bug,可以让你专注于你学习的东西而不是成天debug;缺点是没有这些debug的工作,你会少学很多知识。不过总的来说学习是个循序渐进的过程,所以还是推荐新手使用 reset.css。
  • 老手就不要直接使用reset.css了,而是应该直接根据项目的需要,设定好全局的CSS。

那么你对Reset CSS的看法是什么呢?用,还是不用?或者怎样使用呢?

欢迎大家发表自己意见 & 贴出自己使用的reset.css~

原文地址:http://www.fancycedar.info/2011/04/reset-css/