脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-分享一些前端开发中最常用的JS代码片段，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素 VAR ITem = document.querySelector('.item'); console.LOG(item); // querySelectorAll() 返回匹配到的所有元素，是一个nodelist集合 var items = document.querySelectorAll('.item'); console.log(items[0]);

阻止默认行为

// 原生js 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(); });

阻止冒泡

// 原生js 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(); });

鼠标滚轮事件

$('#content').on(";mousewheel DOMMouseScroll", function (event) { // chrome &amp; 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'); } });

检测浏览器是否支持svg

function isSupportSVG() { var SVG_NS = 'https://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());

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

验证码倒计时代码

// 原生js版本 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); });

常用的一些正则表达式

//匹配字母、数字、中文字符 /^([A-Za-z0-9]|[/u4e00-/u9fa5])*$/ //验证邮箱 /^/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)$)/ //匹配中文字符的正则表达式 /[/u4e00-/u9fa5]/ //匹配双字节字符(包括汉字在内) /[^/x00-/xff]/

js时间戳、毫秒格式化

function formatDate(now) { var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加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));

js限定字符数（注意：一个汉字算2个字符）

//字符串截取 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); } });

js判断是否移动端及浏览器内核

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('移动端'); }

之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 百度
GItHub仓库地址：https://github.COM/matthewhudson/device.js

getBoundingClientRect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性 var myDiv = document.getElementById('myDiv'); var x = myDiv.getBoundingClientRect().left; var y = myDiv.getBoundingClientRect().top; // 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop

HTML5全屏

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-分享一些前端开发中最常用的JS代码片段全部内容，希望文章能够帮你解决javascript代码实例教程-分享一些前端开发中最常用的JS代码片段所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。