JS(5)

复习(1)

var arr = [1,3,57];
var ar = new Array(); new object(); new Date();
var txt = [“宋江”,”张飞”] ;
txt.length; 属性
遍历数组：
for(var i=0;i<txt.length;i++){ console.log(txt[i]);}
txt[i] txt 数组

两个小循环

for(初始化; 条件; 增量){}
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];

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

push();方法可向数组的末尾添加一个或多个元素，并返回新的长度。
push 推进去
var arr =[1,3,5]; → arr.push(7); → 结果变成 : [1,3,5,7];

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

删除数组内容

pop() 删除最后一个元素

pop()移除最后一个元素
返回值是返回最后一个值
var arr = [1,3,5]; → arr.pop(); → 结果 [1,3]

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的语法和基本对象。
文档对象模型（DOM） ★★★★★
处理网页内容的方法和接口。
浏览器对象模型（BOM）
与浏览器交互的方法和接口 。
window.alert(); 很大的兼容问题

DOM 定义

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。
DOM树:

节点

标签 标记 元素 节点
由结构图中我们可以看到，整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文字节点。
标签的属性是属性节点。
一切都是节点……

访问节点

我们学过几个访问节点 ：
getElementById(); id 访问节点
getElementsByTagName(); 标签访问节点

getElementsByClassName(); 类名 有兼容性问题
主流浏览器支持 ie 678 不识别
怎么办？ 我们自己封装自己的类 。

封装自己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>

结束，分割版本

判断真假

我们用条件语句来判断5大数据类型中的真假；
数据 结论
数字类型 所有数字都是真，0是假
字符串 所有字符串都是真，’ ’串是假
对象 所有对象都是真，null是假
未定义 undefined是假，没有真

访问关系

各个节点的相互关系

父节点

父 ： parentNode 亲的一层

<script>
    window.onload = function(){
        var x = document.getElementById("x");
        x.onclick = function(){
            this.parentNode.style.display = "none";
            // 关掉的是他的 父亲
        }
    }
</script>

兄弟节点

nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的

previousSibling 同理 上一个兄弟
previousElementSibling
我们想要兼容 我们可以合写|| 或者

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";

必须先写 正常浏览器 后写ie678

子节点

firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var one.firstElementChild || one.firstChild;

lastChild
lastElementChild

孩子节点

childNodes 选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
火狐 谷歌等高本版会把换行也看做是子节点

利用nodeType == 1才是元素节点 来获取元素节点 标签元素

children 选取所有的孩子 （只有元素节点）
这个更好
ie 678 包含注释节点 这个要避免开。

dom 的节点操作

新建节点 插入节点 删除节点 克隆节点 等等

创建节点

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

上面的意思就是生成一个新的li标签

插入节点

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

移除节点

removeChild(); 孩子节点
var da = document.getElementById("xiongda");
demo.removeChild(da);

克隆节点

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

复习(2)

循环

for(初始化; 退出条件; 增量) { }
while(退出条件) { }
do { 语句 } while(退出条件)

switch( ) 多选1

switch(参数)
{
case “参数1”：
语句;
break;
case “参数2”：
语句;
break;
default:
}

数组常用的方法
加内容 减内容 连接 转换

添加：

      push();     向数组的后面添加内容    
      var arr = [1,2]    arr.push(“你好吗”);        结果 [1,2,”你好吗”];
      unshift()   数组的前面添加     
      var arr = [1,2]    arr.unshift(“我很好”)   结果   [“我很好”,1,2]’

删除：
pop() 删除最后一个元素
var arr = [1,2] arr.pop(); [1]
shift() 删除第一个元素
var arr = [1,2] arr.shift(); [2]
注意：

     var arr = [1,2,3,4];
     console.log(arr.push(8));     结果是  5      返回改数组的长度

如果这么写：

     var arr = [1,2,3,4];
     arr.push(8);
     console.log(arr);      结果 就是  【1,2,3,4,8】

  var arr = [1,2,3,4,5,6,12];
  console.log(arr.pop());     结果是 12  返回最后一个元素
  var arr = [1,2,3,4];
  arr.pop();
  console.log(arr);      结果 就是  【1,2,3】

连接 concat
join() 把数组转换为字符串

var  arr = [1,2,3,4];
var test = arr.join(“-”);
console.log(test)    1-2-3-4

var arr = [1,2,3,4];
arr.join(“*”);
console.log(arr);      [1,2,3,4]  

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

var  txt = “1-2-3”;
var  test = txt.split(“-”)
console.log(test)     [“1”,”2”,”3”];

dom
我们操作最多的就是 元素节点 标签节点 标签 li span
节点的访问关系
父级 parentNode
this.parentNode == 我的父亲
兄弟 nextSibling

 childNodes       官方用法      
 一般情况下，我们只需要元素节点  
   nodeType  来  判断   
   nodeType == 1    元素节点     
   nodeType == 2    属性节点
   nodeType == 3    文本节点 

<a href =”xxxxx”> 内容 </a>
ie 678 把注释节点 也算 可以避免

设置节点属性

获取节点属性

getAttribute(属性) 获取属性
通过这个方法，可以得到某些元素的某些属性 。
alert(demo.getAttribute("title"));
弹出对话框：弹出title里面的内容

设置节点属性

setAttribute(“属性”,”值”);
比如说，我们想要把一个类名改为demo
div.setAttribute(“class”,”demo”);

删除某个属性

removeAttribute(“属性”);
demo.removeAttribute(“title”);
这个盒子就没有title 属性 给删掉了 。
a.appendChild(b);
b一定是a孩子，同时b放到了a 的里面，在最后面。
a.insertBefore（b，c）
b，c都是 a 的孩子
把 b放到 a里面 ，但是在c的前面。

内置对象

内置对象：
内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。

日期函数 ( Date() )

这个函数 （对象） 可以设置我们本地日期。

声明日期

var date = new Date();
创造声明一个新的日期函数， 赋值给了date
var arr = new Array();

使用函数

得到毫秒数 ms s m h
从 1970 年1 月1号 unix 32位 68年

var  date = new Date();   
date.getTime();
date.valueOf();        得到距离1970年的毫秒数     
var date  = new Date();  // 声明
console.log(date.getTime());  // 提倡使用的
console.log(date.valueOf());

// 直接使用
console.log(Date.now());
console.log(+new Date());

常用的日期的方法

获取日期和时间

getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份（浏览器都支持）
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)

如果是上午 ，我打开页面 页面中显示的是
上午好，好好学习 显示的是上午的图片
如果是下午 我打开页面 页面中显示的是
下午好，天天向上 显示的是下午的图片
根据当前的小时来判断 if

定时器

很多情况下，一些操作不需要人工干预，代码自己会不断的去执行 。
而且会有时间的绑定 。 比如每隔5秒钟就去执行一次事件。
我们可以设定时间 让某个动作不断的去执行 。 这个我们再js 里面用定时器来表示。
window.setInterval(“执行的函数”,间隔时间)
正确的写法:
setInterval(fun, 1000); 1000 ms 毫秒
每隔1秒钟，就去执行一次 fun 这个函数.
setInterval(“fun()”,1000) 可以用
setInterval( function(){} , 1000 )
setInterval(fun(),1000) 错误的

定时器 特别的像 for 循环，但是定时器最大的特点在于， 自动，可以设定时间。

倒计时

2015 - 1990 25
我们要计算的 倒计时
有一个最终时间 12月12日
有一个现在时间 11月13日
倒计时 = 用将来的时间 - 现在的时间
问题：
用毫秒减去现在距离 1970年1月1日
将来时间距离1970年1月1日毫秒数
用将来的毫秒数 - 现在的毫秒数 不断转换就可以了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size:30px;
            text-align: center;
            color:red;
        }
    </style>
    <script>
        window.onload = function(){
            var demo = document.getElementById("demo");
            var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
            setInterval(clock,1000); // 开启定时器
            function clock(){
                var nowTime = new Date(); // 一定是要获取最新的时间
                //  console.log(nowTime.getTime());  获得自己的毫秒
                var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
                // 用将来的时间毫秒 -  现在的毫秒  / 1000 得到的 还剩下的秒  可能处不断 取整
               // console.log(second);
                 // 一小时 3600 秒
                // second / 3600  一共的小时数  /24   天数
                var d = parseInt(second / 3600 / 24);  //天数
                //console.log(d);
                var h = parseInt(second / 3600  % 24)  // 小时
               // console.log(h);
                var m = parseInt(second / 60  % 60);
                //console.log(m);
                var s = parseInt(second % 60); // 当前的秒
                console.log(s);
               /* if(d<10)
                {
                    d = "0" + d;
                }*/
                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;
                demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
            }
        }
    </script>
</head>
<body>
<div id="demo"></div>
</body>

定义自己的日子

var endTime = new Date(“2015/12/12”);
如果date 括号里面写日期，就是自己定义的时间
如果date括号里面不写日期，就是当前时间 。
new Date(“2015/12/12 17:30:00”);
日期和时分秒中间 有空格隔开