一、预加载图像
如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。
二、检查图像是否加载
有时为了继续脚本，你可能需要检查图像是否全部加载完毕。
你也可以使用 ID 或 CLASS 替换 <img>标签来检查某个特定的图像是否被加载。
三、自动修复破坏的图像
逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你。
四、悬停切换
当用户鼠标悬停在可点击的元素上时，可添加类到元素中，反之则移除类。
只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。
五、淡入淡出/显示隐藏
六、鼠标滚轮
代码语言：javascript复制$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
(event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));
if (delta > 0) {
console.log('mousewheel top');
} else if (delta < 0) {
console.log('mousewheel bottom');
}
});七、鼠标坐标
1、JavaScript实现
代码语言：javascript复制X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;2、jQuery实现
代码语言：javascript复制$('#ele').click(function(event){
//获取鼠标在图片上的坐标
console.log('X：' event.offsetX 'n Y:' event.offsetY);
//获取元素相对于页面的坐标
console.log('X：' $(this).offset().left 'n Y:' $(this).offset().top);
});八、禁止移动端浏览器页面滚动
1、HTML实现
代码语言：javascript复制<body ontouchmove="event.preventDefault()" >2、JavaScript实现
代码语言：javascript复制document.addEventListener('touchmove', function(event) {
event.preventDefault();
});九、阻止默认行为
代码语言：javascript复制// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {
event = event || window.event；
if (event.preventDefault){
// W3C
event.preventDefault();
} else{
// IE
event.returnValue = false;
}
}, false);
// jQuery
$('#btn').on('click', function (event) {
event.preventDefault();
});十、阻止冒泡
代码语言：javascript复制// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {
event = event || window.event；
if (event.stopPropagation){
// W3C
event.stopPropagation();
} else{
// IE
event.cancelBubble = true;
}
}, false);
// jQuery
$('#btn').on('click', function (event) {
event.stopPropagation();
});十一、检测浏览器是否支持svg
代码语言：javascript复制function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg';
return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
console.log(isSupportSVG());十二、检测浏览器是否支持canvas
代码语言：javascript复制function isSupportCanvas() {
if(document.createElement('canvas').getContext){
return true;
}else{
return false;
}
}
console.log(isSupportCanvas());十三、检测是否是微信浏览器
代码语言：javascript复制function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
alert(isWeiXinClient());十四、检测是否移动端及浏览器内核
代码语言：javascript复制var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
ios: !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移动端');
}十五、检测是否电脑端/移动端
代码语言：javascript复制var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
var sUserAgent = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
isChrome: u.indexOf("chrome") > -1,
isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
iWinPhone: u.indexOf('Windows Phone') > -1
};
}()
}
if(browser.versions.mobile || browser.versions.iWinPhone){
window.location = "http:/www.baidu.com/m/";
} 十六、检测浏览器内核
代码语言：javascript复制function getInternet(){
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safan浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko浏览器
}
} 十七、强制移动端页面横屏显示
代码语言：javascript复制$( window ).on( "orientationchange", function( event ) {
if (event.orientation=='portrait') {
$('body').css('transform', 'rotate(90deg)');
} else {
$('body').css('transform', 'rotate(0deg)');
}
});
$( window ).orientationchange();十八、电脑端页面全屏显示
代码语言：javascript复制function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
fullscreen(document.documentElement);十九、获得/失去焦点
1、JavaScript实现
代码语言：javascript复制<input id="i_input" type="text" value='会员卡号/手机号'/>// JavaScript
window.onload = function(){
var oIpt = document.getElementById("i_input");
if(oIpt.value == "会员卡号/手机号"){
oIpt.style.color = "#888";
}else{
oIpt.style.color = "#000";
};
oIpt.onfocus = function(){
if(this.value == "会员卡号/手机号"){
this.value="";
this.style.color = "#000";
this.type = "password";
}else{
this.style.color = "#000";
}
};
oIpt.onblur = function(){
if(this.value == ""){
this.value="会员卡号/手机号";
this.style.color = "#888";
this.type = "text";
}
};
}2、jQuery实现
代码语言：javascript复制<input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/>
<input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>// jQuery
$("#showPwd").focus(function() {
var text_value=$(this).val();
if (text_value =='请输入您的注册密码') {
$("#showPwd").hide();
$("#password").show().focus();
}
});
$("#password").blur(function() {
var text_value = $(this).val();
if (text_value == "") {
$("#showPwd").show();
$("#password").hide();
}
}); 二十、获取上传文件大小
代码语言：javascript复制<input type="file" id="filePath" onchange="getFileSize(this)"/>// 兼容IE9低版本
function getFileSize(obj){
var filesize;
if(obj.files){
filesize = obj.files[0].size;
}else{
try{
var path,fso;
path = document.getElementById('filePath').value;
fso = new ActiveXObject("Scripting.FileSystemObject");
filesize = fso.GetFile(path).size;
}
catch(e){
// 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
console.log(e.message); // Automation 服务器不能创建对象
filesize = 'error'; // 无法获取
}
}
return filesize;
}二十一、限制上传文件类型
1、高版本浏览器
代码语言：javascript复制<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">2、限制图片
代码语言：javascript复制<input type="file" class="file" value="上传" accept="image/*"/>3、低版本浏览器
代码语言：javascript复制<input type="file" id="filePath" onchange="limitTypes()"/>/* 通过扩展名，检验文件格式。
* @parma filePath{string} 文件路径
* @parma acceptFormat{Array} 允许的文件类型
* @result 返回值{Boolen}：true or false
*/
function checkFormat(filePath,acceptFormat){
var resultBool= false,
ex = filePath.substring(filePath.lastIndexOf('.') 1);
ex = ex.toLowerCase();
for(var i = 0; i < acceptFormat.length; i ){
if(acceptFormat[i] == ex){
resultBool = true;
break;
}
}
return resultBool;
};
function limitTypes(){
var obj = document.getElementById('filePath');
var path = obj.value;
var result = checkFormat(path,['bmp','jpg','jpeg','png']);
if(!result){
alert('上传类型错误，请重新上传');
obj.value = '';
}
}二十二、正则表达式
代码语言：javascript复制//验证邮箱
/^w @([0-9a-zA-Z] [.]) [a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]d{9}$/
//验证URL
/^http://. ./
//验证身份证号码
/(^d{15}$)|(^d{17}([0-9]|X|x)$)/
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[u4e00-u9fa5])*$/
//匹配中文字符
/[u4e00-u9fa5]/
//匹配双字节字符(包括汉字)
/[^x00-xff]/二十三、限制字符数
代码语言：javascript复制<input id="txt" type="text">//字符串截取
function getByteVal(val, max) {
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i ) { if (val[i].match(/[^x00-xff]/ig) != null) byteValLen = 2; else byteValLen = 1; if (byteValLen > max) break;
returnValue = val[i];
}
return returnValue;
}
$('#txt').on('keyup', function () {
var val = this.value;
if (val.replace(/[^x00-xff]/g, "**").length > 14) {
this.value = getByteVal(val, 14);
}
});二十四、验证码倒计时
代码语言：javascript复制<input id="send" type="button" value="发送验证码">// JavaScript
var times = 60, // 时间设置60秒
timer = null;
document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times--;
if (times <= 0) {
send.value = '发送验证码';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times '秒后重试';
send.disabled = true;
}
}, 1000);
}var times = 60,
timer = null;
$('#send').on('click', function () {
var $this = $(this);
// 计时开始
timer = setInterval(function () {
times--;
if (times <= 0) {
$this.val('发送验证码');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times '秒后重试');
$this.attr('disabled', true);
}
}, 1000);
});二十五、时间倒计时
代码语言：javascript复制<p id="_lefttime"></p>function countdown() {
var endtime = new Date("May 2, 2018 21:31:09");
var nowtime = new Date();
if (nowtime >= endtime) {
document.getElementById("_lefttime").innerHTML = "倒计时间结束";
return;
}
var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
if (leftsecond < 0) {
leftsecond = 0;
}
__d = parseInt(leftsecond / 3600 / 24);
__h = parseInt((leftsecond / 3600) % 24);
__m = parseInt((leftsecond / 60) % 60);
__s = parseInt(leftsecond % 60);
document.getElementById("_lefttime").innerHTML = __d "天" __h "小时" __m "分" __s "秒";
}
countdown();
setInterval(countdown, 1000);二十六、倒计时跳转
代码语言：javascript复制<div id="showtimes"></div>// 设置倒计时秒数
var t = 10;
// 显示倒计时秒数
function showTime(){
t -= 1;
document.getElementById('showtimes').innerHTML= t;
if(t==0){
location.href='error404.asp';
}
//每秒执行一次 showTime()
setTimeout("showTime()",1000);
}
showTime();二十七、时间戳、毫秒格式化
代码语言：javascript复制function formatDate(now) {
var y = now.getFullYear();
var m = now.getMonth() 1; // 注意 JavaScript 月份 1
var d = now.getDate();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
return y "-" m "-" d " " h ":" m ":" s;
}
var nowDate = new Date(1442978789184);
alert(formatDate(nowDate));二十八、当前日期
代码语言：javascript复制var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear() "年" (date.getMonth() 1) "月"
date.getDate() "日 星期" weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
});二十九、判断周六/周日
代码语言：javascript复制<p id="text"></p>function time(y,m){
var tempTime = new Date(y,m,0);
var time = new Date();
var saturday = new Array();
var sunday = new Array();
for(var i=1;i<=tempTime.getDate();i ){
time.setFullYear(y,m-1,i);
var day = time.getDay();
if(day == 6){
saturday.push(i);
}else if(day == 0){
sunday.push(i);
}
}
var text = y "年" m "月份" "<br />"
"周六：" saturday.toString() "<br />"
"周日：" sunday.toString();
document.getElementById("text").innerHTML = text;
}
time(2018,5);三十、AJAX调用错误处理
当 Ajax 调用返回 404 或 500 错误时，就执行错误处理程序。如果没有定义处理程序，其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序
三十一、链式插件调用
jQuery 允许“链式”插件的方法调用，以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。
通过使用链式，可以改善
还有一种方法是在（前缀$）变量中高速缓存元素
链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。
本文在GitHub的地址 Common-code
阅读更多
参考文章 『总结』web前端开发常用代码整理
