behaviour.js让你的HTML代码变干净

来源:互联网 发布:湖南大学北校区 知乎 编辑:程序博客网 时间:2024/04/27 17:12

======================================================
注:本文源代码点此下载
======================================================

许多年以前,当我们的网页变得美观起来的时候,html也相应的臃肿了起来。

css的出现和发展,使得我们终于可以把html变得干净了。class,id也取代了font,color等标签的属性,几乎所有的美化我们都可以通过css来进行。

但是html和css的蜜月被js破坏了。为了使页面交互能力更强,我们不得不在许多html标签里使用onclick=”func()”,onmouseover=”func();”这样的东西。例如yahoo首页,如果你查看它的html源代码,你将会发现很多onclick这样的东西。

如果我想知道一个元素中的html代码(innerhtml), 我不得不这样写

http://www.surfchen.org"/onclick="alert(this.innerhtml);return false;">点我

http://www.surfchen.org"/onclick="alert(this.innerhtml);return false;">再点这个

或许,有经验地js程序员会这样处理。

http://www.surfchen.org"/ >点我

http://www.surfchen.org"/ >再点这个

这样就让html代码美观好多了,但是有个缺点,就是for 语句必须放在html元素之后。。

更加高明一点的程序员会把这个for放在函数里,然后在window.onload调用该函数。这样可以使得不用在html元素输出后再写这个for.

http://www.surfchen.org"/ >点我

http://www.surfchen.org"/ >再点这个

终于….终于把把html里的js净化掉了。但是,你是否已经厌倦这种无止境的代码敲写中?来,试试这个好东西-behaviour.js..

他让这一切变得更加轻松。去下载:http://bennolan.com/behaviour/

behaviour可以让你使用css风格来给html元素加上各种行为。

例如上面这个例子。我们可以这样写。

http://www.surfchen.org"/ >点我

http://www.surfchen.org"/ >再点这个

完成这个过程主要分两步:

第一步:写js样式

第二步:注册这个样式。

如果有多个 selector,可以这样

http://www.surfchen.org"/ >点我

http://www.surfchen.org"/ >再点这个

http://www.surfchen.org"/ >点我

http://www.surfchen.org"/ >再点这个

是不是很简单?

除了一些js知识外,只需要你

1)了解基本的css语法;

2)把这个js文件copy到你的站点并在网页中包含。

利用behaviour快速完成工作,然后,好好享受阳光,音乐,享受生活吧。

http://www.surfchen.org/?p=59


======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/