JS笔记汇总2

笔记零零散散的记在各地方，再来一发。
还是那句话，到处收集的，非原创。

链接跳转

判断PC和iphone 并用根据浏览器语言跳转页面

var lang=navigator.userLanguage||navigator.language;
var $C=location.hash;
if (navigator.platform.indexOf('iPhone') != - 1 && $C!="#pc"){
    mobile_browse_lang();
}else{
    pc_browse_lang();
}
function pc_browse_lang(){
    var type=navigator.appName;
    if (type=="Netscape"){
        var lang = navigator.language;
    }
    else{
        var lang = navigator.userLanguage;
    }
    var lang = lang.substr(0,2);

    var lang_key = ['key1', 'key2', 'key3', 'key4', 'key5'];//浏览器语言代码，若浏览器语言为英语，则对应为'en';
    // var lang_type = $.inArray(lang, lang_key); jquery写法


    function indexOf(lang_key, lang) {
      for (var i = 0; i < lang_key.length; i++) {
        if (lang_key[i] === lang)
          return i;
      }
      return -1;
    }

    var lang_type = indexOf(lang_key, lang);


    if(lang_type == -1){
        window.location.href = 'xxx_key0.html';//若不在  lang_key 数组里面 则默认为 key0
    } else {
        window.location.href = 'xxx_'+ lang +'.html';
    }

}

响应式相关

用js进行获取窗口宽度，进行对应处理

//牛逼版
if(window.matchMedia){
    var mq = window.matchMedia("(min-width: 500px)");   
    mq.addListener(WidthChange);   
    WidthChange(mq); 
}   

function WidthChange(mq){
            if(mq.matches){

            //此时window的宽度大于500px

        }else{

            //此时window的宽度小于500px

        }  
}

//正常版
var resizeMethod = function(){
    if (document.body.clientWidth < 768) {
        console.log('mobile');
    }
};

//绑定事件处理函数到resize事件
window.addEventListener("resize", resizeMethod, true);  

安卓手机分辨率判断计算

（自己算的 用于pc端和手机端是同一个页面的情况 等比缩放 这个大家随便看看 因为我也已经看不懂了 啊啊啊 当时的页面找不到了 oh no）

var body = document.querySelector('body');
var w = screen.width;//屏幕宽度
var h = screen.height;//屏幕高度
var rat = window.devicePixelRatio;//设备像素比  
var s_w; 
var c_w = document.documentElement.clientWidth;//可见区域宽度
var c_h = document.documentElement.clientHeight;//可见区域高度
if(w == c_w){//认为是pc端
    rat = 1;
}
//取到宽度（即取到较小的一个边的宽度）
if( w > h){//横屏
    s_w = h; 
}else{
    s_w = w;
}   
caculate();         
function caculate(){
    var wrap_w;
    if(c_w < c_h){
        wrap_w = c_w;
    }else{
        wrap_w = s_w/rat;
    }
    if(wrap_w > 960){
        wrap_w =960;
    }
    var fs = parseInt(wrap_w/9.6);
    body.style.fontSize = fs+'px';

}

数组相关

查找数组符合项

//jQuery
$.inArray(item, array);                   
//ie8+
function indexOf(array, item) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === item)
      return i;
  }
  return -1;
}
indexOf(array, item);               
//ie9+
array.indexOf(item);

循环监听

var mydivs = document.getElementById("box").getElementsByTagName("div");
for(var i = 0;i<=mydivs.length;i++){
    mydivs[i].no = i;
    mydivs[i].onclick = function(){
        console.log('我是第' + this.no + '个');
}

事件类

事件委托

(function(){
    var resources = document.getElementById('resources');
    resources.addEventListener('click',handler,false);
    function handler(e){
        var x = e.target; // get the link tha
        if(x.nodeName.toLowerCase() === 'a'){
            alert('Event delegation:' + x);
            e.preventDefault();
        }
    };
})();

模块化

匿名函数和模块化

//方法一
var myApplication = function(){
    var name = 'Chris';
    var age = '34';
    var status = 'single';
    function createMember(){
        // [...]
    }
    function getMemberDetails(){
        // [...]
    }
    return{
        create:createMember,
        get:getMemberDetails
    }
}();
//现在写成 myApplication.get()和 
//myApplication.create() 就行了。

//方法二
var module1 = (function(){
    var _count = 0;
    var m1 = function(){
    //...
    };
    var m2 = function(){
        //...
    };
    return {
        m1 : m1,
        m2 : m2
    };
})();

js对象字面量

var literal = {
    add: function(){
        alert("add");
    },
    del: function(){
        alert("delete");
    },
    update: function(){
        alert("update");
    },
    name: "zhangsan",
    callLiteral: function(){
        // 对于当前字面量对象的调用，要加this关键字
        this.add();
    }
};

//拿js对象字面量可以用 for(变量 in 对象) 

     


    

class相关

原生js class增删

    

        sssssssssssss
    
    

css相关

获取css样式

出处：http://www.csshello.com/jcjs/352.html
样式呢，如果直接写在行内，也就是内联样式，js能直接获取到。如果写在非行内，改怎么获取呢？
顺便科普下，总共有三种分类：内联样式(Inline Style)、内部样式表(Internal Style Sheet)和外部样式表(External Style Sheet)。
直接上代码：

• div1为行内样式
• div2为非行内样式
  css部分
  #div2{width:200px; height:200px; background:red;}
  html部分
  
  
  
  
  js部分
  window.onload=function(){
  var odiv1=document.getElementById('div1');
  var odiv2=document.getElementById('div2');
  //由于ie不支持console.log(),故测试ie时，请使用alert()
  console.log('行内样式获取'+odiv1.style.width);
  console.log('非行内样式获取'+odiv2.style.width);
  console.log('非行内样式获取通过函数'+getStyle(odiv2,'width'));
  }
  function getStyle(obj,name){
  if(obj.currentStyle){
  //IE
  return obj.currentStyle[name];
  }else{
  //FF、Chrome
  return getComputedStyle(obj,false)[name];
  }
  };

---

收工！
这个既然是2， 那1就在这里js笔记