分享一些前端开发中最常用的JS代码片段

来源：互联网发布：青少年法制网络大赛编辑：程序博客网时间：2024/05/20 18:17

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = document.querySelector('#item');console.log(item);

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

阻止默认行为

一、什么是默认行为
默认行为是指html标签自带的默认行为，比如a标签的默认跳转，button标签的默认提交。

二、为什么要阻止默认行为
比如之前做的一个项目换乘案内只有首页的设计是自己的，剩下的数据接口都是雅虎的，所以很多链接都是雅虎的，而我们又不想点击的时候跳到雅虎的页面，所以就需要对a链接的默认跳转行为做一些阻止。

// 原生jsdocument.getElementById('btn').addEventListener('click', function (e) {    e = event || window.event；    if (e.preventDefault){        // w3c方法 阻止默认行为        e.preventDefault();    } else{        // ie 阻止默认行为        e.returnValue = false;    }}, false);// jQuery$('#btn').on('click', function (e) {    e.preventDefault();    console.log("阻止了跳转")});

阻止冒泡

一、什么是默认行为
事件冒泡是子元素优先触发，父级元素后触发，最后冒泡到document元素
二、为什么要阻止冒泡
有种可能是，某个DOM节点绑定了某事件监听器，本来是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。

http://www.jb51.net/article/32792.htm

http://www.jb51.net/article/34914.htm

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

鼠标滚轮事件

参考：http://www.2cto.com/kf/201505/403119.html

$('#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 获取鼠标在元素上的坐标

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

验证码倒计时代码

<!-- dom --><input id="send" type="button" value="发送验证码">

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

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个字符）

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

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

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

转载地址：http://www.jqhtml.com/7840.html

阅读全文

0 0