前端开发常用片段
一、预加载图像
如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。
$.preloadImages = function () {for (var i = 0; i < argument.length; i ++) {$('').attr('src', argument[i]);}
};
$.preloadImages('img/a.png', 'img/b.png');
二、检查图像是否加载
有时为了继续脚本，你可能需要检查图像是否全部加载完毕。
$('img').load(function () {console.log('image load succeed');
});
//你也可以使用 ID 或 CLASS 替换![]()
标签来检查某个特定的图像是否被加载。
三、自动修复破坏的图像
逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你。
$('img').on('error', function () {if(!$(this).hasClass('broken-image')){$(this).prop('src', 'img/a.png').addClass('broken-image');}
});
四、悬停切换
当用户鼠标悬停在可点击的元素上时，可添加类到元素中，反之则移除类。
$(selector).hover(function () {$(this).addClass('hover');
}),function () {$(this).removeClass('hover');
};
//或
$(selector).hover(function () {$(this).toggleClass('hover');
});
五、淡入淡出/显示隐藏
$('.btn').click(function () {$('.element').fadeToggle('slow');
});
$('.btn').click(function () {$('.element').slideToggle('slow');
});
六、鼠标滚轮
$('#content').on("mousewheel DOMMouseScroll", function (event) {// chrome & ie || // firefoxvar 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实现
X: Y:
2、jQuery实现
$('#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实现
2、JavaScript实现
document.addEventListener('touchmove', function(event) {event.preventDefault();
});九、阻止默认行为
// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.preventDefault){// W3Cevent.preventDefault();} else{// IEevent.returnValue = false;}
}, false);// jQuery
$('#btn').on('click', function (event) {event.preventDefault();
});
十、阻止冒泡
// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.stopPropagation){// W3Cevent.stopPropagation();} else{// IEevent.cancelBubble = true;}
}, false);// jQuery
$('#btn').on('click', function (event) {event.stopPropagation();
});
十一、检测浏览器是否支持svg
function isSupportSVG() {var SVG_NS = 'http://www.w3.org/2000/svg';return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}console.log(isSupportSVG());
十二、检测浏览器是否支持canvas
function isSupportCanvas() {if(document.createElement('canvas').getContext){return true;}else{return false;}
}console.log(isSupportCanvas());十三、检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)==“micromessenger”) {
return true;
} else {
return false;
}
}
alert(isWeiXinClient());
十四、检测是否移动端及浏览器内核
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, //火狐内核Geckomobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iosandroid: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //androidiPhone: u.indexOf('iPhone') > -1 , //iPhoneiPad: u.indexOf('iPad') > -1, //iPadwebApp: u.indexOf('Safari') > -1 //Safari};}
}if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {alert('移动端');
}
十五、检测是否电脑端/移动端
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/";
}
十六、检测浏览器
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浏览器 }
}
十七、强制移动端页面横屏显示
$( window ).on( "orientationchange", function( event ) {if (event.orientation=='portrait') {$('body').css('transform', 'rotate(90deg)');} else {$('body').css('transform', 'rotate(0deg)');}
});
$( window ).orientationchange();
十八、电脑端页面全屏显示
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实现
2、jQuery实现
二十、获取上传文件大小
二十一、限制上传文件类型
1、高版本浏览器
2、限制图片
3、低版本浏览器
/* 通过扩展名，检验文件格式。
* @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 = '';}
}
二十二、正则表达式
//验证邮箱
/^\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]/
二十三、限制字符数
二十四、验证码倒计时
1、JavaScript实现
2、jQuery实现
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);
});
二十五、时间倒计时
二十六、倒计时跳转
二十七、时间戳、毫秒格式化
function formatDate(now) {var y = now.getFullYear();var m = now.getMonth() + 1; // 注意 JavaScript 月份+1var 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));
二十八、当前日期
var calculateDate = function(){var date = new Date();var weeks = ["日","一","二","三","四","五","六"];return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 星期"+weeks[date.getDay()];
}$(function(){$("#dateSpan").html(calculateDate());
});
二十九、判断周六/周日
三十、AJAX调用错误处理
当 Ajax 调用返回 404 或 500 错误时，就执行错误处理程序。如果没有定义处理程序，其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序
$(document).ajaxError(function (e, xhr, settings, error) {console.log(error);
});
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！