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.." />

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);