JS
今日任务
- 使用JS完成页面定时弹出广告
- 使用JS完成表单的校验
- 使用JS完成表格的隔行换色
- 使用JS完成复选框的全选效果
- 使用JS完成省市联动效果
教学导航
|
教学目标 |
掌握JS中的BOM对象 掌握JS中的常用的事件 掌握JS中的常用DOM操作 了解JS中的内置对象 |
|
教学方法 |
案例驱动法 |
1.1 使用JS定时弹出广告
1.1.1 需求分析：
在浏览网站的时候，通常会5秒左右在顶部显示一个广告。过了5秒钟将这个广告隐藏。在网站的首页上显示这个广告。
1.1.2 分析：
1.1.2.1 技术分析：
【JS的定时操作】
setInterval();
setTimeout();
clearInterval();
clearTimeout();
【CSS控制显示和隐藏的属性】
display:
l block :显示的
l none :隐藏的
1.1.2.2 步骤分析：
- 步骤一：确定事件：onload.
- 步骤二：在函数中设置定时的操作.5秒显示这个div.
- 步骤三：清除原来的定时，重新设置一个定时操作.5秒以后隐藏掉.
- 步骤四：设置5秒后隐藏的定时，可以清除.
1.1.3 代码实现：
<script>
var time;
function init(){
// 设置定时操作：
time = setInterval("showAd()",5000);
}
function showAd(){
// 获得div元素
var divAd = document.getElementById("divAd");
divAd.style.display = "block";
// 清除之前的定时操作：
clearInterval(time);
// 重新设置一个定时：5秒钟隐藏：
time = setInterval("hideAd()",5000);
}
function hideAd(){
// 获得div元素
var divAd = document.getElementById("divAd");
divAd.style.display="none";
clearInterval(time);
}
</script>
1.1.4 总结：
1.1.4.1 扩展内容
【JS的引入的方式】
- 内部的JS
使用<script>标签
- 外部的JS
创建一个.js的文件
使用<script src="ad.js"></script>
【BOM中的对象】
l Window对象：浏览器最顶层的对象.
l Navigator：
l Screen
l History
l Location
1.2 使用JS完成表单的校验
1.2.1 需求分析：
之前已经完成了一个表单校验，弹出提示框的形式。用户的体验不是特别的好。现在当鼠标点到文本框的时候，在文本框的后面给我们一段提示.当光标离开的时候完成校验.将信息写到文本框的后面的位置而不是提示框的形式。
1.2.2 分析：
1.2.2.1 技术分析：
【JS中的事件】
之前使用的事件：
onclick：
onsubmit：
onload：
使用：
onfocus ：获得焦点
onblur ：失去焦点
【JS控制向HTML的某个元素中写入内容】
document.getElementById(“”).innerHTML = “”;
1.2.2.2 步骤分析
- 确定事件：获得焦点和失去焦点
- 定义函数，在函数中进行校验
- 将校验的内容写入到文本框后面的<span>元素
1.2.3 代码实现：
<script>
function showTips(uid,info){
// 控制后面的span元素：
document.getElementById(uid+"span").innerHTML = "<font color='gray'>"+info+"</font>";
}
function checkUsername(uid,info){
// 判断用户名是否为""
var uValue = document.getElementById(uid).value;
if(uValue == ""){
document.getElementById(uid+"span").innerHTML = "<font color='red'>"+info+"</font>";
}else{
document.getElementById(uid+"span").innerHTML = "";
}
}
</script>
1.2.4 总结：
1.2.4.1 JS的事件的总结：
onchange ：下拉列表上
ondblclick ：双击
onkeydown ：键盘按下
onkeyup ：键盘抬起
onmouseover ：鼠标在上面
onmouseout ：鼠标离开
onmousemove ：鼠标移动
需求：表格鼠标放上显示一个颜色，鼠标离开样式没有了！
<script>
function changeColor(tid,flag){
if(flag == 'over'){
var tid = document.getElementById(tid);
tid.style.backgroundColor="gold";
}else if(flag == 'out'){
var tid = document.getElementById(tid);
tid.style.backgroundColor="white";
}
}
</script>
1.3 使用JS控制表格的隔行换色
1.3.1 需求
在网站的后台的表格页面中让表格显示出隔行换色的效果：
1.3.2 分析：
1.3.2.1 技术分析
【使用JS控制表格】
var tab1 = Document.getElementById(“tab1”);
var rows = tab1.rows.length;
for(){
if(i % 2 == 0){
}
}
1.3.2.2 步骤分析：
- 步骤一：确定事件：onload事件
- 步骤二：获得表格元素
- 步骤三：获得表格的所有行的长度
- 步骤四：遍历表格的所有行
- 步骤五：使用下标对2取余
- 步骤六：设置奇数行和偶数行的颜色。
1.3.3 代码实现：
<script>
window.onload = function(){
// 获得表格元素：
var tab1 = document.getElementById("tab1");
// 获得表格的所有的行数：
var len = tab1.rows.length;
// 遍历所有的长度
for(var i=0;i<len;i++){
// 判断是奇数行还是偶数行：
if(i % 2 == 0){
tab1.rows[i].style.backgroundColor = "#33FF22";
}else{
tab1.rows[i].style.backgroundColor = "#883311";
}
}
}
</script>
1.3.4 总结：
表格隔行换色的时候，将最上一行也换掉了。第一行往往不需要进行换色的。
<table>
<thead>
<tr>
<th></th>
<tr>
</thead>
<tbody>
<tr>
<td></td>
<tr>
</tbody>
</table>
代码实现：
window.onload = function(){
// 获得表格元素：
var tab1 = document.getElementById("tab1");
// 查找表格中tbody中的所有的行数。
var len = tab1.tBodies[0].rows.length;
for(var i = 0 ;i<len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows[i].style.backgroundColor="green";
}else{
tab1.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
1.4 使用JS控制复选框的全选和全不选的效果
1.4.1 需求的分析：
在后台管理页面中，往往会有批量删除数据的效果，就需要有复选框全选和全部选的效果。
1.4.2 分析：
1.4.2.1 步骤分析：
- 步骤一：确定事件：单击事件
- 步骤二：获得下面的所有的复选框
- 步骤三：如果上面的复选框被选中，将下面的所有的复选框选中状态变为checked=true.
- 步骤四：如果上面的复选框没被选中，将下面的所有的复选框选中状态变为checked=false.
1.4.3 代码实现：
function selectAll(){
// alert("aaa");
// 获得上面的复选框：
var sAll = document.getElementById("selectAll");
if(sAll.checked == true){
// 上面的复选框被选中
// 将下面的所有的复选框都被选中。
var selectOnes = document.getElementsByName("selectOne");
// 遍历数组中的每个元素，让每个元素都被选中：
for(var i = 0;i<selectOnes.length;i++){
selectOnes[i].checked = true;
}
}else{
// 上面的复选框被选中
// 将下面的所有的复选框都被选中。
var selectOnes = document.getElementsByName("selectOne");
// 遍历数组中的每个元素，让每个元素都被选中：
for(var i = 0;i<selectOnes.length;i++){
selectOnes[i].checked = false;
}
}
}
1.4.4 总结：
1.4.4.1 DOM的操作：
DOM：Document Object Model 文档对象模型.
l 将HTML文档装载到内存,将HTML文档形成一个DOM的树形结构.
Document:文档对象.代表的是加载到内存中的整个的文档.
方法：
l document.getElementById(“”);
l document.getElementsByName(“”);
l document.getElementsByTagName(“”);
l document.createElement(“”);
Element:元素对象.代表文档中的每个元素（标签）
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
属性：
l firstChild：获得其第一个孩子节点
l lastChild：获得其最后一个子节点
方法：
l appendChild();将节点添加到当前节点的最后.
l insertBefore();将节点添加到某个元素之前.
Attribute:属性对象.代表元素上的属性.
Document,Element,Attribute统称为Node（节点）
1.5 JS控制二级联动：
1.5.1 需求：
在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出.
1.5.2 分析：
1.5.2.1 技术分析：
【DOM创建元素】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function addEl(){
// 创建元素：
var liEl = document.createElement("li");// <li></li>
// 创建文本节点:
var textEl = document.createTextNode("广州");// 广州
// 将文本放入到li元素:
liEl.appendChild(textEl);// <li>广州</li>
// 获得ul元素:
var ulEl = document.getElementById("ul1");
// 将li放入到ul
ulEl.appendChild(liEl);
}
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<input type="button" value="点击" onclick="addEl()"/>
</body>
</html>
【数组对象的使用】
创建数组：
数组的属性：
数组的方法：
1.5.2.2 步骤分析：
- 步骤一：确定事件：onchange.
- 步骤二：获得改变的省份值 .
- 步骤三：比较省份的值 与 数组中定义的值是否相等，如果相等获得这个省份对应的所有的市的数组.
- 步骤四：创建option元素，将数组中的值添加到option元素中。
- 步骤五：将option添加到第二个下拉列表中.
1.5.3 代码实现：
// 定义二维数组:
var cities = new Array(4);
cities[0] = new Array("长春市","吉林市","松原市","延边市");
cities[1] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[2] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[3] = new Array("南京市","苏州市","扬州市","无锡市");
function selectCity(val){
// alert(val);
var citySel = document.getElementById("city");
// 清除原有的option:
citySel.options.length = 0;
// 遍历数组：
for(var i=0;i<cities.length;i++){
if(val == i){
// 遍历数组：
for(var j = 0 ;j<cities[i].length;j++){
// alert(cities[i][j]);
// 创建option元素：
var opEl = document.createElement("option");
// 创建文本元素：
var textNo = document.createTextNode(cities[i][j]);
// 将文本添加到option中．
opEl.appendChild(textNo);
// 将option添加到第二个下拉列表中
citySel.appendChild(opEl);
}
}
}
}
1.5.4 总结：
查看文档了解方法：
全局函数：
parseInt(); 将字符串转出整型
parseFloat(); 将字符串转成小数
encodeURI()
decodeURI()
encodeURIComponent()
decodeURIComponent()
eval() :将一段字符串当成一个JS的代码来运行.
1.6 JS控制下拉列表左右选择：
1.6.1 需求：
有两个列表，需要将左侧列表中的数据添加到右侧的列表中：
1.6.2 分析：
1.6.2.1 步骤分析：
- 单击事件：
- 编写函数：获得左侧的下拉列表.
- 遍历左侧列表中的所有的option元素.判断是否被选中。
- 如果被选中添加到右侧.
- 单击事件：
- 编写函数：获得左侧的下拉列表.
- 遍历左侧的列表中的所有的option.
- 全部添加到右侧.