1、阻止預設行為 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = event || window.event; if (event.preventDefault){ ...
1 1、阻止預設行為 2 // 原生js 3 4 document.getElementById('btn').addEventListener('click', function (event) { 5 6 event = event || window.event; 7 8 if (event.preventDefault){ 9 10 // w3c方法 阻止預設行為 11 12 event.preventDefault(); 13 14 } else{ 15 16 // ie 阻止預設行為 17 18 event.returnValue = false; 19 20 } 21 22 }, false); 23 24 25 26 // jQuery 27 28 $('#btn').on('click', function (event) { 29 30 event.preventDefault(); 31 32 });
1 2、阻止冒泡 2 // 原生js 3 4 document.getElementById('btn').addEventListener('click', function (event) { 5 6 event = event || window.event; 7 8 if (event.stopPropagation){ 9 10 // w3c方法 阻止冒泡 11 12 event.stopPropagation(); 13 14 } else{ 15 16 // ie 阻止冒泡 17 18 event.cancelBubble = true; 19 20 } 21 22 }, false); 23 24 25 26 // jQuery 27 28 $('#btn').on('click', function (event) { 29 30 event.stopPropagation(); 31 32 });
1 3、滑鼠滾輪事件 2 $('#content').on("mousewheel DOMMouseScroll", function (event) { 3 4 // chrome & ie || // firefox 5 6 var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); 7 8 if (delta > 0) { 9 10 // 向上滾動 11 12 console.log('mousewheel top'); 13 14 } else if (delta < 0) { 15 16 // 向下滾動 17 18 console.log('mousewheel bottom'); 19 20 } 21 22 });
1 4、檢測瀏覽器是否支持svg 2 function isSupportSVG() { 3 4 var SVG_NS = 'http://www.w3.org/2000/svg'; 5 6 return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; 7 8 } 9 10 // 測試 11 12 console.log(isSupportSVG());
1 5、檢測瀏覽器是否支持canvas 2 function isSupportCanvas() { 3 4 if(document.createElement('canvas').getContext){ 5 6 return true; 7 8 }else{ 9 10 return false; 11 12 } 13 14 } 15 16 // 測試,打開谷歌瀏覽器控制台查看結果 17 18 console.log(isSupportCanvas());
1 6、檢測是否是微信瀏覽器 2 function isWeiXinClient() { 3 4 var ua = navigator.userAgent.toLowerCase(); 5 6 if (ua.match(/MicroMessenger/i)=="micromessenger") { 7 8 return true; 9 10 } else { 11 12 return false; 13 14 } 15 16 } 17 18 // 測試 19 20 alert(isWeiXinClient());
1 7、jQuery 獲取滑鼠在圖片上的坐標 2 $('#myImage').click(function(event){ 3 4 //獲取滑鼠在圖片上的坐標 5 6 console.log('X:' + event.offsetX+'\n Y:' + event.offsetY); 7 8 //獲取元素相對於頁面的坐標 9 10 console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top); 11 12 });
1 8、驗證碼倒計時代碼 2 html 3 4 <input id="send" type="button" value="發送驗證碼"> 5 6 7 js 8 9 // 原生js版本 10 11 var times = 60, // 臨時設為60秒 12 13 timer = null; 14 15 document.getElementById('send').onclick = function () { 16 17 // 計時開始 18 19 timer = setInterval(function () { 20 21 times--; 22 23 if (times <= 0) { 24 25 send.value = '發送驗證碼'; 26 27 clearInterval(timer); 28 29 send.disabled = false; 30 31 times = 60; 32 33 } else { 34 35 send.value = times + '秒後重試'; 36 37 send.disabled = true; 38 39 } 40 41 }, 1000); 42 43 } 44 45 46 // jQuery版本 47 48 var times = 60, 49 50 timer = null; 51 52 $('#send').on('click', function () { 53 54 var $this = $(this); 55 56 // 計時開始 57 58 timer = setInterval(function () { 59 60 times--; 61 62 if (times <= 0) { 63 64 $this.val('發送驗證碼'); 65 66 clearInterval(timer); 67 68 $this.attr('disabled', false); 69 70 times = 60; 71 72 } else { 73 74 $this.val(times + '秒後重試'); 75 76 $this.attr('disabled', true); 77 78 } 79 80 }, 1000); 81 82 });
1 9、常用的一些正則表達式 2 //匹配字母、數字、中文字元 3 4 /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/ 5 6 //驗證郵箱 7 8 /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ 9 10 //驗證手機號 11 12 /^1[3|5|8|7]\d{9}$/ 13 14 //驗證URL 15 16 /^http:\/\/.+\./ 17 18 //驗證身份證號碼 19 20 /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/ 21 22 //匹配中文字元的正則表達式 23 24 /[\u4e00-\u9fa5]/ 25 26 //匹配雙位元組字元(包括漢字在內) 27 28 /[^\x00-\xff]/
1 10、js時間戳、毫秒格式化 2 function formatDate(now) { 3 4 var y = now.getFullYear(); 5 6 var m = now.getMonth() + 1; // 註意js里的月要加1 7 8 var d = now.getDate(); 9 10 var h = now.getHours(); 11 12 var m = now.getMinutes(); 13 14 var s = now.getSeconds(); 15 16 return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; 17 18 } 19 20 var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20); 21 22 console.log(nowDate.getTime()); // 獲得當前毫秒數: 1465816710020 23 24 console.log(formatDate(nowDate));
1 11、js限定字元數(註意:一個漢字算2個字元) 2 html 3 4 <input id="txt" type="text"> 5 6 7 8 js 9 10 //字元串截取 11 12 function getByteVal(val, max) { 13 14 var returnValue = ''; 15 16 var byteValLen = 0; 17 18 for (var i = 0; i < val.length; i++) { 19 20 if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; 21 22 if (byteValLen > max) break; 23 24 returnValue += val[i]; 25 26 } 27 28 return returnValue; 29 30 } 31 32 $('#txt').on('keyup', function () { 33 34 var val = this.value; 35 36 if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { 37 38 this.value = getByteVal(val, 14); 39 40 } 41 42 });
1 12、js判斷是否移動端及瀏覽器內核 2 var browser = { 3 4 versions: function() { 5 6 var u = navigator.userAgent; 7 8 return { 9 10 trident: u.indexOf('Trident') > -1, //IE內核 11 12 presto: u.indexOf('Presto') > -1, //opera內核 13 14 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核 15 16 gecko: u.indexOf('Firefox') > -1, //火狐內核Gecko 17 18 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端 19 20 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios 21 22 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android 23 24 iPhone: u.indexOf('iPhone') > -1 , //iPhone 25 26 iPad: u.indexOf('iPad') > -1, //iPad 27 28 webApp: u.indexOf('Safari') > -1 //Safari 29 30 }; 31 32 } 33 34 } 35 36 if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) { 37 38 alert('移動端'); 39 40 }
1 13、getBoundingClientRect() 獲取元素位置 2 //它返回一個對象,其中包含了left、right、top、bottom四個屬性 3 4 var myDiv = document.getElementById('myDiv'); 5 6 var x = myDiv.getBoundingClientRect().left; 7 8 var y = myDiv.getBoundingClientRect().top; 9 10 // 相當於jquery的: $(this).offset().left、$(this).offset().top // js的:this.offsetLeft、this.offsetTop
1 14、HTML5全屏 2 function fullscreen(element) { 3 4 if (element.requestFullscreen) { 5 6 element.requestFullscreen(); 7 8 } else if (element.mozRequestFullScreen) { 9 10 element.mozRequestFullScreen(); 11 12 } else if (element.webkitRequestFullscreen) { 13 14 element.webkitRequestFullscreen(); 15 16 } else if (element.msRequestFullscreen) { 17 18 element.msRequestFullscreen(); 19 20 } 21 22 } 23 24 fullscreen(document.documentElement);
1 15、HTML5 DOM 選擇器 2 // querySelector() 返回匹配到的第一個元素 3 4 var item = document.querySelector('.item'); 5 6 console.log(item); 7 8 // querySelectorAll() 返回匹配到的所有元素,是一個nodeList集合 9 10 var items = document.querySelectorAll('.item'); 11 12 console.log(items[0]);
要解決跨域的問題,我們可以使用以下幾種方法:
1、通過jsonp跨域
2、通過修改document.domain來跨子域
3、使用window.name來進行跨域
4、使用HTML5中新引進的window.postMessage方法來跨域傳送數據
使用postMessage來跨域傳送數據還是比較直觀和方便的,但是缺點是IE6、IE7不支持,所以用不用還得根據實際需要來決定。
除了以上幾種方法外,還有flash、在伺服器上設置代理頁面等跨域方式,這裡就不做介紹了。
以上四種方法,可以根據項目的實際情況來進行選擇應用,個人認為window.name的方法既不複雜,也能相容到幾乎所有瀏覽器,這真是極好的一種跨域方法。