[TOC]
课程内容回顾
什么是JavaScript，有几个部分组成
脚本语言，浏览器，ECMAScript BOM DOMJavaScript数据类型和语法
Number，string，Boolean，undefined ，nullJavaScript开发步骤
绑定事件，实现函数，获取标签操作权JavaScript实现表单校验
onsubmitJavaScript实现图片轮播
onloadBom对象
window ：alert confirm prompt settimeout setInterval，cleartimeout clearinterval
navigator
screen
location href
history
今日重点
- ==Javascript中的事件==
- ==DOM模型==
- JavaScript中内置对象
要求： 完成表单验证+复选框全选
01- 案例三：使用JS完成表单的提示和校验：需求和分析
总结：
- 事件 onblur/onfocus/onsubmit
Onblur: 失去焦点的时候会触发
Onfocus ：获得焦点
Onsubmit：表单提交 - 定义函数 function
- 修改标签体中的内容
元素.innerHTML
02- 案例三：使用JS完成表单的提示和校验：代码实现
- Span标签：输入提示信息
<span id=”sp”></span> - 设置事件
<input onblur=”check()”></input> -
Function check(){…..}函数功能：校验，输出到span - 获得输入框的内容，获得标签
document.getElementById(“sp”).value - 添加提示内容：
.innerHTML
总结：onfocus,onblur写在input标签上，onsubmit写在form标签上
03-案例三：使用JS完成表单的提示和校验：总结：JS的常用事件
总结：
- onsubmit :提交表单
- onload： 页面加载完执行
- onclick： 按钮点击
- onfocus： 获取焦点
- onblur： 失去焦点
- ondblclick: 双击事件
键盘操作事件:
- onkeydown:
- onkeyup :
- onkeypress:
鼠标操作事件：
- onmousemove： 鼠标移动
- onmouseout： 鼠标移出
- onmouseover：鼠标移入
案例总结：
用了三个事件：onfocus,onblur,onsubmit
用了一个函数：document.getElementById(ID)
用了一个属性：.innerHTML = “”;
04-案例四：使用JS完成表格隔行换色：需求和分析
1.【步骤一】创建一个HTML页面：可以使用后台设计页面.
2.【步骤二】确定事件：onload事件.
3.【步骤三】触发一个函数.在这个函数中获得操作的表格.
4.【步骤四】获得表格中的所有的行数.
表格对象.rows.length 获得总行数
5.【步骤五】遍历表格的行数.
表格对象.rows 下标从0开始
6.【步骤六】判断是否是奇数行还是偶数行.
05-案例四：使用JS完成表格隔行换色：代码实现
- 获得表格
Document.getElementById() - 总行数
tab1.rows.length; - for …. 获得奇数行，偶数行
for(var i =0;i<length;i++){ if(i%2==0){ … 红色 document.getElementByID(“trow”).style.backgroudColor=”red”; }else{ .. 蓝色 } } <table> <tr style=”css代码”> </tr> </table> - 修改对应行的CSS .style属性
.style.backgroundColor (CSS background-color)
06-案例四：使用JS完成表格隔行换色：总结
-
<thead>
tr<th>居中，加粗显示</th>
</thead> -
<tbody>
tr td
</tbody>
07-案例五：使用JS完成复选框的全选和全不选：需求和分析
1.【步骤一】创建一个HTML页面.
2.【步骤二】确定事件：复选框的单击事件.
3.【步骤三】触发一个函数
4.【步骤四】在函数中,获得上面的复选框是否被选中.
5.【步骤五】如果选中,下面的所有的复选框都被选中.
6.【步骤六】如果不选中,下面的所有的复选框都不选中.
08-案例五：使用JS完成复选框的全选和全不选：代码实现
- 复选框的单击事件.
<input id=”sel” type=”checkbox” onclick=”selectAll()”><input> - 定义函数，判断是否选中
function selectAll(){ var flag = document.getElementById(“sel”).checked; if(flag){ //选中 //选择下面所有checkbox //input name=”name1” var arr = document.getElementsByName(“”) //选中所有的checkbox for(循环数组){ arr[i].checked = “true”; }else{ //选择下面所有checkbox //input name=”name1” var arr = document.getElementsByName(“”) //选中所有的checkbox for(循环数组){ arr[i].checked = “false”; } } - 定义函数，判断是否选中
function selectAll(){ var flag = document.getElementById(“sel”).checked; //选中 //选择下面所有checkbox //input name=”name1” var arr = document.getElementsByName(“”) //选中所有的checkbox for(循环数组){ arr[i].checked = flag; } }
09-案例五：使用JS完成复选框的全选和全不选：总结：JS的DOM概述及常用操作
- DOM的概念
图一 DOM模型的概述.bmp - 常用的API(html文档的增删改查)
- 获得元素：
- document.getElementById(); -- 通过ID获得元素.
- document.getElementsByName(); -- 通过name属性获得元素.
- document.getElementsByTagName(); -- 通过标签名获得元素.
- 创建元素：
- document.createElement(“标签名称”); -- 创建元素
- document.createTextNode("文本"); -- 创建文本
- 添加节点：
- element.appendChild(newItem); -- 在最后添加一个节点.
- element.insertBeforeinsertBefore(newItem,existingItem); -- 在某个元素之前插入.
- 删除节点：
- element.removeChild(existingItem); -- 删除元素
总结：
document对象是HTML文档对应的内存对象
Element： 所有的标签对象
Attribute：所有的属性对象
10-案例五：使用JS完成复选框的全选和全不选：总结：DOM的添加元素的操作
- 获得UL标签
document.getElementById(“”) - 创建LI标签节点
liEle = document.createElement(“”) - 创建一个文本节点
textNode = document.createTextNode(“”); - 将文本节点追加到LI标签中，将LI标签追加到UL末尾
liEle.appendChild(textNode);
11-案例六：使用JS完成省市联动的效果：需求和分析
- 【步骤一】创建一个HTML文件.
2.【步骤二】确定事件：onchange事件.
3.【步骤三】触发函数,在函数中编写代码.
4.【步骤四】获得到所选择的省份的信息.
获得被选中的option值 this.value
5.【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据.
二维数组实现
var arr = new Array(5);
arr[0]=[1,2,3];
arr[1]=[4,5,6];
…….
6.【步骤六】遍历数组中的市的信息.
7.【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中.
12-案例六：使用JS完成省市联动的效果：代码实现
function changeCity(value){
// 获得到选中的省份的信息.
var city = document.getElementById("city");
// 清除第二个列表中的内容:
for(var i=city.options.length;i>0;i--){
city.options[i] = null;
}
// city.options.length = 0;
//循环获得第一个select中的所有省份
for(var i= 0 ;i< arrs.length;i++){
//挑选出被选中的省份对应的城市数组
if(value == i){
// 获得该省份所有的市的信息.
for(var j=0;j<arrs[i].length;j++){
// 创建option元素：
document.createElement(“option”)
//创建文本节点
document.createTextNode((arrs[i][j]))
// 将文本的内容添加到option元素中.
opEl.appendChild(textNode);
// 将option的元素添加到第二个列表中.
city.appendChild(opEl);
}
}
}
}
***优化代码：
技术分析：
1. 下拉列表对象.selectedIndex
2. 加强for循环
for (i in citys) {
citys[i]//注意：i为下标
}
13-案例六：使用JS完成省市联动的效果：总结：JS的内置对象
重点掌握：
// Array 创建：
new Array(长度);
var arr = [1,2,3,4];
arr = [1,2,3,”aaaa”];
// 数组API：
reverse() 反转
// String对象API：
// 对比Java的String类进行学习
substr(开始位置，长度) “abcdef”.substr(2,3) = “cde”
14-案例六：使用JS完成省市联动的效果：总结：JS的全局函数
// 将字符串转换成数字
parseInt(“123”) isNaN
// 将字符串转换成浮点数
parseFloat(“”)
// eval函数：
// 将一段内容当成是JS的代码执行.
var sss = “alert(‘aaaa’)”;
eval(sss);
总结：
-
JS事件
==onclick 点击事件==
==ondblclick双击事件==
==onload 页面加载==
==onsubmit 表单提交事件==
==onchange 下拉列表改变==
==onfocus 获得焦点==
==onblur 失去焦点==鼠标相关
onmouseover 鼠标移入
onmouseout 鼠标移出
onmousemove 鼠标移动
键盘相关
onkeypress 键盘按键事件
总结：事件是JS程序的入口 -
JS的DOM模型
什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
==document对象：表示文档在内存中的树状图==
==Element 对象：表示所有的标签==
==Attribute对象：标签中的所有的属性==
HTML文档中一切皆Node（节点）
常用的API:- 获得元素
document.getElementById() 通过ID获得标签
document.getElementsByName() 通过name属性获得一组标签
document.getElementsByTagName() 通过标签名称获得一组标签 - 创建元素
document.createElement(名字)
document.createTextNode(文字) - 添加元素
父标签.appendChild(子标签)
element.insertBefore(新标签,之前的标签) 某个标签前添加新标签 - 删除元素
父标签.removeChild(子标签)
- 获得元素
-
内置对象
Array 数组
数组定义
var arr = new Array(length)
var arr = [];
特点：js数组长度可变并且类型不固定
arr = [1,2,3,”aaaa”];
String 类似Java全局函数 parseInt(“”) 将字符串转换成整数 parseFloat(“”) 将字符串转换成数字 eval(“JS代码”);
