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;
        }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JS基础第二节
    一、数组 数组是一个有序列表,所以有下标. 并且数组在js中可以存在任意类型的数据.并且同一个数组中可以存放不同的...
    空谷悠阅读 522评论 0赞 1
  • js笔记
    js简介 Js是一种基于事件和对象驱动的解释性、松散性的语言。 一切皆对象 javascript 布兰登艾奇 ...
    塔库纳玛哈哈阅读 1,241评论 0赞 2
  • JavaScript 笔记
    JS基础讲解 JavaScript组成ECMAScript：解释器、翻译DOM：Document Object M...
    FConfidence阅读 580评论 0赞 1
  • JS高级与面向对象
    一、JavaScript基础知识回顾 1.1 JavaScript 1.1.1 javascript是什么？ Ja...
    福尔摩鸡阅读 1,343评论 0赞 7
  • JS高级程序设计3学习笔记（一）
    有人说过，很多弯路到最后都成了直路，所有的坑到最后也都成了坦途；所谓的直路和坦途并不是摆在眼前的，都是不断的的...
    老衲法号一眉道人阅读 1,377评论 0赞 4