1.我学了什么

1.事件(event)

JavaScript与HTML之间的交互式通过事件实现的
onclick
onfocus
onblur
onmouseover  //鼠标移到某元素之上
onmouseout  //鼠标从某元素移开

//有事件一定有对应一个处理结果，用函数表示

2.条件判断

1.条件判断
var age = 20;
if (age >= 18) { // 如果age >= 18为true，则执行if语句块
    alert('成年人');
} else { // 否则执行else语句块
    alert('未成年人');
}

多行条件判断
var age = 3;
if (age >= 18) {
    alert('成年人');
} else if (age >= 6) {
    alert('少年');
} else {
    alert('小孩');
}

switch结构
多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。
var x = 1;

    switch (x) {
        case 1:
            console.log('x 等于1');
            break;
        case 2:
            console.log('x 等于2');
            break;
        default:
            console.log('x 等于其他值');
    }

3.循环

循环语句
while(){}
eg:
var a=0;
    while(a<=10){
        //只要a<=10为true就一直循环
        console.log(a);
        a++;
    }

for循环
eg:
 for(var i=0;i<=10;i++){
        console.log(i)
    }

for...in...

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    alert(key); // 'name', 'age', 'city'
}

4.拓展DOM

4.1父节点parentNode(亲爹)
<ul>
    <li>苹果<a href="#">隐藏</a></li>
    <li>梨子<a href="#">隐藏</a></li>
    <li>香蕉<a href="#">隐藏</a></li>
    <li>菠萝<a href="#">隐藏</a></li>
</ul>
//JS
var aTags = document.getElementsByTagName("a");
for(var i =0;i<aTags.length;i++){
      aTags[i].onclick=function () {
          this.parentNode.style.display="none";
          return false;
      }
}

4.2子节点childNodes和children的区别

//HTML
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
//JS
var test = document.getElementById("test");
alert(test.childNodes.length);  //chrome下结果为7,IE9以下结果为3
//在chrome下将空的文本节点,也算在内容

var test = document.getElementById("test");
var childs =test.childNodes;
for(key in childs){
   if(childs[key].nodeType==1){
        childs[key].style.background="red";
    }
}

firstChild  //第一个节点
firstElementChild  //第一个元素节点
lastChild  //后一个节点
lastElementChild  //后一个元素节点

4.3兄弟节点
nextSibling
nextElementSibling  
previousSibling
previousElementSibling