五年干货分享！前端开发中最常用的JS代码片段

很多网友私信我，说学到js就开始卡壳了，甚至初略的看了一下js，就跳过开始学习框架之类的。这里要提醒你，js是前端的重中之重，如果你忽视了，后果不堪设想！
学好，并熟练的运用这门编程语言真的很难吗？本篇文章为大家总结了一些前端开发中最常用的JS代码片段，希望能对大家的学习以及工作上都能有所帮助，有所收获。

HTML5 DOM 选择器
javascript 代码

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

复制代码

阻止默认行为
javascript 代码

// 原生jsdocument.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 代码

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

复制代码

鼠标滚轮事件
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'); }});

复制代码

检测浏览器是否支持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());

复制代码

jQuery 获取鼠标在图片上的坐标
javascript 代码

$('#myImage').click(function(event){ //获取鼠标在图片上的坐标 console.log('X：' + event.offsetX+'\n Y:' + event.offsetY); //获取元素相对于页面的坐标 console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);});

复制代码

验证码倒计时代码
html 代码

[/code]javascript 代码
[code]// 原生js版本var times = 60, // 临时设为60秒 timer = null;document.getElementById('send').onclick = function () { // 计时开始 timer = setInterval(function () { times--; if (times 14) { this.value = getByteVal(val, 14); }});

复制代码

js判断是否移动端及浏览器内核
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('移动端');}

复制代码

getBoundingClientRect() 获取元素位置
javascript 代码

//它返回一个对象，其中包含了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全屏
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);

复制代码

【点击关注公众号不迷路哦！小编都会给大家提供学习编程的方法还有学习资料，每天都会跟大家分享文章！点个好看呗！】