【持续更新】jQuery 实用技巧

1.禁止右键、文本选择、复制按键

//禁用右键、文本选择功能、复制按键 
$(document).bind("contextmenu",function(){return false;});  
$(document).bind("selectstart",function(){return false;});  
$(document).keydown(function(){return key(arguments[0]);});

2.新窗口打开页面

//例子1: href=”http://”的超链接将会在新窗口打开链接 
$('a[href^="http://"]').attr("target", "_blank");  
 
//例子2: rel="external"的超链接将会在新窗口打开链接  
$("a[rel$='external']").click(function(){  
    this.target = "_blank";  
});

3.判断浏览器类型

// Firefox 2 and above  
	if ($.browser.mozilla && $.browser.version >= "1.8" ){  
		// do something  
	}    
	// Safari  
	if( $.browser.safari ){  
		// do something  
	}    
	// Chrome  
	if( $.browser.chrome){  
		// do something  
	}    
	// Opera  
	if( $.browser.opera){  
		// do something  
	}    
	// IE6 and below  
	if ($.browser.msie && $.browser.version <= 6 ){  
		alert("ie6")
	}    
	// anything above IE6  
	if ($.browser.msie && $.browser.version > 6){  
		alert("ie6以上")
	}

4.输入框文字获取和失去焦点

/*
*input jQuery对象.如:textFill( $('input.text1') );  
*/  
function textFill(input){ //input focus text function  
	var originalvalue = input.val();  
	input.focus( function(){  
		if( $.trim(input.val()) == originalvalue ){
			input.val(''); 
		}  
	}).blur( function(){  
		if( $.trim(input.val()) == '' ){ 
			input.val(originalvalue); 
		}  
	});  
}

5.放回页面顶部

/*
*	返回顶部
*	speed 时间
*	用法:$("#goheader").click(function(){$("body").scrollTo(500);return false;});
*/
jQuery.fn.scrollTo = function(speed) {
	var targetOffset = $(this).offset().top;
	$('html,body').stop().animate({scrollTop: targetOffset}, speed);
	return this;
};

6.获取鼠标位置坐标

$(document).mousemove(function(e){  
		$('#XY').html("X : " + e.pageX + " | Y : " + e.pageY);  
	});

7.设置DIV在屏幕中央

/*
*设置div在屏幕中央
*用法:$("#XY").center(); 
*/
jQuery.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");  
	return this;  
}

8.创建自己的选择器

$.extend($.expr[':'], {  
       moreThen500px: function(a) {  
           return $(a).width() > 500;  
      }  
   });  
  $('.box:moreThen500px').click(function() {  
      alert();  
  });

9.关闭动画

jQuery.fx.off = true;//true:开启;false:关闭


10.检测鼠标左键和右键

$("#XY").mousedown(function(e){
		alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
	})


11.回车键提交表单

$("input").keyup(function(e){
		    if(e.which=="13"){
			   alert("回车提交!")
		    }
})


12.获取下拉框值

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


13.检测元素属性

$("a[href$='pdf']").addClass("pdf");
$("a[href$='zip']").addClass("zip");
$("a[href$='psd']").addClass("psd");


14.在firebug上查看日志

// 在firebug上查看
jQuery.log = jQuery.fn.log = function (msg) {
      if (console){
         console.log("%s: %o", msg, this);
      }
      return this;
};


15.去除html

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


16.限制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"){
			//应用标准的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(10);


17.扩展String对象方法

/*
*扩展String对象方法
*用法:$("input").val().isInteger();
*/
$.extend(String.prototype, {
isPositiveInteger:function(){
	return (new RegExp(/^[1-9]\d*$/).test(this));
},
isInteger:function(){
	return (new RegExp(/^\d+$/).test(this));
},
isNumber: function(value, element) {
	return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
},
trim:function(){
	return this.replace(/(^\s*)|(\s*$)|\r|\n/g, "");
},
trans:function() {
	return this.replace(/&lt;/g, '<').replace(/&gt;/g,'>').replace(/&quot;/g, '"');
},
replaceAll:function(os, ns) {
	return this.replace(new RegExp(os,"gm"),ns);
},
skipChar:function(ch) {
	if (!this || this.length===0) {return '';}
	if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}
	return this;
},
isValidPwd:function() {
	return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this)); 
},
isValidMail:function(){
	return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));
},
isSpaces:function() {
	for(var i=0; i<this.length; i+=1) {
	var ch = this.charAt(i);
	if (ch!=' '&& ch!="\n" && ch!="\t" && ch!="\r") {return false;}
	}
	return true;
},
isPhone:function() {
	return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));
},
isUrl:function(){
	return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this));
},
isExternalUrl:function(){
	return this.isUrl() && this.indexOf("://"+document.domain) == -1;
}
});


你可能感兴趣的:(jquery,技巧)