javascript学习第三天笔记

javascript学习第三天笔记

本文主要是复习循环，学习多分支语句switch，下拉菜单事件onchange，数组常用的方法（添加，删除，链接，jion()把数组转换成字符串，split()把字符串转换为数组），DOM的定义，节点，访问节点，封装自己的class类，判断真假，访问关系（父节点，子节点，孩子节点），DOM节点的操作（创建节点，插入节点，移除节点，克隆节点）

1.1 循环
循环 for(初始化; 条件; 增量){}
while() 当 do {} while()
while(条件) { 语句 }

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

1.2 多分支语句 switch
switch 跟 if() {} else if() {} else if(){} else{} 几乎是一样的，但是相比之下switch效率更好。
switch的语法格式：
switch(参数)
{
case 参数1：
语句;
break; 退出的意思
case 参数2：
语句;
break; 退出的意思
……..
default: 默认的
语句;
}
例子：水果价格

 <script>
    window.onload = function(){

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

1.3 下拉菜单的事件 onchange
改变的时候发生的事件：select.onchange = function(){}

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

    }
</script>

* 1.4 数组常用方法*
对这个数组进行操作：var arr = [1,3,5,7];

• 1.41 添加 数组

1.push() 后面推进去
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
push 推进去 放
var arr =[1,3,5,7] → arr.push(9) → 结果变成 : [1,3,5,7,9];
- unshift() 从数组的前面放入
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
var arr = [1,3,5,7] → arr.unshift(0) → 结果变成 [0,1,3,5,7]

• 1.42 删除数组内容
  1、pop() 删除最后一个元素
  pop() 移除最后一个元素
  返回值 是 返回最后一个值
  var arr = [1,3,5,7] → arr.pop() → 结果 [1,3,5]

  1. shift() 删除第一个元素
     shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
     var arr = [1,3,5,7] → arr.shift() → 结果 [3,5,7]

• 1.4.3 连接两个数组
  concat()
  该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本
  var aa = [1,3,5,7]; var bb = [“a”,”b”,”c”];
  aa.concat(bb); 结果： [1,3,5,7,“a”,”b”,”c”];

• 1.4.4 join() 把数组转换为字符串
  join()
  作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
  语法：arrayObject.join(separator)
  数组名.join(符号)
  数组转换为字符串
  参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
  var arr = [1,3,5,7];
  console.log(arr.join(“-”)) 结果就是： 1-3-5-7 字符串

• 1.4.5 把字符串转换为数组 split()
  join <=> split
  split() 方法用于把一个字符串分割成字符串数组
  语法
  stringObject.split(separator,howmany)
  参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
  howmany 可选。该参数可指定返回的数组的最大长度

//字符串转换为数组
var number = "1-3-5-7";
console.log(number.split("-"));

1.5 DOM (重点)
我们js 有三部分组成的？
ECMAscript DOM BOM
1、核心（ECMAScript）欧洲计算机制造商协会
描述了JS的语法和基本对象。
2、文档对象模型（DOM） 学习的重点
处理网页内容的方法和接口
3、浏览器对象模型（BOM） 了解一下
与浏览器交互的方法和接口

• 1.51 DOM的定义
  DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
  目的其实就是为了能让js操作html元素而制定的一个规范。
  DOM树：
• 1.5.2 标签 标记 元素 节点
  由结构图中我们可以看到，整个文档就是一个文档节点。
  而每一个HMTL标签都是一个元素节点。
  标签中的文字则是文字节点。
  标签的属性是属性节点。
  一切都是节点……
• 1.5.3 访问节点
  我们学过几个访问节点 ：
  getElementById() id 访问节点
  getElementsByTagName() 标签访问节点
  getElementsByClassName() 类名 有兼容性问题
  主流浏览器支持 ie 67 8 不认识
  怎么办？ 我们自己封装自己的 类 。
• 1.5.4 封装自己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>

1.6 判断真假
我们用条件语句来判断5大数据类型中的真假；

数据	结论
数字类型	所有数字都是真，0是假
字符串	所有字符串都是真，’ ’串是假
对象	所有对象都是真，null是假
未定义	undefined是假，没有真

1.7 访问关系
1、父节点：parentNode
2、兄弟节点：nextSibling、nextElementSibling、previousSlibling、previousElementSibling
3、子节点：firstChild、firstElementChild、lastChild、lastElementChild
4、所有子节点：childNode、children

• 1.71 父节点
  父 ： parentNode 亲的 一层
  javascript
<script>
window.onload = function(){
var child = document.getElementById("child");
child.onclick = function(){
this.parentNode.style.display = "none";
// 关掉的是他的 父亲
}
}
</script>

• 1.7.2 兄弟节点
  nextSibling 下一个兄弟 亲的 ie 678 认识
  nextElementSibling 其他浏览器认识的
  previousSibling 同理 上一个兄弟
  previousElementSibling
  我们想要兼容 我们可以合写 || 或者

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
//必须先写 正常浏览器  后写  ie678  

• 1.7.3 子节点
  firstChild 第一个孩子 ie678
  firstElementChild 第一个孩子 正常浏览器
  var one.firstElementChild || one.firstChild;
  lastChild
  lastElementChild
• 1.7.4 孩子节点
  childNodes 选出全部的孩子
  childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （嫡出）
  火狐 谷歌等高本版会把换行也看做是子节点

1.8 dom 的节点操作
新建节点 插入节点 删除节点 克隆节点 等等

• 1.8.1 创建节点

var div = document.creatElement(“li”);

-1.8.2 插入节点
1. appendChild(); 添加孩子 append 添加的意思
意思： 添加孩子 放到盒子的 最后面。
2. insertBefore(插入的节点，参照节点) 子节点 添加孩子
注意：1.写满两个参数
demo.insertBefore(test,childrens[0]);
放到了第一个孩子的前面
2.如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。
demo.insertBefore(test,null);
- 1.8.3 移除节点
removeChild() 孩子节点

var da = document.getElementById("xiongda");
demo.removeChild(da);

• 1.8.4 克隆节点
  cloneNode();
  复制节点
  括号里面可以跟参数 ， 如果 里面是 true 深层复制， 除了复制本盒子，还复制子节点
  如果为 false 浅层复制 只复制 本节点 不复制 子节点。