2017-03-07 JS学习笔记

数组的遍历

• 什么是数组的遍历：就是取出数组中的每一个元素

for(var i = 0 ; i < arr.length ; i ++){
        var result = arr[i];
        console.log(result);
}

• 代码抽取的思想：
  功能相同的抽取出来，不同的用变量
  练习代码

    // 分析：偶数行的li变成红色
    // 1.获取所有的元素
    var lis = document.getElementsByTagName("li");
    console.log(lis);
    // 2.找出偶数行设置颜色
    for(var i=0; i<lis.length; i++){
        if (i%2 != 0){
            lis[i].style.backgroundColor = "red";
        }
    }

数组的常用方法

• 增

var arr = [12,undefined,null];
arr[3] = 188;
arr.push(90,99);

• 删

var result = arr.pop();
console.log(arr);
console.log(result);

• 改

arr[1] = 588;
console.log(arr);

• 查
  查就是遍历然后用 if 判断

JS 的内置

<button style ="background-color:red" onclick = "alert('大家早上好')">按钮</button>

九宫格

九宫格关键点

  btns[i].style.position = "absolute";
            row = parseInt(i / count);
            col = i % count;
//            console.log(col);
            btns[i].style.top = row * 100 + "px";
            btns[i].style.left = col * 100 + "px";

排他思想

• 谁调用代表谁的关键词 this
• 排他思想的关键点

  for(var i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            // this代表当前事件的调用者
            // 排他思想：干掉所有人（包括自己）
            for(var j = 0; j < btns.length; j++){
       btns[j].style.backgroundColor = "#ccc";
            }
            // 最后再让自己复活
            this.style.backgroundColor = "blue";
        }
    }

通过类名获得标签(阉割版)

• 有兼容性问题，ie/6/7/8不支持，所以要自己做函数来实现

function getElementsByClass_name(class_name)
    { // 判断当前浏览器是否支持这个方法
        if (document.getElementsByClassName){
            return document.getElementsByClassName(class_name);
        }
        // 就是用来存储指定class_name类名称的标签
        var arr = [];
        // 取出页面上所有的元素
        var doms = document.getElementsByTagName("*");
        for(var i=0; i<doms.length; i++){
//            console.log(doms[i]);
            // 取出类名称，判断是否和class_name相等，如果相同，保存到数组中
            if (doms[i].className == class_name){
                arr.push(doms[i]);
            }
        }
        return arr;
    }

    var arr = getElementsByClass_name("box");
    console.log(arr);
    arr[1].style.backgroundColor = "red";

</script>

补充如何把字符串切割成数组

• 使用字符串的 .split 方法

var str = "box demo test";
//这里空格表示，用空格分隔的字符串
var arr = str.split(" ");
console.log(arr);
//输出 arr["box","demo","test"];

完整版通过类名称获取标签

function getElementByClass_name(class_name){
          var arr = [];
          var doms = document.getElementsByTagName("*");
          for(var i = 0; i < doms.length ; i++){
                 var classNameArr = doms[i].className.split(" "); 
                  for(var j = 0; j < doms.length; j++){
                            if(classNameArr[j] == class_name){
                                arr.push(doms[i]);
                                }
                        }        
          }
          return arr;
}
var arr = getElementsByClass_name("box");

其他类型转换称字符串类型

• 布尔类型转换为字符串类型

var flag = false;
var result = flag.toString();

• 数字类型转换为字符类型

var number = 123;
var result = number.toString();
//输出字符类型的123

• 补充

• 运算符 也可以用来连接字符

var str1 = "hello";
var str2 = "world";
//输出helloworld

• 当数字类型和字符类型相加的时候，数字类型会转变为字符串类型

var num1 = 10;
var str = "10";
var num2 = 10;
var result = num1 + str + num2;
//输出101010

var num3 = 10;
var num4 = 10;
var str = "10";
var result = num1 + num2 + str;
//输出 2010

• 数字类型转换成字符串类型最简单的方式

var num = 90;
var str = num + "";

字符串转换成数值类型

• 使用 parseInt 方法

var str = "123";
var result = parseInt(str);

• 转换原理：
  当遇到 0~9 的时候就转换，如果是其他的那么停止转换，并且返回当前转换完成的数字

var str = "123abc";
    var str = "123.45abc";
    var num = parseInt(str);
    console.log(typeof num);
    console.log( num);
//    var str = "123.45abc"

• 注意
  只有遇到第一个小数点 . 的时候会继续转换，再有其他不是0~9的证书，就退出转换

 var str = "123.45.567abc";
    var result = parseFloat(str);
    console.log(result);
//输出123.45

• 要求进制转换

var num = 10;
var result = num.toString(8);
//输出12

对象、方法、属性和变量

• 对象
  具有特定功能的功能组
  document.getElementByTagName();
• 方法(就是函数):
  隶属于对象
• 属性：就是变量，隶属于对象，想要使用，必须有对象调用，（对象.属性）
• 变量：
  变量比较自由，在哪都可以使用

-自定义属性

var arr = [12,345];
arr.length;
arr.suibian = 123;
var result = arr.suibian;
console.log(result);
//输出123

tab 切换

也可以使用小闭包解决

//自定义属性，将循环的变量抽离出来，在循环内部的函数中使用
lis[i].index = i;
lis[i].onclick = function(){
        divs[this.index].style.display = "black";
}

   // 获取对一个的标签
        var lis = document.getElementsByTagName("li");
        var divs = getElementsByClass_name("son");
        console.log(divs);
        for(var i=0; i<lis.length; i++){
            // 自定义属性
            lis[i].index = i;
            lis[i].onclick = function () {
                // 干掉所有人（包括自己）
                for(var j=0; j<lis.length; j++){
                    lis[j].className = "";
                    divs[j].style.display = "none";
                }
                // 自己
                this.className = "current";
                divs[this.index].style.display = "block";
            }
        }
//自己创建兼容类名选择器
        function getElementsByClass_name(class_name)
        {
            var arr = [];
            // 取出页面上所有的元素
            var doms = document.getElementsByTagName("*");
            for(var i=0; i<doms.length; i++){
//            console.log(doms[i].className);
                // 把字符串切割成数组
                var classNameArr = doms[i].className.split(" ");
                for(var j=0; j<classNameArr.length;  j++){
                    // 判断数组中的每一个元素是否等于class_name
                    if (classNameArr[j] == class_name){
                        arr.push(doms[i]);
                    }
                }
            }
            return arr;
        }