DoraCMS

您现在的位置是:首页>文档内容页

文档详情

JS小技巧集锦(不断更新...)

doramart 2015-07-31 15:28:38 技巧226116
前端开发过程中积累的一些js小技巧,平时并不很注意,但是开发的时候要找半天,特别开个文档做下收录

1、判断浏览器中滚动条是否下拉到最低端:

$(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            alert("滚动到底部啦!");
        }
    });

2、 i++ 和 ++i 的区别


简单的来说,++i 和 i++,在单独使用时,就是 i=i+1。
而 a = ++i,相当于 i=i+1; a = i;
而 a = i++,相当于 a = i; i=i+1; 


3、 对n个对象(例如100个a标签)添加事件,如果用click事件:

$('a').click(function(){
    alert($(this).text())
})

效率相对比较低,它的原理是做了循环然后绑定事件,测试用on更好:

$('a').on('click',function(){
        alert($(this).text())
    })

4、Nodejs 中让非www开始的域名(a.com),跳转到www开始的域名(www.a.com),目的是集中流量

app.get('/*', function (req, res, next) {
    var haswww = req.headers.host.match(/^www\./)
        , url = ['http://www.', req.headers.host, req.url].join('');
    haswww ? next() : res.redirect(301, url);
});

5、关闭弹出窗口并刷新父窗口脚本

window.opener && window.opener.location.reload();


6、兼容方式获取scrolltop

function getScrollTop() {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        return scrollTop;
    }


7、兼容方式设置滚动条位置:

function setScrollTop(scroll_top) {
        document.documentElement.scrollTop = scroll_top;
        window.pageYOffset = scroll_top;
        document.body.scrollTop = scroll_top;
    }

8、 点击按钮返回到页面顶部

//    返回顶部
    $('#gotop').click(function(){
        $('body,html').animate({scrollTop:0},800);
        return false;
    });

//    监听滚动条位置
    $(window).scroll(function(event) {
        if(getScrollTop() > 60){
            $('#cbbfixed').css('bottom' , '10px');
        }else{
            $('#cbbfixed').css('bottom' , '-85px');
        }
    });

});

9、执行String类型的方法名(funName为方法名)

var ex = {callBack:eval("("+funName+")")};
ex.callBack(lilist.index(this));


10、判断浏览器是否支持svg

function hasSVG(){
        var SVG_NS = 'http://www.w3.org/2000/svg';

        return !!document.createElementNS &&
                !!document.createElementNS(SVG_NS, 'svg').createSVGRect;

    }


11、关于 addEventListener

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.addEventListener("click", function () {
    alert("Hello World");
}, false);


文章评论

Cancel the reply
Login Participate In Comments

Review(