前端设计师们最常用的JS代码汇总

逛社区时看到的文章，我修改调整了内容，如果大家觉得也有帮助 可以收藏下~

HTML5 DOM 选择器

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

阻止默认行为

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

阻止冒泡

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

鼠标滚轮事件

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

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

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

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

验证码倒计时代码