把平时开发所遇到的js问题，或者一些有用的tricks整理纪录下来

  • 当浏览器窗口改变宽度时

    1
    2
    3
    4
    5
    6
    window.onresize = resizeMyWindow;
    function resizeMyWindow(){
    	if($(window).width() > 600){
    	  /* some js code */
    	}
    }

  • 当scroll条拉至一定高度时

    1
    2
    3
    4
    5
    $(window).scroll(function(){
    	if($(this).scrollTop() > 600){
    		/* do something */
    	}
    })

  • 禁止图片右击另存为

    1
    2
    3
    4
    $("img").on("contextmenu",function(e){
      swal("Sorry...","You have no rights to copy!","warning"); //这里用了sweetalert弹出框插件
      return false;
     });

  • history.go(-1)和history.back()的区别

    1
    2
    history.go(-1)表示后退与刷新。如数据有改变也随之改变。	
    history.back()只是单纯的返回到上一页。

  • 判断是不是微信浏览器 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var isWx = function is_weixn(){
      var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i)=="micromessenger") {
    	return true;
      } else {
        return false;
      }
    }
    if(isWx) {
    	/* do something */
    }

  • 判断浏览器的各平台

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    browser = {
      versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
    	return {         //移动终端浏览器版本信息
    	  trident: u.indexOf('Trident') > -1, //IE内核
    	  presto: u.indexOf('Presto') > -1, //opera内核
    	  webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
    	  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
    	  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终端或uc浏览器
    	  iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
    	  iPad: u.indexOf('iPad') > -1, //是否iPad
    	  webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
       }(),
      language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    console.log("语言版本: "+browser.language);
    console.log(" 是否为移动终端: "+browser.versions.mobile);
    console.log(" ios终端: "+browser.versions.ios);
    console.log(" android终端: "+browser.versions.android);
    console.log(" 是否为iPhone: "+browser.versions.iPhone);
    console.log(" 是否iPad: "+browser.versions.iPad);
    console.log(navigator.userAgent);

  • 一行js获取页面所有元素，且给各元素加上随机色的边框（在知乎上看到的trick）

    1
    [].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

  • 数组复制

    1
    2
    3
    var array = [1,2,3,4,5];
    var copy_array = array.slice();
    console.log(copy_array);     // [1,2,3,4,5]

  • 原生js调用ajax

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 原生js调用ajax
    function ajax(){
      var xmlHttpReq = null;  // 声明一个空对象用于装入XMLHttpRequest对象
      if(window.ActiveXObject){   // 兼容ie5/ie6
        xmlHttpReq = new Active XObject("Microsoft.XMLHTTP");
      }else(window.XMLHttpRequest){
        xmlHttpReq = new XMLHttpRequest();  // 实例化一个XMLHttpRequest
      }

      xmlHttpReq.open("GET", "test.php", true);  // 调用open()方法并采用异步方式

      xmlHttpReq.onreadystatechange = function callback(){ // 设置毁掉函数
          if(xmlHttpReq.readyState == 4){ // 当请求加载完成时，readyState ==4
            
            if(xmlHttpReq.status = 200){ //服务器返回200成功
              alert("ajax 调用成功了!");
            }
          }
      }

      xmlHttpReq.send(null);  // 因为是get方法，所以send方法的参数可以为null
    }