《锋利的jQuery》十二、jQuery的技巧

---

title: 《锋利的jQuery》十二、jQuery的技巧
date: 2017-08-18 21:05:20
tags: 锋利的jQuery

---

禁用页面的右键菜单

$(function(){
    $(document).on('contextmenu',function(){
        return false;
    })
})

返回头部动画

$.fn.scrollTo = function(speed,elem){
    var targetOffset = $(this).offset().top;
    elme.stop().animate({
        scrollTop: targetOffset,
    },speed);
    return this;
}

$('.goto').click(function(){
    $('body').scrollTo(500,$('html body'));
    return false;
})

模拟输入框的placeholder

$(function(){
    $('input.text1').val('输入搜索内容');
    textFill($('input.text1'));

    function textFill(input){
        var originalvalue = input.val();
        input.focus(function(){
            if($.trim(input.val()) == originalvalue){
                input.val('');
            }
        }).blur(function(){
            if($.trim(input.val()) == ''){
                input.val(originalvalue);
            }
        })
    }
})

获取鼠标位置

$(function(){
    $(document).mousemove(function(e){
        $('#xy').html('x: ' + e.pageX + '| y: ' + e.pageY);
    })
})

判断元素是否存在

$(function(){
    if($('#id').length){
        // do something
    }
})

点击div也可以跳转

<div><a href="index.html">index</a></div>

$('div').click(function(){
    window.location = $(this).find('a').prop('href');
    return false;
})

根据浏览器大小添加不同样式

$(function(){
    function checkWindowSize(){
        if($(window).width() > 1200){
            $('body').addClass('large');
        }else{
            $('body').removeClass('large');
        }
    }

    $(window).resize(checkWindowSize)
})

设置div在屏幕中央

$.fn.center = function(){
    this.css('position','absolute');
    this.css('top',($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px' );
    this.css('left',($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px' );
}

关闭所有动画效果

$(function(){
    $.fx.off = true;

})

检测鼠标左键和右键

$('#xy').mousedown(function(e){
    alert(e.which)   // 1是鼠标左键 2是鼠标中键 3是鼠标右键
})

设置全局Ajax参数

$('#load').ajaxStart(function(){
    showLoading();    // 显示 loading
    disableButtons();    // 禁用按钮
});

$('#load').ajaxComplete(function(){
    hideLoading();    // 隐藏loading
    enableButtons();   // 启用按钮
})

获取选中的下拉框

$('#someElement').find('option:selected');
$('#someElement option:selected');

$.proxy()的使用

<div id="panel" style="display:none;">
    <button>Close</button>
</div>

$('#panel').fadeIn(function(){
    $('#panel button').click(function(){
        $(this).fadeOut();
        console.log(this);
    })
})

以上代码中因为 this 指向了 button 所以会隐藏 button 元素，而不是 #panle 元素。

$('#panel').fadeIn(function(){
    $('#panel button').click($.proxy(function(){
        $(this).fadeOut();
        console.log(this);
    },this));
})

这样利用 $.proxy() 方法可以将this改变为 #panel 。

限制输入框的字数

$.fn.maxLength = function(max){
    this.each(function(){
        var type = this.tagName.toLowerCase();
        var inputType = this.type ? this.type.toLowerCase() : null;
        if(type == 'input' && inputType == 'text' || inputType == 'password'){
            // 标准的maxLength
            this.maxLength = max;
        }else if(type == 'textarea'){
            this.onkeyup = function(e){
                console.log(this.value.length);
                if(this.value.length > max){
                    console.log(11);
                    this.value = this.value.substring(0,max);
                }
            }
        }
    })
}

删除元素内部的html标签，只留下文本内容

$.fn.stripHTML = function(){
    var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
    this.each(function(){
        $(this).html($(this).html().replace(regexp,''));
    })
    return $(this);
}