这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家整理汇总了一些做前端经常需要用的到 JavaScript 代码片段,非常的全面,有需要的小伙伴可以参考下
逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~
html5 DOM 选择器
- // querySelector() 返回匹配到的第一个元素
- var item = document.querySelector('.item');
- console.log(item);
- // querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合
- var items = document.querySelectorAll('.item');
- console.log(items[0]);
阻止默认行为
- // 原生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();
- });
阻止冒泡
- // 原生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();
- });
鼠标滚轮事件
- $('#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);
- });
验证码倒计时代码
- <!-- 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);
- });
常用的一些正则表达式
- //匹配字母、数字、中文字符
- / ^([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 时间戳、毫秒格式化
- 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 个字符)
- <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('移动端');
- }
之前我用过一个检测客户端的库 觉得挺好用的,也推荐给大家 叫 device.js,大家可以 Googel 或 百度 GItHub 仓库地址:https://github.com/matthewhudson/device.js
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.phperz.com/article/17/0522/331590.html