JavaScript收藏系列之一

1、列表的鼠标移入和移出事件

<ul id="ulLIST"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>    var lis = document.getElementById('ulLIST').getElementsByTagName('li');    for (var i = 0, j = lis.length; i < j; i++) {        lis[i].onmouseover = function () { this.style.backgroundColor = 'blue'; }        lis[i].onmouseout = function () { this.style.backgroundColor = 'transparent'; }    }</script>

2、在面板外点击鼠标，关闭面板方法

<script>    //jquery实现    $(window).click(function(e){        e = window.event || e;        var tag = e.srcElement || e.target;        if(tag.id != 'testdiv'){            $("#testdiv").hide();        }    })    //js实现    function handle(e){        e=window.event||e;        var tag=e.srcElement||e.target;        if(tag.id!='testdiv'){            document.getElementById("testdiv").style.display='none';        }    }    window.onload=function(){        window.onclick=handle;    }</script>

3、jQuery的mouseenter和mouseover事件的区别

(1)mouseenter事件将只在进入的第一次生效；

(2)mouseover事件将触发鼠标所在的区域移动的事件即每移动一次就触发一次事件。

4、在文档的指定位置输出内容

            function writeAt(str,x,y)//str:要显示的内容；x:x坐标；y：y坐标            {                var adiv=document.createElement("div");                adiv.style.position = "absolute";                //要加px，否则达不到效果                adiv.style.left = x + "px";                adiv.style.top = y +　"px";                adiv.innerHTML=str;                //要加body否则会报错的                document.body.appendChild(adiv);                return adiv;            }            writeAt("测试",100,100);//在100，100处显示"测试"

5、关于全局变量的解释

if (true) {    var a = 1;}alert(a);

输出的是：1

解释：JavaScript变量没有块范围，只要在方法中定义，无论是在switch块中还是if块中，他们的作用范围都是整个函数。

而除此之外，就是全局变量了。if,for 都没有独立作用域。

           window.onload = function(){                var a = 10;                if(true){                    var a = 9;                }                alert(a);            }

输出的是：9

6、解决页面访问量大的资源下载问题

当访问用户量巨大时候可以把外部CSS写到页面内部或者是将几个外部CSS合成到一个CSS中。

JS也是能集成的集成，能内置的内置。

而图片，则使用CSS精灵的方法，将众多小图片合成为一个大图片。归纳起来都是两个字：合成。

通过这个方法，就可以减少资源读取请求连接数，消除此类现象。