Web前端汇总

JS笔记汇总2

2014-12-08  本文已影响246人  糯米馨

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

链接跳转

判断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 对象) 
<div id="demo">
     
</div>
<p>
    <script type="text/javascript">
        var mycars ={a:"a1",b:"b1",c:"c1",d:"d1"};
        var str='{a:"a1",b:"b1",c:"c1",d:"d1"}';
        var temp="";
        for (x in mycars)
        {
            temp+="数组索引或对象属性："+x+" 对应的值："+mycars[x]+"<br/>";
        }
        document.getElementById("demo").innerHTML=str+"<br/>"+temp;
    </script>
</p>

class相关

原生js class增删

<style type="text/css">
    div.testClass{
        background-color:gray;
    }
</style>
<script type="text/javascript">
    function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    function addClass(obj, cls) {
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    }

    function removeClass(obj, cls) {
        if (hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }

    function toggleClass(obj,cls){
        if(hasClass(obj,cls)){
            removeClass(obj, cls);
        }else{
            addClass(obj, cls);
        }
    }

    function toggleClassTest(){
        var obj = document. getElementById('test');
        toggleClass(obj,"testClass");
    }
</script>
<body>
    <div id = "test" style = "width:250px;height:100px;">
        sssssssssssss
    </div>
    <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />
</body>

css相关

获取css样式

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

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

上一篇下一篇

猜你喜欢

热点阅读