当前位置: 首页 > news >正文

【持续更新】jQuery 实用技巧

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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


转载于:https://my.oschina.net/wallenheng/blog/185565

相关文章:

  • 学JS的心路历程-函式(五)箭头函式
  • 【转】Ruby入门教程(一)
  • 进程【TLCL】
  • 深入数据库索引背后算法及数据结构
  • 基于游标的分页接口实现
  • Docker1---安装
  • 如何利用极致业务基础平台构建一个通用企业ERP之十二收款单设计
  • 如何给esxi打补丁
  • OpenCart之信息中心(Information)模块教程
  • KbmMW 4.40.00 正式版发布
  • keepalived实现lvs高可用并负载均衡lamp
  • java调试技巧
  • 浅析微信支付:支付验收示例和验收指引
  • 网络中IP地址划分
  • 链表六:二叉搜索树与双向链表
  • 【Leetcode】104. 二叉树的最大深度
  • Date型的使用
  • Debian下无root权限使用Python访问Oracle
  • Docker容器管理
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • HTTP 简介
  • input的行数自动增减
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • JS字符串转数字方法总结
  • Linux CTF 逆向入门
  • python 装饰器(一)
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • Vue全家桶实现一个Web App
  • vue数据传递--我有特殊的实现技巧
  • win10下安装mysql5.7
  • 多线程 start 和 run 方法到底有什么区别?
  • - 概述 - 《设计模式(极简c++版)》
  • 理解在java “”i=i++;”所发生的事情
  • 扑朔迷离的属性和特性【彻底弄清】
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 延迟脚本的方式
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • 正则表达式小结
  • Spring第一个helloWorld
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • !!Dom4j 学习笔记
  • ![CDATA[ ]] 是什么东东
  • # centos7下FFmpeg环境部署记录
  • ###STL(标准模板库)
  • (1)(1.9) MSP (version 4.2)
  • (2015)JS ES6 必知的十个 特性
  • (3)选择元素——(17)练习(Exercises)
  • (C++)八皇后问题
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (五)IO流之ByteArrayInput/OutputStream
  • .L0CK3D来袭:如何保护您的数据免受致命攻击
  • .NET Framework杂记
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题
  • .Net组件程序设计之线程、并发管理(一)