《锋利的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);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值