最近在这里贴了些比较虚的东西，其实我只是coder，最基础的是实用，可操作性。

下面是我的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

群众是永远的主角（照片里的诸位如有冒犯请向我抗议）


在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的笔记本和他的数码设备（在我的相册里）。

更多图片请看我的相册

这两天看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)

下拉表单select是表单中的特例，首先是ie和ff下css样式的不同表现，还有在ie6下，它的z-index级别高，会出现在他的覆盖层上。。。总之做出一个漂亮的select比较费事。

下面通过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>

现在到处都是页签(tab)，有不自动播放的，可以不断自动循环的，只循环一次的，点击以后继续循环，或者停止循环，最近琢磨着，写了一个函数，基本上可以实现这些基本功能。

下面是应用实例和函数，可能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();
}

最近看到很多谈论CSS框架（CSS Framework）的文章，大概的思路如下：
    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/

更新（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>

内存泄漏，就是内存不能够被正确地配置，内存不能及时有效回收，他会导致程序执行效率降低甚至执行失败。

在浏览器领域，大部分都可能会出现内存泄漏问题，但是以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

给某些区域的元素或批量的元素添加事件，一般情况下我们通过循环来实现：先找到所有对应的元素，再给它们添加相应的事件。

如果学习一些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

个人认为纯粹的为SEO而SEO没有必要，但是其中有一些涉及网站/页面的结构和制作，并且有一定的指导作用。在一个外国seo公司的网站上看到的一个测试，但是题目比较多（75道），对下列问题有兴趣的朋友可有去做一下（做完后有正确的答案和分析）。

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

Seo expert quiz

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)

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;}

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

CSS在不同浏览器中的解析一直被大家关注，其实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)

超链接本身具有title属性，当鼠标移到链接上时，title的值就会浮现在超链接的周围，但是外观比较单一。但是我们改变这种情况，最终得到超链接的title显示时被格式化的效果。

需要做的只是下载Sweet Titles: Version 1.0 Final，然后在head标签中添加以下语句，并且把相应的css和js文件放到对应的文件夹中。

<link rel="stylesheet" href="css/sweetTitles.css" type="text/css" media="screen" />
<script src="js/addEvent.js" type="text/javascript"></script>
<script src="js/sweetTitles.js" type="text/javascript" ></script>

你也可以修改css和js中的一些设置来改变气泡的内容和外观，但是要注意以下几点。

1.标签a的属性title=""显示在气泡中，尽量添加此属性
2.文档类型(DOCTYPE)申明为xhtml而不是html

如果不想要气泡中的网址，可以修改sweetTitles.js的第82行
把
this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
改成
this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"</p>";

参考：http://www.dustindiaz.com/sweet-titles-finalized