jQuery技巧集锦

1 使用has()方法，保留具有特定特征的元素：

$("input").has(".email").addClass("email_icon");

 

2 识别IE浏览器

if ($.browser.msie) {
   // for Internet Explorer
}

 

3 获取某个元素的位置索引

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

 

4 找到选中的option元素

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

 

5 滚动到页面某个区域

jQuery.fn.autoscroll = function(selector) {
    $('html,body').animate(
        {scrollTop: $(selector).offset().top},
        500
    };
}
//然后像这样来滚动到你希望去到的class/area上。
$('.area_name').autoscroll();

 

6 字符串替换

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

 

7 禁用右键菜单

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

 

8 判断元素是否存在

if ($('#someDiv').length) {
  //存在时的操作
}

 

9 判断鼠标左右键

$("#someelement").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        alert("Left Mouse Button Clicked");
    } else if(e.button == 2) {
        alert("Right Mouse Button Clicked");
    }
});

 

10 显示或删除input域中的默认值

wap_val = [];
$(".swap").each(function(i){
    wap_val[i] = $(this).val();
    $(this).focusin(function(){
        if ($(this).val() == swap_val[i]) {
            $(this).val("");
        }
    }).focusout(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(swap_val[i]);
        }
    });
});

<input type="text" value="Enter Username here.." class="swap" />

 

11 限制text/textarea域中的字符个数

jQuery.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"){
            //Apply the standard maxLength
            this.maxLength = max;
        }
        else if(type == "textarea"){
            this.onkeypress = function(e){
                var ob = e || event;
                var keyCode = ob.keyCode;
                var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
                return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
            };
            this.onkeyup = function(){
                if(this.value.length > max){
                    this.value = this.value.substring(0,max);
                }
            };
        }
    });
};
//用法
$('#mytextarea').maxLength(500);

 

12 判断元素是否可见

if($(element).is(':visible') == 'true') {
    //该元素是可见的
}

 

13 将元素置于屏幕中心位置

jQuery.fn.center = function () {
    this.css('position','absolute');
    this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
    this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
    return this;
}
//这样来使用上面的函数：
$(element).center();

 

14 从元素中除去html

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html( $(this).html().replace(regexp,”") );
        });
        return $(this);
    }
})(jQuery);
//用法：
$('p').stripHtml();

 

15 判断数据类型

$.type(obj);