一、三种循环
- for(初始化; 条件; 增量){}
- while(条件) { 语句 } 可能会不执行
- do {} while() 至少执行一次
二、多分支语句
switch(参数)
{
case 参数1：
语句;
break; 退出的意思
case 参数2：
语句;
break; 退出的意思
........
default: 默认的
语句;
}
效率比if else 更高
三、onchange事件
拉菜单的事件 onchange
sele.onchange = function(){}
当下拉内容改变的时候 事件发生
四、数组
1.添加数组
用法例如 arr.push(1)
(1) push()
push() 方法可向数组的末尾添加一个或多个元素，返回新的长度。 push 推进去
var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是 数组的长度 4
(2) unshift() 可向数组的开头添加一个或更多元素，并返回新的长度。
2.删除数组
(1) pop() 删除最后一个元素 返回值 是 返回最后一个值
(2) shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值
3.连接两个数组
contact () arr1.contact(arr2)
4.join() 把数组转换为字符串
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。
数组本身是不会改变的。
arr.join(符号);
var arr = [1,2,3];
console.log(arr.join(“-”)) 结果就是： 1-2-3 //字符串
5.把字符串转换为数组 split()
stringObject.split(separator,howmany)
参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
howmany 可选。该参数可指定返回的数组的最大长度
例：
var txt ="aa-bb-cc";
console.log(txt.split("-")) ;
// 结果是 ["aa","bb","cc"]
// 两处的符号要保持一致
五、DOM
1.我们js 有三部分组成的？
核心（ECMAScript）欧洲计算机制造商协会
描述了JS的语法和基本对象。 var aa var AA 不一样
文档对象模型（DOM） 学习的重点
处理网页内容的方法和接口
浏览器对象模型（BOM） 了解一下
与浏览器交互的方法和接口
window.alert() 有很大的的兼容问题
- DOM
（1）定义：为文档提供结构化显示，定义了如何通过脚本访问文档结构，为了让js操作html而定义的规范。
通过dom来访问的页面中的每一个标签，每个标签都是一个dom对象。
（2）节点
标签标记元素 都是节点
由结构图中我们可以看到，整个文档就是一个文档节点。
每一个HMTL标签都是一个元素节点。
标签中的文字则是文字节点。
标签的属性是属性节点。
一切都是节点……
（3）访问节点
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名 （有兼容性问题，主流浏览器支持 ie 67 8 不认识 解决：自己封装自己的类 。）
3.封装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>
分割：
4.判断真假
数字类型 所有数字都是真，0是假
字符串 所有字符串都是真，’ ’串是假
对象 所有对象都是真，null是假
未定义 undefined是假，没有真
六、访问关系
1.
图片1.png
父节点：parentNode 亲的 一层
<script>
window.onload = function(){
var x = document.getElementById("x");
x.onclick = function(){
this.parentNode.style.display = "none";
// 关掉的是他的 父亲
}
}
</script>
2.兄弟节点
nextSibiling 亲的 下一个兄弟 ie678认识。
nextElementSibling 其他浏览器认识。
previousSibling 亲的 上一个兄弟
previousElementSibling
可以合着写 用 || 必须先写正常浏览器 后写 ie678 。
3.子节点
基本上不用，容易出问题，因为空格也会被当作孩子。
firstChild 第一个孩子 ie678。
firstElementChild 第一个孩子 正常浏览器 。
lastChild
lastElementChild
4.孩子节点
childNodes：选出全部孩子
它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （嫡出）火狐 谷歌等高本版会把换行也看做是子节点。
利用 nodeType == 1 来获取元素节点！！
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
children ：（庶出）常用， 选取所有孩子，只包含元素节点！
在ie678里注释也是节点。
七、dom里的节点操作
1.新建节点
var demo = document.getElementById("demo");
var a = document.createElement("li"); //生成一个新的li标签
2.插入节点
(1) appendChild(); 意思： 添加孩子 放到盒子的最后面。
demo.appendChild("a"); //在demo后添加了一个li标签
(2) insertBefore (插入的节点，参照节点)
demo.insertBefore(test,childrens[0]);
//放到第一个孩子的前面，在第一个孩子前面插入一个节点test
demo.insertBefore(test,null);//如果第二个参数为null 则默认这新生成的盒子放到最后面。
3.删除节点
removeChild() 孩子节点
var da = document.getElementById("xiongda");
demo.removeChild(da);
4.克隆节点
cloneNode();括号里放参数。
如果是true，深层复制：复制盒子和子节点。
如果是false只复制本节点。
var last = chidrens[0].cloneChild(true);
demo.appendChild(last);
网友评论