印迹: jquery

门户网站上经常有各种形式新颖的广告出现,幸好这些广告通常都要依靠javascript,用了noscript之后就可以避开其中绝大部分.不过还是有一些网站很难避免,比如所有视频网站的flash播放器都需要js,被逼无奈之下只能允许执行,然后在观看视频的时候忍受以各种方式出现在屏幕各个地方的广告.

我常年打开着noscript,所以对网站在没有js情况下的表现会有些注重.js十分强大,但除了大量使用ajax构成它们主要功能的网站之外,其他大部分网站的js都应该属于锦上添花,有了自然是很好看,没有其实也无所谓,这样的情况下,js至少不应该对浏览造成什么障碍,比如说链接一个超大的js文件大大降低访问速度,或者浏览器不启用js就不能正常浏览某些部分.

举个具体的例子好了.blogger帮助文档里介绍的显示/隐藏评论 ,使用blogger的人用类似代码的不少.基本上来说它就是那种反面典型.事件的触发没有通过onclick而是href,没有启用js的情况下,点击链接会把你带到一个没来由的404页面.

<a href="javascript:togglecomments('c<$BlogItemNumbergt;')">
<$BlogItemCommentCountgt; comments</a>

同样的功能,google主页上那个more就处理的很好,这是我当年抄袭它的代码得到的东西.启用js的情况下会展开那个被隐藏的div的内容,没有js的情况下会跳转到评论页面.

<a href="xxxxx" onclick="return toogle('<$BlogItemNumbergt;');" >xxxxx</a>
<div name="<$BlogItemNumbergt;" id="<$BlogItemNumbergt;" style="display: none;" ></div>

对应的js代码

function toogle(e){
stopB(e);
var elems=document.getElementsByName(e);
for(var i=0;i<elems.length;i++){var obj=elems[i];
var dp="";if(obj.style.display==""){dp="none";}obj.style.display=dp;
}return false;}

function stopB(e){if(!e)e=window.event;e.cancelBubble=true;}

这群代码我当然是一点都看不懂的,实际上,大多数类似充满机器感的语言我都是一看到头疼.我喜欢的是css那样直观,符合生活印象的东西.所以经过这两天的把玩之后,对jquery充满了好感.

对于初级使用者来说,大部分的工作过程是选择对象>触发事件>执行函数.jquery的代码让这一切都充满了美感.尤其是它那牛逼的选择器.还是用那个切换显示隐藏来当作例子:

$(document).ready(function(){
$('a.togglecomment').click(function()
{
$(this).parent('li').parent('ul').next('div.tcomment').toggle('slow');
return false;
}
);
});

上面这段代码就表示,class为togglecomment的a元素,点击之后,寻找它上级li的上级ul的楼下那个class为tcomment的div,执行slow速度的toggle效果.你不需要在html里加上onclick之类的东西,只要为大部分元素添加合适的class或者id之类以便选择器寻找就可以,基本不用添加额外代码和破坏原有结构.

jquery的中文网站是这里 ,他们提供了一个翻译很不错的在线文档 ,看过之后写一些简单的代码应该不成问题了.jquery的库大小约有16k,说大不大说小也不小,放在哪里都颇有些尴尬.幸运的是万能的google用自己的服务器提供了连接,这样应该能保证速度.