前端入门到熟悉day16

笔记
1.根据设计稿布局（h5+css+css3）
2.写插件 写动画效果
3.写交互 写逻辑（js jquery 三大框）

先给js下很简单那的定义
html h5 css css3 只能去做我们的静态页面（无任何动态数据和交互逻辑）
动态页面（数据是动态的 活的 用js去获取数据 再处理数据 渲染到页面 再做交互 根据需求文档实现）

内容（html） 表现（css） 行为（js）

MVC（jq） MvvM（三大框架）
01第一个js效果

为了您的安全

02函数更加复杂的东西

03网页换肤

（引一条就行）

04改文字

05函数的定义和调用
alert是HTML DOM 中用到的一种脚本语言，它的中文意思是“提醒”。它是JavaScript或VBscript脚本语言中窗口window对象的一个常用方法；其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。

06控制显示隐藏

07a链接添加js
链接

08className使用

09div变色

10函数传参

11div改变样式

12操作属性的第二种方法

13style和className

14提取行间事件

15提取行间事件2

16getElementsByTagName
getElementsByTagName是一个JavaScript函数，功能是通过查找整个 HTML 文档中的任何 HTML 元素，传回指定名称的元素集合。

//数组添加样式的方法
// aDiv[0].style.backgroundColor=‘red’;
// aDiv[1].style.backgroundColor=‘red’;
// aDiv[2].style.backgroundColor=‘red’;
// aDiv[3].style.backgroundColor=‘red’;
// aDiv[4].style.backgroundColor=‘red’;

//for循环的方法添加样式
for(var i=0;i<aDiv.length;i++){
aDiv[i].style.backgroundColor=‘red’;
}
}

17全选全不选反选

oBtn2.οnclick=function(){
for(var j=0;j<aCh.length;j++){
aCh[j].checked=false;
}
}

oBtn3.οnclick=function(){
for(var k=0;k<aCh.length;k++){
if(aCh[k].checked==true){
aCh[k].checked=false;
}else{
aCh[k].checked=true;
}
}
}
}

18tab切换

111111

22222

333333

444444

for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].οnclick=function(){
for(var i=0;i<aBtn.length;i++){
aDiv[i].style.display=‘none’;
aBtn[i].className=’’;
}
this.className=‘active’; //this指向的是按钮 指向的是当前发生事件的对象
aDiv[this.index].style.display=‘block’;
}
}
}