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
