前端开发中最常用的JS代码片段
栏目: JavaScript · 发布时间: 5年前
内容简介:学好,并熟练的运用这门编程语言真的很难吗?本篇文章为大家总结了一些前端开发中最常用的JS代码片段,希望能对大家的学习以及工作上都能有所帮助,有所收获。HTML5 DOM 选择器
学好,并熟练的运用这门编程语言真的很难吗?本篇文章为大家总结了一些前端开发中最常用的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 代码
// 原生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(); });
阻止冒泡
javascript 代码
// 原生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(); });
鼠标滚轮事件
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 代码
<!-- dom --> <input id="send" type="button" value="发送验证码">
javascript 代码
// 原生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); }
javascript 代码
// 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); });
常用的一些正则表达式
javascript 代码
//匹配字母、数字、中文字符 /^([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时间戳、毫秒格式化
javascript 代码
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(2016, 5, 13, 19, 18, 30, 20); console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020 console.log(formatDate(nowDate));
js限定字符数(注意:一个汉字算2个字符)
html 代码
<input id="txt" type="text">
javascript 代码
//字符串截取 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判断是否移动端及浏览器内核
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);
点击: 加入
以上所述就是小编给大家介绍的《前端开发中最常用的JS代码片段》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Data Mining
Bing Liu / Springer / 2011-6-26 / CAD 61.50
Web mining aims to discover useful information and knowledge from Web hyperlinks, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is not purely an ......一起来看看 《Web Data Mining》 这本书的介绍吧!