IT工程師數位筆記本

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

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

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

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

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

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

$('#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]/

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()); // 獲得當前毫秒數: 1465816710020console.log(formatDate(nowDate));

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

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

//它返回一個對象，其中包含了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

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