JavaScript收藏系列之一

最新推荐文章于 2025-12-12 14:24:05 发布

翻译最新推荐文章于 2025-12-12 14:24:05 发布 · 616 阅读

文章标签：

#javascript #function

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了前端开发中的实用技巧，包括列表元素的鼠标交互效果实现、面板的点击关闭功能、jQuery事件处理的区别、文档中指定位置内容输出方法、全局变量的作用范围解析及优化页面资源加载策略。

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精灵的方法，将众多小图片合成为一个大图片。归纳起来都是两个字：合成。

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