常用代码片段中整理

//1. 检查图像是否加载完毕

$('img').load(function () {

console.log('image load successful ');

});

//2. 悬停切换

$(seletor).hover(function () {

$(this).addClass('hover');

}, function () {

$(this).removeClass('hover');

});

//或者使用toggleClass() 方法

$(selector).hover(function () {

$(this).toggleClass('hover');

})

//3. 鼠标滚轮

$('#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');

}

});

//4. 获取鼠标坐标

//1、 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;

// 5. 获取鼠标在元素区域内的坐标、 获取元素相对于页面的坐标

$('#ele').click(function (event) {

//获取鼠标在图片上的坐标

console.log('X：' + event.offsetX + '\n Y:' + event.offsetY);

//获取元素相对于页面的坐标

console.log('X：' + $(this).offset().left + '\n Y:' + $(this).offset().top);

});

//6. 禁止移动端浏览器页面滚动

a.HTML实现

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

b.JavaScript实现

document.addEventListener('touchmove', function (event) {

event.preventDefault();

});

//7. 阻止默认行为

// 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();

});

//8. 阻止冒泡

// 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();

});

//9. 检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = 'http://www.w3.org/2000/svg';

return !!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect;

}

console.log(isSupportSVG());

//10. 检测浏览器是否支持canvas

function isSupportCanvas() {

if (document.createElement('canvas').getContext) {

return true;

} else {

return false;

}

}

console.log(isSupportCanvas());

//11. 检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i) == "micromessenger") {

return true;

} else {

return false;

}

}

alert(isWeiXinClient());

//12. 检测是否移动端及浏览器内核

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 OSX/), //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('移动端');

}

//13. 检测是否电脑端 / 移动端

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/";

}

//14. 检测浏览器内核

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浏览器

}

}

//15. 强制移动端页面横屏显示

$(window).on("orientationchange", function (event) {

if (event.orientation == 'portrait') {

$('body').css('transform', 'rotate(90deg)');

} else {

$('body').css('transform', 'rotate(0deg)');

}

});

$(window).orientationchange();

//16. 电脑端页面全屏显示

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

//17. 获得 / 失去焦点

<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";

}

};

}

jQuery实现

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

}

});

18. 限制字符数

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

}

});

19. 验证码倒计时

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

}

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

});

//20. 时间倒计时

<p id = "_lefttime" > < /p>

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

});

//21. 倒计时跳转

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

//22. 时间戳、 毫秒格式化

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

//23. 当前日期

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

//24. 判断周六 / 周日

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

//25. AJAX调用错误处理

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

$(document).ajaxError(function (e, xhr, settings, error) {

console.log(error);

})