JS原生第三篇（帅哥）

1.1 数组

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

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

var arr = [1,3,57];

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

var txt = [“宋江”,”张飞”] ;

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

txt.length; 属性

遍历数组：

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

txt[i] txt 数组

1.2 两个小循环

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

while() 当 do {} while()

while(条件) { 语句 }

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

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

1.3 多分支语句 switch

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

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

语法格式：

switch(参数)

{

case 参数1：

语句;

break; 退出的意思

case 参数2：

语句;

break; 退出的意思

........

default: 默认的

语句;

}

1.4 下拉菜单的事件 onchange

sele.onchange = function(){}

当改变的时候事件

效果：

1.5 数组常用方法

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

1.5.1 添加数组

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.5.2 删除数组内容

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

pop() 移除最后一个元素

返回值是返回最后一个值

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

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

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

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

1.5.3 连接两个数组

concat()

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

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

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

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

join()

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

语法

arrayObject.join(separator)

数组名.join(符号)

数组转换为字符串

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

var arr = [1,2,3];

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

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

join <=> split

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

语法

stringObject.split(separator,howmany)

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

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

1.6 DOM (重点)

我们js 有三部分组成的？

ECMAscript DOM BOM

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

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

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

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

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

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

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

1.6.1 DOM 定义

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

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

DOM 树

1.6.2 节点

标签标记元素节点

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

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

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

标签的属性是属性节点。

一切都是节点……

1.6.3 访问节点

我们学过几个访问节点：

getElementById() id 访问节点

getElementsByTagName() 标签访问节点

getElementsByClassName() 类名有兼容性问题

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

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

1.6.4 封装自己class类

原理：（核心）

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

结束，分割版本

1.7 判断真假

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

1.8 访问关系

各个节点的相互关系

1.8.1 父节点

父： parentNode 亲的一层

1.8.2 兄弟节点

nextSibling 下一个兄弟亲的 ie 678 认识

nextElementSibling 其他浏览器认识的

previousSibling 同理上一个兄弟

previousElementSibling

我们想要兼容我们可以合写 || 或者

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

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

1.8.3 子节点

firstChild 第一个孩子 ie678

firstElementChild 第一个孩子正常浏览器

var one.firstElementChild || one.firstChild;

lastChild

lastElementChild

1.8.4 孩子节点

childNodes 选出全部的孩子

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（嫡出）

火狐谷歌等高本版会把换行也看做是子节点

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

标签元素

children 重要选取所有的孩子（只有元素节点）

这个更好跟喜欢它。（庶出）

ie 678 包含注释节点这个要避免开。

1.9 dom 的节点操作

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

1.9.1 创建节点

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

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

1.9.2 插入节点

1. appendChild(); 添加孩子 append 添加的意思

意思：添加孩子放到盒子的最后面。

2. insertBefore(插入的节点，参照节点) 子节点添加孩子

写满两个参数

demo.insertBefore(test,childrens[0]);

放到了第一个孩子的前面

如果第二个参数为 null 则默认这新生成的盒子放到最后面。

demo.insertBefore(test,null);

1.9.3 移除节点

removeChild() 孩子节点

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

1.9.4 克隆节点

cloneNode();

复制节点

括号里面可以跟参数，如果里面是 true 深层复制，除了复制本盒子，还复制子节点

如果为 false 浅层复制只复制本节点不复制子节点。