<![CDATA[制作手记]]> http://hi.baidu.com http://hi.baidu.com http://img.baidu.com/img/logo-hi.gif http://hi.baidu.com/webworker zh-cn www.baidu.com 5 <![CDATA[JsonP / Google AJAX Libraries API / Mashup]]>
一、JsonP + API：Javascrpt中跨域调用数据

先了解下JsonP（JSON with Padding）：利用script标签，通过特定的src地址的调用，来执行一个客户端的js函数，在服务器端生成相对的数据（json格式）并以参数的形式传递给这个客户端的js函数并执行这个函数，前提是需要服务器端的数据输出支持。

以delicious的API提供的jsonp支持为例。

1. 我们先在客户端写一个带参数的函数doyourwork以便处理返回的数据：
    <script type="text/javascript">
    <!--
    function doyourwork(data){
    alert(data);
      //处理数据代码....
    }
    //-->
    </script>


2. 通过script标签，调用http://feeds.delicious.com/feeds/json/bob?callback=doyourwork 生成数据并作为参数传入doyourwork来执行函数：
<script type="text/javascript" src="http://feeds.delicious.com/feeds/json/bob?callback=doyourwork"></script>
这一行相当于执行以下javascript代码： doyourwork(服务器端生成的数据) --- 以服务器端生成的数据为参数执行js函数doyourwork。


当然，现在很多的js库都已经有相应的支持，用起来很方便，比如在jquery中，可以这样
$.getJSON("http://feeds.delicious.com/feeds/json/bob?callback=", function(data){
    alert(data);
    //处理数据代码....
});
更具体的东西请我google code上的例子。

参考 remote json jsonp


二、Google AJAX Libraries API for Mashup！

Google的Dion Almaer也开始在ajaxian.com上推广AJAX Libraries API：其实就是把各种AJAX库放在google的服务器上，为开发者提供更快更好的调用服务。

目前已经提供的AJAX库包括：jQuery / prototype / script_aculo_us / MooTools / dojo。

调用方式一
<script src="http://www.google.com/jsapi"></script>
<script>
// 加载 jQuery； 版本:可以选1，会自动加载1的最新版本1.2.6；压缩（可选）：参数uncompressed
google.load("jquery", "1.2.6", {uncompressed:true});

// 页面加载完成后执行下面程序
google.setOnLoadCallback(function() {
    $("<p>jQuery load completed</p>").appendTo("body");
});
</script>


调用方式二
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
    $("<p>jQuery load completed</p>").appendTo("body");
</script>

类别：Js 查看评论]]> 2008-05-27 15:09 http://hi.baidu.com/webworker/blog/item/6b0caf864c7d013b66096e50.html <![CDATA[CSS文件的通用部分]]>
下面是我的css模板的部分，纯属个人习惯，每个人都可以根据自己的习惯，做一个差不多的css模板，以后做东西的时候拿来改改就可以用了，可以节省一些时间。

body{margin:0 auto;background: #fff;color:#333;} //正文颜色不是纯黑
body,td,select, input, textarea{font:12px/1.5em arial,"宋体",helvetica,clean,sans-serif;}//字体大小有的情况下不能继承
td{vertical-align:top;}//表格单元的内容垂直方向顶部对齐
table{border-collapse: collapse; border-spacing:0; border:0;}//削除表格边框和间隙
img{border:0;}//去除图片边框(加链接的图片)
form{margin:0;padding:0;}//这个有时候容易被忽视
a:link{color:#369;text-decoration:none;}//改变默认的超链接样式，颜色和下划线
a:visited{color:#888;text-decoration:none;}
a:hover{color:#f00; text-decoration:underline;}
a:active{color:#fc0; text-decoration:none;}

*{margin:0;padding:0;}会重置所有的标签，有利有弊，可以节省很多代码，但会牵连有些不想被重置的标签，有些标签虽然被重置了，但是你的页面根本没有这些标签，如果标签多的时候效率可能不好，这样的讲究可能稍微有些过了。

Referrence:No CSS Reset
类别：Css 查看评论]]> 2008-04-30 15:45 http://hi.baidu.com/webworker/blog/item/29d7b87eb2ae523d0cd7da9c.html <![CDATA[D2论坛第一日（D1 @ D2）]]> D2的会场待了一天，听四个不同风格人讲不同的东西。


周爱民
上午入场的时候，在门口填问卷拿了第四期的《程序员》，上面正好有爱民的一篇文章《做人、做事、做架构师——架构师能力模型解析》，但是他要讲的却是“前端设计与开发的基本模式”。
他的讲演内容比较丰富，讲了很多比较虚的概念和理论，象用户、内容、输出设备、焦点的意图/向性/行为引导等，可以增加知识构成，最后拿出来一个公式：U=E2+C2(Effect/Experience、Control/Context)。
期间提了三个比较简单的问题，送出三本他的关于javascript的新书，和台下的我们互动不错。


黄继佳

下午的第一场，讲到Silverlight 2的新特性，一听用记事本对Xaml和Javascript的编辑进行开发已经是历史，现在需要runtime以外的 .net环境(vs200x)支持开发，我松了一口气，以后不用花太多时间在这个东西上了。不过黄继佳的讲演还是不错的，给出了很多的应用demo，还现场codeing了一些简单实例。


Hedger Wang

Hedger是现在yahoo group的tech lead，台湾人(王玺?)，他的讲演很精彩，也很实在很具体，展示了他的许多js和php函数，目的就是如何有效管理ajax异步请求，节约企业资源，notepad++是他的编辑器，而不是.net等自动生成代码的工具，观众提问很具体很具体很。。。


Nate Koechley

纳特-科克莱是Nate名片上的中文名，职位雅虎高级前端工程师，他的展示上有句话这么说："We tell browsers what to do"。yui是他的主题，也是他的工作，Progressive Enhancement是隐含的讲演主题。虽然现在一些yui的模块用起来会越来越简单，但是html标签里的id和class实在太多。关于其他，我没有在实际中用过因此没有发言权。最后八卦一下，Nate的笔记本和他的数码设备（在我的相册里）。

相关图片请看我的相册

类别：综合 查看评论]]> 2008-04-28 17:32 http://hi.baidu.com/webworker/blog/item/513c124c32a6ebfcd62afc17.html <![CDATA[Jens Meiert 关于学习]]> Jens Meiert（一个1978年生的开始为google工作的德国人）的blog，在这里分享和总结一些关于学习的东西。

Jens Meiert写过两篇过于做网站的如何学习的文章，一篇是关于策略的3 Great Learning Strategies for Generalists一片是关于具体操作的What Makes a Professional Web Developer?大致总结如下，可能和原文意思有些偏差，大家可以去看下原文。

怎么学习
1.80/20法则，花80%的时间来关注和学习你的目标对象
2.拥有好的榜样和可靠的信息来源，可以少走很多弯路
3.不要强行记忆某些东西，而是不断地使用它们

如何学习
1.学习web标准--阅读规范文档；
2.理解可用性、亲和性--网站如何为各种设备和所有人服务；
3.独立思维--结构、表现、行为三层分离；
4.实践--尽量手写代码；

最近在blog的右侧加上了一些链接，好的榜样和可靠的信息来源，可以节省很多的学习成本。

附某个大奖去年的宣传语：你看到的越多你能想到的也就更多(the more things you see, the more idea you have)
类别：综合 查看评论]]> 2008-04-10 18:02 http://hi.baidu.com/webworker/blog/item/7238cbcece85fa0693457e25.html <![CDATA[自定义下拉表单select style]]>
下面通过javascript和css结合做了一个自定义select样式的函数。思路如下：
    1.隐藏默认表单
    2.取得表单坐标位置
    3.在原位置创建一个没有触发的select和点击事件
    4.在对应位置创建一个触发后的select和option
    5.根据鼠标在模拟select上的事件改变没有触发的select的文本和原来select的值

Javascript
function si(o,oc,ic){
//参数1：需要样式化的select的id，参数2：替代select的calss，参数1：替代触发后的select的class

//隐藏默认的select
    var o = document.getElementById(o);
        o.style.visibility = "hidden";
    var l = o.options.length;

//获取select的坐标位置
    var x = o.offsetLeft;
    var y = o.offsetTop;

//创建模拟的select
    var n = document.createElement("div");
        n.className = oc;
        n.style.position = "absolute";
        n.style.left = x + "px";
        n.style.top = y + "px";
        n.style.width = o.offsetWidth - 2 + "px";//宽度可以根据实际情况调整
    var n_c = document.createTextNode(o.options[o.selectedIndex].innerHTML);
        n.appendChild(n_c);
    var pn = o.parentNode;
        pn.insertBefore(n, o);


//创建模拟的select的选择状态下的包含容器
    var ns = document.createElement("div");
        ns.className = ic;
        ns.style.display = "none";
        ns.style.position = "absolute";
        ns.style.left = x + "px";
        ns.style.top = y + "px";
        ns.style.width = o.offsetWidth - 2 + "px";//宽度可以根据实际情况调整

//创建模拟的选择状态下的select
        for(var i=0;i<l;i++){
           
            //创建模拟的select的option文本内容
                var nsc = document.createElement("div");
                var ns_c = document.createTextNode(o.options[i].innerHTML);
                    nsc.appendChild(ns_c);
                    ns.appendChild(nsc);

            //模拟option的鼠标滑过效果
                    nsc.onmouseover = function(){
                        this.style.background = "red";
                    }
                    nsc.onmouseout = function(e){
                        this.style.background = "";
                        if (window.event){
                            window.event.cancelBubble = true;
                        } else{
                            e.stopPropagation();
                        }
                    }

            //模拟option的选取效果
                    nsc.onclick = function(){
                        n.innerHTML = this.innerHTML;//改变模拟select的内容
                        for(var j=0;j<l;j++){
                            if(o.options[j].value==n.innerHTML){
                                o.options[j].selected = "selected";//改变原来select的value
                            }
                        }
                        n.style.display = "";
                        ns.style.display = "none";
                    }
            }

        //添加模拟的选择状态下的select
        pn.insertBefore(ns, o);


//点击显示模拟的option内容
        n.onclick = function(){
            n.style.display = "none";
            ns.style.display = "";
        }

//鼠标移开隐藏模拟option的内容（存在问题，有时候不隐藏）
        ns.onmouseout = function(e){
            n.style.display = "";
            ns.style.display = "none";
        }

}

HTML
<div class="s">
    <select id="sel">
        <option value="请选择" selected="selected">请选择</option>
        <option value="选项一">选项一</option>
        <option value="选项二">选项二</option>
        <option value="选项三">选项三</option>
        <option value="选项四">选项四</option>
    </select>
</div>
<script type="text/javascript">
<!--
    si("sel","n_sel","ns_sel");
//-->
</script>

CSS
body,select{margin:0;padding:0;font:12px arial; }
.s{margin:100px;padding:10px; }
.n_sel{padding-top:2px;background: #f8f8f8 url(r_dot.jpg) 50px 6px no-repeat;cursor:pointer;border: 1px solid #ccc;}
.ns_sel{background: #ffc url(r_dot.jpg) 50px 6px no-repeat;border: 1px solid #ccc;}
.ns_sel div{padding-top:2px;cursor:pointer;position: relative; }
</div>
类别：Js 查看评论]]> 2008-02-29 12:56 http://hi.baidu.com/webworker/blog/item/190874d990eca4ed38012fa1.html <![CDATA[可以自动轮换的页签 tabs with auto play fucntion]]>
下面是应用实例和函数，可能html部分的id有点多，很多地方还有待改善。

<dl id="tab_01" class="tab">
    <dt id="tab_01">结构</dt>
    <dd id="tabs_01">
        <h2>Structure</h2>
        <p>XHTML、XML</p>
    </dd>

    <dt id="tab_02">表现</dt>
    <dd id="tabs_02">
        <h2>Representation</h2>
        <p>CSS</p>
    </dd>

    <dt id="tab_03">行为</dt>
    <dd id="tabs_03">
        <h2>Behavior</h2>
        <p>DOM、ECMAScript</p>
    </dd>
</dl>

<script type="text/javascript">
<!--
    timertab("tab_01",2);
//-->
</script>

<style type="text/css" media="screen">
<!--
body,dl,dt,dd{font:12px/1.5em arial;padding:0;margin:0;color:#666;}
body{margin:25px;}
a:link{color:#369;text-decoration: none; }
a:hover{color:#c83;}
.tab{width:210px;border:1px solid #ccc;height: 140px;position: relative; }
.tab dt{float:left;width:70px;padding:3px 0 2px;background: #eee;text-align: center;color:#666;cursor:pointer;}
.tab dt.on{background: #fff;color:#c83;}
.tab dd{display:none;position: absolute;left:0;top:25px;padding:10px;}
.tab dd.on{display:block;}
.tab dd h2{margin:7px 3px 0;font:bold 1.2em arial;color:#999;}
.tab dd p{margin:3px;text-indent: 2em;}
-->
</style>

function timertab(t,a){ //t为要应用此函数的tab的id，a初始化时显示的项目的顺序数
    this.obj = document.getElementById(t).getElementsByTagName("dt");//导航
    this.eles = document.getElementById(t).getElementsByTagName("dd");//内容
    this.start = a-1;//初始项目
    this.speed = 2000;//切换间隔
    this.setid = null;//定时器

    var loop = function(){ //自动切换
        for(var i=0,j=obj.length;i<j;i++){
            obj[i].className = "";
            eles[i].className = "";
        }
        obj[start].className = "on";
        eles[start].className = "on";
        setid=setTimeout(loop,speed);
        start++;
        if(start==obj.length){
            start=0;
             //clearTimeout(setid);//只循环一次
        }
    };loop();

    var clik = function(){ //点击
        for(var i=0;i<obj.length;i++){
            obj[i].onclick = function(){
                clearTimeout(setid);//停止原来的自动切换
                var inb = this.id.substr(this.id.indexOf("#")+6,1);//这里的数字6为dt的id中数字序号出现的位置数
                for(var i=0,j=obj.length;i<j;i++){//重新初始化
                    obj[i].className = "";
                    eles[i].className = "";
                }
                this.className = "on";//显示点击项
                eles[inb-1].className = "on";

                start=inb-1;//从这里开始继续循环（可以根据要求选择是否去掉这部分）
                loop();

                return false //取消<a href="#tabs_01">默认事件
            }
        }
    };clik();
}
类别：Js 查看评论]]> 2008-02-01 12:30 http://hi.baidu.com/webworker/blog/item/fce701f78eeaff26730eece5.html <![CDATA[CSS框架、(X)HTML标签默认样式]]>     1. 先清除(X)HTML标签的默认样式
    2. 设置属于你自己的(X)HTML标签样式和你常用的Class或者Id样式

当然，框架最基本的用途就是减少重复劳动，能节省你的时间，一个项目不用从一无所有开始...... 可以使用你自己总结和收集的CSS和(X)HTML代码模块，前提是先拥有框架(CSS和[或]XHTML)。

同时想到以前总结过一些文字(X)HTML 标签默认的样式属性值，这两者是不是做了部分同样的工作呢？浏览器一开始设置默认样式，然后你再重新设置成你的默认样式，同时设置你常用的标签样式，这样(X)HTML在样式显示方面做的就是做无用功了。

这样问题就转到(X)HTML标签和他的默认样式来了，一些常用的页面模块如header、nav、aside、section预计在HTML5中会出现专用标签，这能减少在CSS中自定义常用模块，而标签的默认样式问题，却很少有更新，不知道是为了兼顾各种不同的用户需求，还是别的什么。。。

Referrence:CSS Frameworks + CSS Reset: Design From Scratch
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
类别：Css 查看评论]]> 2008-01-21 14:12 http://hi.baidu.com/webworker/blog/item/3ff1eddd63c1ddeb77c638fd.html <![CDATA[一个拖拽的基本函数 basic drag function with Cookie]]> 更新（2008-04-09）：以前的版本中存在拖动模块中的内容不可选的问题，原因为函数FocusIt和MoveIt中判断事件对象不是目标对象后用了return false。

拖拽的实现其实挺简单的，这里的简单是实现原理的简单，利用鼠标事件：mousedown锁定目标，mousemove移动，mouseup退出移动，设置全局变量为开关。（可以设置Cookie存取上一次的位置坐标）

判断是否存在可用的Cookie，如有，读取上一次的数据并定位。

锁定目标对象是关键，判断点击部位是否是可以拖拽的部位，如果是设置移动对象的position，及其left和top（也就是相对于网页的坐标，offsetLeft和offsetTop），打开可以移动的开关。

移动对象，让移动对象相对于屏幕原点的坐标系，随着鼠标位置的变化而移动（clientX 和clientY ）。

退出移动，关闭可以移动的开关，存储坐标位置的Cookie。

JavaScript
<script language="JavaScript" type="text/javascript">
<!--

window.onload = function(){
    drag("box","t");
}

function drag(el,bar){//el为要移动的对象的id，bar为可拖拽部位的class

    var box=document.getElementById(el); //获得拖拽对象
    var t=bar;//定义className为t的部位才可拖拽
    var ie=!!(window.attachEvent && !window.opera);//判断是否IE
    var par=false; // 拖拽对象是否可以移动的开关
    var elx, ely; // 拖拽对象在页面上的坐标
    var x,y; // 拖拽对象在屏幕上的坐标

//页面载入时 ，如果有Cookie 读取 并设置初始位置
    var cleft = GetCookie("cleft");
    var ctop = GetCookie("ctop");
    if(cleft&&ctop){
        box.style.position = "absolute";
        box.style.left = cleft;
        box.style.top = ctop;
    }

    box.onmousedown = FocusIt; //拖拽前预处理
    document.onmousemove = MoveIt; //拖拽
    document.onmouseup = ClearIt; //清除拖拽

    function FocusIt(e){
        var target = ie ? event.srcElement : e.target;
        if(target.className==t){
            par = true;//打开开关
            box.style.position = "absolute";//让对象绝对定位，可以在屏幕上任意位置出现
            box.style.left = box.offsetLeft+"px";//获得拖拽对象的当前页面坐标（最后加的px为了兼容ff）
            box.style.top = box.offsetTop+"px";
            x= ie ? event.clientX : e.clientX;//获得鼠标的当前页面坐标
            y= ie ? event.clientY : e.clientY;
            elx = parseInt(box.style.left);//获得拖拽对象的当前页面坐标，并转换为数字，用于后面的计算
            ely = parseInt(box.style.top);
        }           
    }

    function MoveIt(e){
    if (par){
        box.style.left = ie ? event.clientX + (elx - x) + "px" : e.clientX + (elx - x) + "px";
        box.style.top = ie ? event.clientY + (ely - y) + "px" : e.clientY + (ely - y) + "px";//让拖拽对象在页面的坐标相对于鼠标的坐标移动
    }
    }

    function ClearIt(){   
        par = false;//关闭开关
        SetCookie("cleft",box.style.left);//保存当前位置
        SetCookie("ctop",box.style.top);
    }

//Cookie
    function SetCookie(sName, sValue){
        document.cookie = sName + "=" + escape(sValue) + "; ";
    }
    function GetCookie(sName){
        var aCookie = document.cookie.split("; ");
        for (var i=0; i < aCookie.length; i++){
            var aCrumb = aCookie[i].split("=");
            if (sName == aCrumb[0])
            return unescape(aCrumb[1]);
        }
    }
}
//-->
</script>

CSS
<style type="text/css" media="screen">
<!--
#box{width: 250px;height:200px;border:1px solid #ccc;background: #fff;}
#box .t{height:20px;margin:0;padding:2px 4px;border-bottom:1px dashed #ddd;background: #f8f8f8;cursor: move;font:12px;color:#f83;}
#box .t:hover{background: #eee;border-bottom:1px dashed #fc0;}
-->
</style>

Html
<div id="box">
    <h3 class="t">title and drag Bar</h3>
    <div class="ct">content</div>
</div>
类别：Js 查看评论]]> 2008-01-14 12:38 http://hi.baidu.com/webworker/blog/item/48175f2c222094e88b1399ac.html <![CDATA[Javascript 内存泄漏问题]]> 内存泄漏，就是内存不能够被正确地配置，内存不能及时有效回收，他会导致程序执行效率降低甚至执行失败。

在浏览器领域，大部分都可能会出现内存泄漏问题，但是以IE最为多见，也最为严重，尤其是页面中有许多Javascript的交互效果的时候。其中涉及到循环结构（cyclic structure）、DOM对象属性、JavaScript对象属性以及垃圾回收器（garbage collector）。

循环结构（cyclic structure），是指一个DOM对象包含JavaScript对象参数（事件处理函数），JavaScript对象又包含了DOM对象的属性参数。（比如给某个超链接A添加一个onclick事件函数，这时候A就有了相应的事件处理函数，而JavaScript函数对象中也有了A的onclick属性）。

当循环结构（cyclic structure）形成时如果没有别的参数传递给DOM对象或者Javascript函数对象，JavaScript的垃圾回收器（一个自动内存管理器）就会把这两个对象的内存释放并重新进行配置，但是IE的DOM对象属性参数并不能由JavaScript管理清除（不能清除DOM对象的属性参数），而他自己的内存管理机制并不能理解循环结构（cyclic structure）的垃圾回收机制。因此，当循环结构（cyclic structure）的垃圾回收条件形成时，IE也不能进行正确的内存回收管理，导致内存泄漏。当然，这只有在循环结构的未回收内存的数量达到很大的数量级的时候，才会出现明显的内存泄漏症状。

此外，由于循环结构在闭包中出现的几率较大，内存泄漏问题也是不可忽视的。

解决的办法有：

一、避免让可能被移除或改变的DOM对象（remove node/reset innerHTML）中出现循环结构（cyclic structure）；

二、在DOM对象被移除前（remove node/reset innerHTML）清空他的属性参数（domNode.Jsfunction = null）

 1.避免扩展DOM对象的属性参数，如果有要在适当的时候清空；
2.如果某个事件处理函数在移除后可能被某些DOM对象调用，一定要清空；
3.Ajax中XMLHttpRequest的onreadystatechange事件函数调用之后要清。
4....


以上纯属个人理解，大家自行辨解，同时还望各位高手不吝赐教。
附一个可以清除某个DOM对象及其子孙对象的事件属性的函数
function purge(d) {
    var a = d.attributes;//取得DOM对象的所有事件属性
    if (a) {
        var l = a.length;
        for ( var i = 0; i < l; i += 1) {
            var n = a[i].name;//取得DOM对象事件属性的名称如onclick、onblur等
            if (typeof d[n] === 'function') {
                d[n] = null;//清空DOM对象事件属性的值
            }
        }
    }
    a = d.childNodes;//处理子元素
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            purge(d.childNodes[i]);
        }
}
}


Douglas Crockford: JScript Memory Leaks
http://www.crockford.com/javascript/memory/leak.html

Justin Rogers: Understanding and Solving Internet Explorer Leak Patterns
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp
类别：Js 查看评论]]> 2007-12-11 18:38 http://hi.baidu.com/webworker/blog/item/25f9f0dcf14d51a2cc116671.html <![CDATA[事件侦听参数e的应用以及事件冒泡]]>
如果学习一些W3C事件处理模式的知识，可以找到另一种实现的方法:利用事件侦听参数e。

在W3C事件处理模式中：所有通过addEvent给节点元素添加的事件处理器都会给对应的事件侦听函数传回一个包含e参数的对象，在浏览器中我们可以利用e.target（标准）e.srcElement（IE）来取得事件的目标元素。
一旦此元素的事件处理器被激活，此元素的父元素的所有事件处理器也会被激活，即冒泡，可以通过stopPropagation或cancelBubble来取消冒泡。

下面是利用此原理对FAQ实例重新写的代码。

Javascript部分：
<script type="text/javascript">
<!--
window.onload = function(){
    var obj = document.getElementById("faq");
    if (!obj) return false;
        obj.onclick = function(e){//传递事件侦听参数e
            var e = e || window.event;//取得事件侦听参数e
            var tg = e.target || e.srcElement; //取得事件的目标元素
            if(tg.tagName=="H3"){//取得目标对象：标题
                tg.className = tg.className == ""?"on":"";//设置标题样式
                var tp = tg.parentNode.lastChild;//取得这个标题相对应的正文内容（此语句存有bug：在ff2中html的父标签li与子标签h3,p之间有空格或回行时）
                tp.style.display = tp.style.display == "none"?"block":"none";//显示或隐藏正文
            }
            if (window.event){//判断是否IE
                window.event.cancelBubble = true;//IE 取消冒泡（点击超链接时不触其父元素的事件）
                //window.event.returnValue = false;//IE 取消默认行为
            }
            else{
                e.stopPropagation();//取消冒泡
                //e.preventDefault();//取消默认行为
            }
        }
}
//-->
</script>

Html部分：
<ul id="faq">
    <li><h3>headline<a href="http://www.baidu.com" target="_blank">search</a></h3>
        <p>paragraph paragraph paragraph</p></li>
    <li><h3>headline</h3>
        <p>paragraph paragraph paragraph</p></li>
    <li><h3>headline</h3>
        <p>paragraph paragraph paragraph</p></li>
</ul>

Css部分：
<style type="text/css" media="screen">
<!--
#faq{list-style:none;margin:0;padding:0;}
#faq h3{background:#ccc;margin:10px 0 0;padding:3px;font:14px/1.5em arial;border-top:2px solid #369;}
#faq h3.on{background:#ddd;}
#faq h3 a{float: right;margin:-1.8em 1em 0 0;}
#faq p{margin:0;padding:4px;font:12px/1.5em arial;background: #efefef;border-bottom:1px solid #369;}
-->
</style>

From DHTML to DOM scripting -- Christian Heilmann
http://icant.co.uk/articles/from-dhtml-to-dom/from-dhtml-to-dom-scripting.html#domtabs
类别：Js 查看评论]]> 2007-11-26 17:18 http://hi.baidu.com/webworker/blog/item/633ddf2ab32fe02ed52af15b.html <![CDATA[搜索引擎优化 SEO？]]> 做一下（做完后有正确的答案和分析）。

    在什么区域设置的关键词是最不重要的？
    如何对待页面的title？
    域名和URL结构重要吗？
    怎么处理你的链接？
    什么因素影响搜索引擎收录你的网站和页面和排名？
    如何不被搜索引擎收录？
    遵循W3C是否还有必要？
    站点地图可以忽略吗？

Seo expert quiz
类别：综合 查看评论]]> 2007-10-29 10:49 http://hi.baidu.com/webworker/blog/item/b0156ad91f80d62f10df9b78.html <![CDATA[说说jQuery]]> jQuery是最近比较火的一个JavaScript库，从del.icio.us/上相关的收藏可见一斑。

到目前为之jQuery已经发布到1.2.1版本，而在这之前的一个星期他们刚发布1.2版本，看看他的各个版本的发布时间，不难发现他的飞速发展，每个月都在更新版本；而且不断有人开发出新的jQuery插件，最近又推出了jQuery UI库。


jQuery于2006年一月十四号在BarCamp NYC (New York City)面世。主将John Resig，写有《Pro JavaScript Techniques》一书，因为效力于mozolla，据说firefox 3将包含Jquery，现在的Jquery团队有主要开发人员，推广人员，UI，插件开发，网站设计维护，其中3个主要开发人员分别是：两个美国人John Resig/Brandon Aaron，一个德国人Jorn Zaefferer)


下面简单介绍一下jQuery的一些特性和用法：

1.精准简单的选择对象(dom)：

$('#element');// 相当于document.getElementById("element")

$('.element');//Class
$('p');//html标签
$("form > input");//子对象
$("div,span,p.myClass");//同时选择多种对象
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
$(":input");//表单对象
$("input[name='newsletter']");//特定的表单对象

2.对象函数的应用简单和不限制：

element.function(par)；

 $(”p.surprise”).addClass(”ohmy”).show(”slow”)...

3.对已选择对象的操作（包括样式）：
$("#element").addClass("selected");//给对象添加样式
$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式
$("p").text("Some new text.");//改变对象文本
$("img").attr({ src: "test.jpg", alt: "Test Image" });//改变对象文本
$("p").add("span");//给对象增加标签
$("p").find("span");//查找对象内部的对应元素
$("p").parent();//对象的父级元素
$("p").append("<b>Hello</b>");//给对象添加内容

4.支持aJax，支持文件格式：xml/html/script/json/jsonp
$("#feeds").load("feeds.html");//相应区域导入静态页内容
$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//导入动态内容

4.对事件的支持：
$("p").hover(function () {
      $(this).addClass("hilite");//鼠标放上去时
    }, function () {
      $(this).removeClass("hilite");//移开鼠标
    });//鼠标放上去和移开的不同效果（自动循环所有p对象）

5.动画：
$("p").show("slow");//隐藏对象(慢速渐变)
$("#go").click(function(){
$("#block").animate({
    width: "90%",
    height: "100%",
    fontSize: "10em"
}, 1000 );
});//鼠标点击后宽、高、字体的动态变化

6.扩展：
$.fn.background = function(bg){
    return this.css('background', bg);
};
$(#element).background("red");
如果要为每一个jQuery 对象添加一个函数，必须把该函数指派给 $.fn，同时这个函数必须要返回一个 this（jQuery 对象）


jQuery相关
----------------------------------------
1.《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世，同时还有三本相关的书在问世当中。
2.jQueryCamp 2007，一个jQuery开发人员的见面会也将于10月27日在Boston召开。
3.VisualJquery是一个Jquery的学习和查询网站，也跟着更新到了1.1.2版本。



jQuery官网介绍翻译：
----------------------------------------
jQuery是一个以前未曾有过的JavaScript库。

他快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。
jQuery是为了改变JavaScript的编写方式而设计的。

他适合所有人：设计师、开发人员、极客、商业应用...

体积小：26.5KB（1.2.1压缩版），45.3KB（1.2.1精简版），78.6KB（1.2.1完整版）...
          20.7KB（1.1.2压缩版），57.9KB（1.1.2完整版）
兼容性：支持CSS 1-3和基本的XPath
跨浏览器：IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+（向后兼容）

jQuery插件
----------------------------------------
Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

jQueryUI库
----------------------------------------
基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)
类别：Js 查看评论]]> 2007-10-11 17:47 http://hi.baidu.com/webworker/blog/item/3046b101bf5ca100728da5f1.html <![CDATA[结构、表现、行为三层分离：FAQ展开隐藏效果]]>
在下面的例子中，Js只是为了增加更好的互动效果，不影响页面信息的正常展示。在没有Js的情况下，所有回答内容都是展开的，一经调用js，ps[i].style.display = "none";所有回答内容立即隐藏，当鼠标点击某个问题时再显示相关的回答。

代码中关键是参数的传递，利用h3s[i].num = i;给主函数创建一个传参属性， 在子函数中，利用h3s[this.num];来同步参数。

 关于onclick触发事件，因为是在 window.onload函数中，所以onclick触发的事件一定要是一个函数的形式，否则onload完毕就会自动执行onclick事件。

此外，? : 的利用在某些情况下可以减少不少代码的书写。

Javascript
 window.onload = function(){
    var obj = document.getElementById("faq");
    if (!obj) return false;
    var h3s = obj.getElementsByTagName("h3");
    var ps = obj.getElementsByTagName("p");
    for (var i=0;i<h3s.length;i++)
    {
        ps[i].style.display = "none";
        h3s[i].onclick =
        function detail(){
            ps[this.num].style.display = ps[this.num].style.display == "block"?"none":"block";
            h3s[this.num].className = h3s[this.num].className == "on"?"":"on";
        };
        h3s[i].num = i;
    }
}

HTML
<div id="faq">
    <h3>headline</h3>
          <p>paragraph paragraph paragraph</p>
    <h3>headline</h3>
        <p>paragraph paragraph paragraph</p>
    <h3>headline</h3>
          <p>paragraph paragraph paragraph</p>
</div>

CSS
#faq h3{background:#eee;margin:0;padding:3px;}
#faq h3.on{background:#ccc;}
#faq p{margin:10px 0;text-indet:2em;}
类别：Js 查看评论]]> 2007-07-05 17:38 http://hi.baidu.com/webworker/blog/item/c61d851080947b03203f2e20.html <![CDATA[input的水平对齐和table的caption]]> 1.表单项不能水平对齐的问题

input中类型分别为text和submit的表单项目放在同一行时，会出现表单项不能水平对齐的问题，尤其是指定了他们的高度和边框之后，而且ie和ff效果差异很大。这是在XHTML 1.0 Transitional的文档申明下，不用表格来布局，会出现这样的情况。

position可以解决这个问题，但是并不理想，用input {vertical-align: middle;}可以很好地处理这个问题（？）。

2.table的caption和th或td之间的缝隙

当table有caption的时候，在ff下，在caption或table指定margin的情况，caption和th或td之间会存在margin，即caption和td或th都有背景色，他们之间就会出现缝隙。

W3C的REC-CSS2中table部分提出：table的box是由table和caption两个box合并的，相当于table和caption是两个box，这样的话，如果指定他们接触面的margin，就会出现裂缝。

W3C:Tables in the visual formatting mode
类别：Html 查看评论]]> 2007-06-22 18:22 http://hi.baidu.com/webworker/blog/item/2a969022033f1af1d7cae29c.html <![CDATA[不同浏览器对JavaScript脚本的识别]]>
document.getElementById(ID)，document.getElementsByTagName(TagName)方法可用于Internet Explorer 5.5+、Mozilla，是 DOM Level 1 规范的一部分；
document.all，document.all[ID]，document.all.tags(TagName)方法只适用于Internet Explorer 4.0-；
document.layers，document.layers[ID]...方法只适用于Netscape 4.x- 。

innerText只适用于Internet Explorer；
innerHTML对于Mozilla和Internet Explorer都适用。

window窗口属性
offsetLeft(ff中没有单位)

e.target
event.srcElement

attachEvent
addEventListener

XMLHttpRequest();
ActiveXObject(msxml[i]);


参考：
把应用程序从 Internet Explorer 迁移到 Mozilla
IE V.S Mozilla (DHTML && CSS)
类别：Js 查看评论]]> 2007-03-21 17:31 http://hi.baidu.com/webworker/blog/item/08d59b132ab4de816438dbf4.html