前端开发常用片段

一、预加载图像如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。$.preloadImages=function()for(vari=0;i<argument.length;i )$('<imag>').attr('src',argument[i]);}};$.preloadImages('img/a.png','img/b.png');二、检...

一、预加载图像

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

$.preloadImages = function () { for (var i = 0; i < argument.length; i) {  $('<imag>').attr('src', argument[i]); }};$.preloadImages('img/a.png', 'img/b.png');
二、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕。

$('img').load(function () { console.log('image load succeed');});//你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。
三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。

$('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 || // 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实现

<body>X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /></body><script>function mousePosition(ev){ if(ev.pageX || ev.pageY){  return {x:ev.pageX, y:ev.pageY}; } return {  x:ev.clientXdocument.body.scrollLeft - document.body.clientLeft,  y:ev.clientYdocument.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;</script>

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实现

<body ontouchmove="event.preventDefault()" >

2、JavaScript实现

document.addEventListener('touchmove', function(event) { event.preventDefault();});
九、阻止默认行为
// JavaScriptdocument.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();});
十、阻止冒泡
// JavaScriptdocument.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
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实现

<body><input id="i_input" type="text" value="会员卡号/手机号"/></body><script>// JavaScriptwindow.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";  } };}</script>

2、jQuery实现

<body><input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/><input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/></body><script>// 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(); }});</script>
二十、获取上传文件大小
<body><input type="file" id="filePath" onchange="getFileSize(this)"/></body><script>// 兼容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控件与页面交互,点击了否,就无法获取sizeconsole.log(e.message); // Automation 服务器不能创建对象filesize = 'error'; // 无法获取  } } return filesize;}</script>
二十一、限制上传文件类型

1、高版本浏览器

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"/>

2、限制图片

<input type="file" class="file" value="上传" accept="image/*">

3、低版本浏览器

<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 = ''; }}
二十二、正则表达式
//验证邮箱/^\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]/
二十三、限制字符数
<body><input id="txt" type="text"></body><script>//字符串截取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); }});</script>
二十四、验证码倒计时

1、JavaScript实现

<body><input id="send" type="button" value="发送验证码"></body><script>// JavaScriptvar 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);}</script>

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);});
二十五、时间倒计时
<body><p id="_lefttime"></p></body><script>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);});</script>
二十六、倒计时跳转
<body><div id="showtimes"></div><div id="showtimes"></div></body><script>// 设置倒计时秒数  var t = 10;// 显示倒计时秒数  function showTime(){t -= 1;document.getElementById('showtimes').innerHTML= t; if(t==0){ location.href='error404.asp';} //每秒执行一次 showTime()setTimeout("showTime()",1000);  }showTime();</script>
二十七、时间戳、毫秒格式化
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));
二十八、当前日期
var calculateDate = function(){  var date = new Date(); var weeks = ["日","一","二","三","四","五","六"];  return date.getFullYear() "年" (date.getMonth() 1) "月"  date.getDate() "日 星期" weeks[date.getDay()];} $(function(){ $("#dateSpan").html(calculateDate());});
二十九、判断周六/周日
<body><p id="text"></p></body><script>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);</script>
三十、AJAX调用错误处理

当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

$(document).ajaxError(function (e, xhr, settings, error) { console.log(error);});
源文地址:https://www.guoxiongfei.cn/csdn/4671.html
0