jQuery小技巧

1.is() 方法

  var elem = $('#elem');

        elem.is('div') // 检测是否为div 返回true or false
        elem.is('.some'); //检测是否有某个class

2.$.() 方法是有两个参数的

var div = $('<div>',{
            'class':'big',
            'width':20,
            'height':40,
            'css':{
                'border':'1px solid #ccc'
            }
        });

        $('body').append(div);

        $('div','body').html('123');//body指的是上下文，也就是在body里面的div

3. 判断链接是否为外部链接

  $('a').each(function(){
            if(this.hostname != location.hostname){
                console.log('链接为外部');
            }
        })

4. 禁止右键菜单栏显示

  $(document).on("contextmenu",function(e){
                    e.preventDefault();
                });

5.分解url

  var url = 'http://www.baidu.com/index.php?xxx=123#content';

        var a = $('<a>',{href:url});
        console.log('Host name: '+ a.prop('hostname'));
        console.log('Path: '+ a.prop('pathname'));
        console.log('Query: '+ a.prop('search'));
        console.log('Protocol: '+ a.prop('protocol'));
        console.log('Hash: '+ a.prop('hash'));

6.阻止默认事件

<a href="http://www.baidu.com">click me</a>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $('a').click(false);
    </script>

7.创建自定义事件

<a href="javascript:;">jump</a>

    <button>trigger jump</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $('a').on('jump',function(){
            console.log('jump');
        });

        $('button').click(function(){
            $('a').trigger('jump');
        })


    </script>

8.获取下载文件大小

<a href="xxx.html">download</a>

    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $('a').click(function(){
            var link = this;
            $.ajax({
                type : 'HEAD',
                url : link.href,
                complete : function(xhr){
                    $(link).append(' + humanize(xhr.getResponseHeader('Content-Length'))');
                }
            })

        })

        function humanize(size){
            var units = ['bytes','KB','MB','GB','TB','PB'];

            var ord = Math.floor( Math.log(size) / Math.log(1024) );
            ord = Math.min( Math.max(0,ord), units.length-1);

            var s = Math.round((size / Math.pow(1024,ord))*100)/100;
            return s + ' ' + units[ord];
        }


    </script>

9.获取滚动条距离顶部的距离

  $(document).scrollTop();

$('html').scrollTop() 在chrome失效
$('body').scrollTop() 在firefox失效
所以这里还是使用document对象去获取高度比较好
原问题

10.监听hashchange

        $(window).on('hashchange',function(){
            var hashVlaue = window.location.hash.slice(1);
            console.log(hashVlaue); 
        })

        $(function(){//页面刷新，手动触发
            var hashval = location.hash.slice(1);
            if(hashval){
                $(window).trigger('hashchange');
            }
        })