夜光带你走进 前端工程师（三十七 jS ）

夜光序言：

 

 

 

 

如果有人要伤害你，就请他先从我的尸体上踏过去

斩草不除根，春风吹又生

就算粉身碎骨我也要救出你，拦我者，必诛之

我不会让他伤害你的，如果我无法获胜，我……有八成的把握让他和我一起死

 

 

 

 

 

 

 

 

 

 

 

正文：

复习

 1. 数组           看电影    电影院  座位    

 大的变量     里面可以放很多的值      

 var  arr = [1,3,57];  

 var ar = new Array();    new object();   new Date()

 var txt =  [“A”,”B”] ;

  使用数组:     数组名[索引号]     txt[1]    == B

  txt.length;     属性  

 遍历数组：  

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

   txt[i]  txt  数组    

 

两个小循环

  循环   for(初始化; 条件; 增量){}

   while()  当       do {}  while()

  while(条件)  { 语句 }

 

---

var j = 1;
while(j<=100)
{
    sum1+=j;
    j++;
}
console.log(sum1);

do while  至少执行一次     while 不一定

---

 

​​​​​​​多分支语句 switch

switch  跟 if else if  else if else   几乎一样的  但是switch效率更好。

作用其实就是 ： 多选1     从多个里面选1个 。

语法格式：

switch(参数)

{

   case 参数1：

   语句;

   break;    退出的意思

   case 参数2：

   语句;

   break;    退出的意思

   ........

   default:  默认的

   语句;

}

 <script>
    window.onload = function(){

        //获取元素
        var txt = document.getElementById("txt");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var val = txt.value;
            switch(val)
            {
                case "苹果":
                    alert("苹果的价格是: 5元");
                    break;
                case "香蕉":
                    alert("香蕉的价格是: 2元");
                    break;
                case "梨":
                    alert("梨的价格是: 1.5元");
                    break;
                case "大白菜":
                    alert("大白菜的价格是: 9毛");
                    break;
                default:
                    alert("今天没进货");
            }
        }
    }
</script>

 

---

​​​​​​​ 下拉菜单的事件  onchange

  sele.onchange = function(){}   

  当改变的时候  事件  

<script>
    window.onload = function(){
        var sele = document.getElementById("sele");
        sele.onchange = function(){
           // alert(this.value);
            switch(this.value)
            {
                case "1":
                    document.body.style.backgroundImage = "url(images/chun1.jpg)";
                    break;
                case "2":
                    document.body.style.backgroundImage = "url(images/xia1.jpg)";
                    break;
                case "3":
                    document.body.style.backgroundImage = "url(images/qiu1.jpg)";
                    break;
                case "4":
                    document.body.style.backgroundImage = "url(images/dong1.jpg)";
                    break;
            }
        }

    }
</script>

 

效果 ：

 

​​​​​​​数组常用方法

我们经常要对数组进行操作，可能追加，也可能删除 等等，何如？

 

​​​​​​​添加 数组

var arr = [1,3,5];

我们想要 吧 7  这个数字 放到  这个数组的后面

我想要 [1,3,5,7];

1. push()   ★★★★★  后面推进去

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

push 推进去   放

var arr =[1,3,5]   →  arr.push(7)  → 结果变成 :  [1,3,5,7];

2. unshift()    从数组的前面放入

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

 var arr = [1,3,5]  →  arr.unshift(0) →  结果变成 [0,1,3,5]

注意：

var dom = [1,3,5];
console.log(dom.push(7));  // 返回的是 数组的长度  4

---

 

​​​​​​​删除数组内容

 1. pop()   删除最后一个元素

 

 pop()  移除最后一个元素

 返回值 是 返回最后一个值

var  arr = [1,3,5]   →  arr.pop()  →  结果   [1,3]  

2. shift()  删除第一个元素

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

var  arr = [1,3,5]   →  arr.shift()  →  结果   [3,5]

 

---

​​​​​​​连接两个数组

 concat()

 该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本

 var aa = [1,3,5];  var bb = [“a”,”b”,”c”];

 aa.concat(bb);     结果：  [1,3,5,“a”,”b”,”c”];

 

 

---

​​​​​​​join() 把数组转换为字符串

join()  

作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。

语法

arrayObject.join(separator)

数组名.join(符号)

数组转换为字符串

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3];

console.log(arr.join(“-”))    结果就是：  1-2-3    字符串

 

 

---

​​​​​​​把字符串转换为数组  split()

join   <=>   split  

 split() 方法用于把一个字符串分割成字符串数组

语法

 stringObject.split(separator,howmany)

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

howmany 可选。该参数可指定返回的数组的最大长度

 

 

---

​​​​​​​DOM (重点)

 我们js 有三部分组成的？

   ECMAscript       DOM      BOM   

   

核心（ECMAScript）欧洲计算机制造商协会

      描述了JS的语法和基本对象。   var aa   var AA   不一样

文档对象模型（DOM）  学习的重点

     处理网页内容的方法和接口

浏览器对象模型（BOM）    了解一下   

     与浏览器交互的方法和接口  

     window.alert()  很大的兼容问题

 

---

​​​​​​​DOM 定义

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。

目的其实就是为了能让js操作html元素而制定的一个规范。

DOM 树   

​​​​​​​节点

   标签   标记    元素    节点    

由结构图中我们可以看到，整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

一切都是节点……

 

---

​​​​​​​访问节点  

 我们学过几个访问节点 ：

  getElementById()   id 访问节点

  getElementsByTagName()    标签访问节点

  getElementsByClassName()   类名    有兼容性问题

  主流浏览器支持     ie 67 8  不认识   

  怎么办？ 我们自己封装自己的 类 。

 

 

---

 

​​​​​​​封装自己class类  

  原理： （核心）

   我们要取出所有的盒子， 利用遍历的方法 ， 通过每一个盒子的className 来判断。  如果相等就留下。

<script>
    window.onload = function(){
       //封装自己class类名
        function getClass(classname){
            //如果浏览器支持，则直接返回
            if(document.getElementsByClassName)
            {
                return document.getElementsByClassName(classname);
            }
            // 不支持的 浏览器
            var arr = []; // 用于存放满足的数组
            var dom = document.getElementsByTagName("*");
            //alert(dom.length);
            for(var i=0;i<dom.length;i++)
            {
                if(dom[i].className == classname)
                {
                    arr.push(dom[i]);
                }
            }
            return arr;
        }
        console.log(getClass("demo").length);
    }
</script>

 

  结束，分割版本