js（课件2345学习笔记）

js事件函数和属性操作
js选择器和事件函数：
1.js的事件：鼠标事件，键盘事件，系统事件，表单事件，自定义事件等
（1）鼠标左键点击:onclick
（2）鼠标移入：onmouseover
（3）鼠标移出：onmouseout
（4）鼠标左键落下：onmousedown
（5）鼠标左键抬起：onmouseup
（6）鼠标移动：onmousemove
2.获取元素的方法：通过ID名称获取
(1)document.getElementById(‘link’);
3.函数（function）：由事件去命令它做一些事情
元素.事件=function（）{
代码块
}
属性操作：
1.获取的页面中的元素就是对象，例<input id=“btn1” type=“button”/ >属性名：（id和type）
属性值：（btn1和button）
2.元素的内容：元素.innerHTML=“新内容”；
3.元素的值：元素.value=“新内容“；
4.元素的样式：元素.style.样式=“新值”；
5.style[“width”]用“[ ]”的写法，“[]”里可以是变量（如果是属性，必须加双引号；如果是变量不可以加双引号）

js数据类型和判断
关键字，保留字
1.元素.className （正确写法）
2.关键字： function var
3.保留字：class
数据类型：
1.JavaScript中有五种原始数据类型：Undefined（未定义） Null（空对象）Boolean（布尔值） Number（数字） String（字符串） Object（对象）
2.Undefined（未定义）表示一个变量不含值（一般为非人为因素）
3.Null（空对象）通过设置NULL来清空变量（人为设置）
4.Boolean值只有true和flase两个值
5.Number（数字）不分整数和浮点
（1）num+=x；
（2）num-=x；
（3）num++；（先赋值在自增）
（4）num–；
（5）++num；（先自增在赋值）
（6）–num；
6.String字符串用双引号或单引号括起来的部分，“+”可以做字符串的拼接
7.typeof可以判断数据类型
if判断：
1.判断的语法：
（1）if（条件）{代码块}
（2）if（条件）{代码块1} else{代码块2}
（3）if（条件）{代码块1} else if（条件）{代码块2}
2.判断注意事项：
（1）js获取的href和src属性得到的是相对路径而不是绝对路径，因此不能拿来做判断
（2）颜色值也不能拿来做判断
（3）元素的内容innerHTML也不能拿来做判断（低版本浏览器会出现兼容性问题）
（4）布尔值开关做条件解决问题，将布尔值取反，作用是真假转换
（5）判断时的条件需要运算：运算符 ==，<， >， <=， >=

js数组和循环
数组：
1.声明一个数组的变量
（1）var arr1=[];
（2）var arr2=new Array（）；
2.数组是数据仓库，可以通过arr[下标]（从0开始计数）来获取对应位置的数据
var arr=[“第一个数据”，“第二个数据”，“第三个数据”]；
3.数组的添加和修改方法：
arr.push(“第四个数据”)；//从数组最后添加新数据
arr[0]=“第零个数据”；
类数组：
1.用标签名获取元素：
document.getElementsByTagName("");//该方法获得不是一个元素，可以用数组的下标来拿到你想操作的对象。
2.不是数组，类数组（伪数组）可以转换为数组：
Array.prototype.slice.call();//把类数组放在括号里，并用变量接收
3.特殊标签的获取：body： document.body； title：document.tiitle；
html：document.documentElement；
循环：
1.循环可用作给数组或类数组遍历；
2.遍历嵌套的数组，需要用两次for循环来遍历数据；

js流程控制、json和this
1.流程控制语句：循环[do ]while/for[ in]；判断if/switch
2.json
3.for in循环：
（1）json没有长度，无法使用for循环遍历json，而for in循环使用attr就是属性名称对应json的属性名；
（2）for（var attr in json）{ attr+“：”+json[attr]}；

this是什么？
1.全局环境中，this指向window
2.直接调用时，this指向window
3.事件调用函数，内部的this指向调用事件函数的事件对象
4.调用某对象的方法，内部的this指向该对象

课件二练习1：点击一个按钮时，弹出一个变量a(100)的值
课件二练习2：设置css和选择器，页面中设置一个textarea、button和div，在点击button时，将带有class(box)的div元素在页面的div里创建出来 课件二练习3：做一个下拉框效果，鼠标点击按钮时，在该元素下显示一个下拉框区域课件三练习1：将淘宝和杭州保存在两个变量里，然后在控制台里通过变量打印：淘宝在杭州课件三练习2：做一个用两个按钮(加大、缩小)点击改变字体大小的效果课件三练习3：把第2题中的例子改成字体变换范围在12px-28px区间课件三练习4：输入框input的验证，为空时弹出"输入框内容不能为空"课件四练习1：将4张图片的地址写在数组里，并用两个按钮(上一张和下一张)做一个图片无缝切换的效果(第一张图的上一张是第四张，第四张的下一张是第一张图)课件四练习2：在页面中做三个DIV(背景为红色)，我在点击document的时候，将他们的背景同时变成黄色课件四练习3：下面所有的li宽高50背景红色：（1）动态创建50个li每个li向下和右移动一格(楼梯状)；（2）动态创建11个li做一个V字形；（3）动态创建50个li每行显示10个li，每两个li间距1像素
课件五练习1：用循环和continue输出1-20的奇数课件五练习2：把JSON课件中嵌套式的数组和JSON遍历出来 var json = {“a”:[1,2,3],“b”:[4,5,6,7]};课件五练习3：三个背景颜色为红色DIV被点击时，该DIV的背景变成黄色