Codeking

as below, there's not a referance pass to the function, but you can see there are the  info in log

<h1>Introduction to the DOM<span> s<a>d</a></span></h1>

<script type="text/javascript">

   function mait(e){

    console.log(e)

    }

    document.getElementsByTagName("h1")[0]["onclick"] = mait;

<ul>

<li>GGGG<div>544464454545345644544545644645</div></li>

</ul>

<script>

var el = $("li");

var $div =  $("div");

    $div.hide();

    el.click(function(e){

        e.stopPropagation($(this));

        if($div.is(':hidden')){

            $div.show();

        }else{

            $div.hide();

        }

    });

    $div.click(function(e){

        e.stopPropagation($(this));

    });

    $(document).click(function(){

        if($div.is(':visible')){

            $div.hide();

        }

    });

1、 convert html to canvas:

http://html2canvas.hertzen.com/

https://github.com/niklasvh/html2canvas/downloads

2、convert svg to canvas:

http://code.google.com/p/canvg/

2、convert canvas to images

 this is not work:

div{text-align:left;}

a{text-align:right;text-indent:-999em;}

but this is ok:

div{text-align:right;}

a{text-align:left;text-indent:-999em;}

<div>

<a>next</a>

absorb string from a long string ,if in the start and the end ,them are the same in reverse ,such as "abc987563cba", answer is "abc".

<div id="text"></div>

<script type="text/javascript">

    function absortStr(str){

        var len = str.length;

        if(len == 1){return ""}                 // 值长度为1的情况

        var times = Math.floor(len/2);

        for(i=0;i<times; i++){

            var start = str[i];

            var end = str[(len-1-i)];

            if(i == 0 && start != end){            // 值为空的情况

                return "";

            }else if( start != end){               // 有值情况

                return str.slice(0,i);

            }else if(i == (times -1) && start == end){   // 有值并左右值对称并长度为奇情况

               return str.slice(0,(i+1));

           }

        }

    }

    var str = absortStr("a' bssb988 'a");

    var text = document.getElementById("text");

    text.innerHTML=str;

<div><button id="run" type="button">Run</button></div>

<script>

btn = document.getElementById("run");

(btn.onclick = function () {

alert("ddd")

    })();

the first one, it print number like this :

1 2 3

8 9 4

7 6 5

<div id="text"></div>

<script type="text/javascript">

    var cal = function(len){

        var helix = [];

        for(var j =0;j<len;j++){

            helix[j]=[];

        }

        var min = 0;

        var max = len - 1;

        var row = 0;

        var col = 0;

        for(var i=0; i < len * len; i++) {

            helix[row][col]=i+1;

            if(row == min && col < max) {

                col = col + 1;

            }

            else if(row < max && col == max) {

                row = row + 1;

            }

            else if(row == max && col > min) {

                col = col - 1;

            }

            else if(row > min && col == min) {

                row = row - 1;

            }

            if(row - 1 == min && col == min){

                min = min + 1;

                max = max - 1;

            }

        }

        return helix;

    };

    var helix = cal(4);

    var html = "";

    for(var i=0; i < helix.length; i++) {

        for(var j=0; j < helix[i].length; j++) {

            html += helix[i][j] + " ";

        }

        html += "<br />";

    }

    var text = document.getElementById("text");

    text.innerHTML=html;

</script>

the second one,  it print a string like this:

1 2 3 6 9 8 7 4 5 

<div id="text"></div>

<script type="text/javascript">

    var lineNum;

    var cal = function(len){

        lineNum = len;

        var helix = [];

        for(var j =0;j<len;j++){

            helix[j]=[];

        }

        var min = 0;

        var max = len - 1;

        var row = 0;

        var col = 0;

        for(var i=0; i < len * len; i++) {

            helix[row][col]=i+1;

            if(col < max) {

                col = col + 1;

            }

            else if(col == max) {

                row = row + 1;

                col = 0;

            }

        }

        return helix;

    };

    var meme = function(alei){

        var line = "";

        var min = 0;

        var max = lineNum - 1;

        var row = 0;

        var col = 0;

        for(var i=0; i < lineNum * lineNum; i++) {

            line += alei[row][col]+" ";

            if(row == min && col < max) {

                col = col + 1;

            }

            else if(row < max && col == max) {

                row = row + 1;

            }

            else if(row == max && col > min) {

                col = col - 1;

            }

            else if(row > min && col == min) {

                row = row - 1;

            }

            if(row - 1 == min && col == min){

                min = min + 1;

                max = max - 1;

            }

        }

        return line;

    };

    var helix = cal(3);

    var line = meme(helix);

    var text = document.getElementById("text");

    text.innerHTML=line;

now, the events can be added as Jquery, very short. coz the function"smallize".

<div id="d1" style="width:200px;height:200px;background:gold;"></div>

<script type="text/javascript">

var E= function(){

    this.smallize = function (){

        var key;

        for(key in E.prototype.Event){

            E.prototype[key] = E.prototype.Event[key];

        }

    };

    this.smallize();

};

E.prototype.Event = function(){

    function _isEmptyObj(obj){

        for(var a in obj){

            return false;

        }

        return true;

    }

    function _each(ary, callback){

        for(var i=0,len=ary.length; i<len;){

            callback(i, ary[i]) ? i=0 : i++;

        }

    }

    function _remove(el, type){

        var handler = el.listeners[type]['_handler_'];

        el.removeEventListener ?

                el.removeEventListener(type, handler, false) :

                el.detachEvent('on'+type, handler);

        delete el.listeners[type];

        if(_isEmptyObj(el.listeners)){

            delete el.listeners;

        }

    }

    // 添加事件

    function add(el, type, fn){

        el.listeners = el.listeners || {};

        var listeners = el.listeners[type] = el.listeners[type] || [];

        listeners.push(fn);

        if(!listeners['_handler_']){

            listeners['_handler_'] = function(e){

                var evt = e || window.event;

                for(var i=0,fn; fn=listeners[i++];){

                    fn.call(el, evt);

                }

            }

            el.addEventListener ?

                    el.addEventListener(type, listeners['_handler_'], false) :

                    el.attachEvent('on' + type,  listeners['_handler_']);

        }

    }

    // 删除事件

    function remove(el, type, fn){

        if(!el.listeners) return;

        var listeners = el.listeners && el.listeners[type];

        if(listeners) {

            _each(listeners, function(i, f){

                if(f==fn){

                    return listeners.splice(i, 1);

                }

            });

            if(listeners.length == 0){

                _remove(el,type);

            }

        }

    }

    //主动触发事件

    function dispatch(el ,type){

        try{

            if(el.dispatchEvent){

                var evt = document.createEvent('Event');

                evt.initEvent(type,true,true);

                el.dispatchEvent(evt);

            }else if(el.fireEvent){

                el.fireEvent('on'+type);

            }

        }catch(e){};

    }

    return {

        add: add,

        remove: remove,

        dispatch: dispatch

    };

}();

function handler(){

        alert(this);

        alert(arguments[0]);

    }

var $ = new E();

var el = document.getElementById('d1');

function handler1(){alert('1');}

function handler2(){alert('2');}

function handler3(){alert('3');}

function handler4(){alert('4');}

function handler5(){alert('5');}

$.add(el, 'click', handler1);

$.add(el, 'click', handler2);

$.add(el, 'click', handler3);

$.add(el, 'click', handler4);

$.add(el, 'click', handler5);

$.remove(el, 'click', [handler1,handler2]);

        var $ = function() {};

        $.prototype.onDomReady = function(callback) {

            if (document.addEventListener) {

                document.addEventListener('DOMContentLoaded', callback, false);

            } else {

                document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");

                var script = document.getElementById("__ie_onload");

                script.onreadystatechange = function() {

                    if (this.readyState == "complete") {

                        callback();

                    }

                };

            }

        };

        $ = new $();

        $.onDomReady(function() {

            alert("The DOM is ready!");

Jquery:    the point is e.keyCode

$(document).keyup(function(e){       if(e.keyCode == 32){$(".overlay .dialog .btn_a").trigger("click");}     });

JS:

一、JavaScript变量作用域(scope) 首先需要明白的几个要点： 1.JavaScript的变量作用域是基于其特有的作用域链的。 2.JavaScript没有块级作用域。 3.函数中声明的变量在整个函数中都有定义。（就后面第三点的说明） 4 .所有在最外层定义（非函数体内定义）的变量都拥有全局作用域 5. 所有末定义直接赋值的变量，系统会自动声明为拥有全局作用域的变量 6. 所有window对象的属性拥有全局作用域

（下面作者还提到全局变量都可以通过window.*来访问，明白这一点很重要，但是否准确？此外目前存在的疑问还有：

    即使可以以这中方式来访问全局变量那是否能认为全局对象由window来统一管理，还是window只是保存了一个拷贝而已?）     1.JavaScript的作用域链 首先看一个很简单的例子，下面的代码中，定义一个全局变量n，n的作用域是全局的。

<script language="javascript" type="text/javascript"> var n=1; function show(){    var m=2;    alert(n);   //显示结果为1 } show(); </script>

运行代码后，结果为1。原理就是JavaScript作用域是层层包含的，外层的作用域在内层有效，执行的时候，从内层向外层查找。当函数show执行的时候，首先在函数show内部查找变量n，没有找到，再向外层查找，找到了全局变量n，alert显示结果为1。 2.局部变量优先级高于全局变量

<script language="javascript" type="text/javascript"> var n=1; function show(){    var m=2;    var n=3;    alert(n);   //显示结果为3 } show(); </script>

这个不难理解，根据上面变量作用域链的原理，函数执行时，会先从内层向外层查找，如果在内层中找到变量，查找就会停止。所以内层的作用域会优先于外层，局部优先于全局。 稍改一下：

<script language="javascript" type="text/javascript"> var n=1; function show(){    var m=2;    var n=3;    alert(window.n);   //显示结果为1 } show(); </script>

为什么会是1，而不是3呢，只是另外一个问题：全局变量都是window对象的属性，任何的全局变量都是window对象的属性，都可以用window.*来引用。(*代表一个变量)

3.在函数内部使用var声明的变量，不论在何处声明，该变量都拥有整个函数的作用域。

<script language="javascript" type="text/javascript"> var n=1; function show(){    alert(n);   //undefined    alert(this.n); //显示为1    var n=3;   //声明局部变量n    alert(n);   //显示为3 } show(); </script>

第一个问什么会显示undefined呢，这个问题的原因就是在函数后面声明了局部变量n=3，在函数show执行的时候，会先从内层查找变量n，结果找到了，但在第一个alert的时候，n还没有赋值，故结果为undefined。

4.JavaScript没有块级作用域

<script language="javascript" type="text/javascript"> var n=1; function show(){    for(var i=0;i<3;i++){      var n=6;      alert(i);   //显示结果为0,1,2    }    alert("for循环外："+i); //显示结果为：“for循环外：3”    alert("n="+n);   //显示结果为：n=6 } //alert(i);   外部引用一个未声明变量会提示出错 show(); </script>

变量i虽然是在for循环内定义的，但for循环块外部仍然可以引用，i的作用域是整个函数show。如果在show函数外部引用i变量，会出现JavaScript报错。

5.没有使用var声明的变量属于全局变量

<script language="javascript" type="text/javascript"> var n=1; function show(){    m=9;   //声明变量m    var s=6; } show();   //不可少，alert之前需要先执行m=9，否则m未声明 alert(m);   //显示9 alert(window.m);   //显示9 alert(s);   //报错"s is not defined" </script>

函数show执行的过程中，引用了变量m，但未使用var声明，m就变成了全局变量。

二、JavaScript匿名函数 所谓匿名函数就是没有命名的函数，看起来有点难以理解，其实很常见，下面举一个小例子。

window.onload=function(){ alert("加载完毕！");}

这样就创建了一个匿名函数，这个function没有函数名，但可以被调用和执行，当网页加载完毕时，会执行alert()。

<script language="javascript" type="text/javascript"> (function(x,y){alert(x+y)})(2,3);   //显示结果为5 </script>

上面的方法仍然是创建了一个匿名函数，并使用()优先表达式强制执行函数。

三、JavaScript闭包(closure) 闭包其实就是利用了函数作用域和匿名函数的知识，当函数A执行结束时，一部分变量变量被B引用，被引用的变量不能释放，形成了所谓的闭包。这里有篇很好的文章，可以参考一下。 下面看一个小例子：

<script language="javascript" type="text/javascript"> function show(){      var n=3;      setTimeout(function(){alert("first:"+n);},3000); //3秒后显示first:3      alert("second:"+n); //显示second:3 } show(); function show2(){alert("第一个函数执行结束");} show2(); </script>

运行上面的函数后，首先alert显示"second:3"，然后显示"第一个函数执行结束"，3秒后显示“first:3”。 仔细看一下，函数show执行结束的时候，变量n应该被释放了，内存里也就不存在了，怎么过了3秒还能显示出"first:3"呢？闭包恰恰就在此产生了，当函数show执行结束的时候，想要释放内存里的n，但发现变量n还在被一个匿名函数引用，要在3秒后调用，根据JavaScript闭包原理，内存里的n被保留了下来，于是在三秒以后仍然可以调用n。 下面看几种写法的区别：

function show2(content){    alert(content);   //3秒后alert显示"test" } function show(content,delay_time){      setTimeout("show2('"+content+"')",delay_time); } show("test",3000);

仔细看一下上面这种写法不是闭包，只是普通的函数调用而已。

function show(content,delay_time){      setTimeout(function(){alert(content)},delay_time); //3秒后alert显示"test" } show("test",3000);

这种写法就是闭包，虽然结果是一样的，但原理不一样。 function show(content){      function show2(){alert(content);}      return show2; } var newshow=show("test"); setTimeout(newshow,3000);   //3秒后alert显示"test"

上面这种写法也是闭包，虽然结果都是一样的，但原理却不一样。这里面看到了函数也可以当作对象也传递，函数show执行后return show2，把函数show2赋值给newshow，然后3秒后，调用newshow对象，执行函数show2。 仔细比较上面3种写法，如果能悟出一些道理就好，闭包有些时候的确难理解。 稍复杂一点的例子：

<script language="javascript" type="text/javascript"> var show=null; (function(){    var n=1;    var show2=function(){        alert(n++);    }    show=show2; })(); show();   //显示1 show();   //显示2 show();   //显示3 </script>

上面代码中，又一次用了函数作为对象传递，n是匿名函数里的局部变量，外部是访问不到的。show是一个全局变量，应该访问不了变量n，但在函数show执行前，首先把函数匿名函数内部show2赋值给show，当后面函数show运行的时候，会调用show2的代码，而show2是可以访问n的，故结果显示为1、2、3。 另外一点值得注意的，也是很经典的一个例子。 CSS代码：

ul{ width:600px; margin:0px auto;} ul li{ margin:1px 0px; background-color:#999999;} HTML代码： <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li> </ul>

JavaScript代码：

<script language="javascript" type="text/javascript"> var li=document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){    li[i].onclick=function(){alert(i);} } </script>

运行后，不论点击哪一个li，都是alert提示“4”。这就是一个需要注意的地方：闭包允许内层函数引用父函数中的变量，但是该变量是最终值。闭包引用的变量i，是循环结束后的值，其实这是一个很常见的问题，解决方法也有很多。 比较常见的就是给li[i]添加属性值，比如li[i].n=i；还有就是用闭包方法解决，这个函数本身就是闭包，所谓用闭包来解决闭包的问题。代码如下：

Put this in the top of your page you are calling from, in the

$.getJSON("http://www.yourotherdomain.com/testcross.php?jsoncallback=?",     function(data){       $('body').html(data.name).css("color","green");       });

and the php that would return stuff:

the path must be relative and in the same domain

fix one:     obj.getAttributeNode('class').nodeValue == "hideDiv"     or

               obj.getAttributeNode('class').value == "hideDiv"