前端js干货

来源：互联网发布：mib browser for mac 编辑：程序博客网时间：2024/05/19 05:38

前端最常用JS

Jean05月05日

1. HTML5 DOM 选择器

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

2. 阻止默认行为

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

3. 阻止冒泡

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

4. 鼠标滚轮事件

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

5. 检测浏览器是否支持svg

function isSupportSVG() {     var SVG_NS = 'http://www.w3.org/2000/svg';    return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; } // 测试console.log(isSupportSVG());

6. 检测浏览器是否支持canvas

function isSupportCanvas() {    if(document.createElement('canvas').getContext){        return true;    }else{        return false;    }}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());

7. 检测是否是微信浏览器

function isWeiXinClient() {    var ua = navigator.userAgent.toLowerCase();     if (ua.match(/MicroMessenger/i)=="micromessenger") {         return true;     } else {         return false;     }}// 测试alert(isWeiXinClient());

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

9. 验证码倒计时代码

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

10. 常用的一些正则表达式

//匹配字母、数字、中文字符 /^([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]/

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

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

13. 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

14. 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

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

0 0