本次课为JavaScript的最后一次课。我已经教不了你们什么了，祝愿大家早日成神！！！
CSS DOM动态样式
使用JS操作CSS中的各属性。
JS只能操作或修改行内样式。如：imgObj.style.border = “1px solid red”
对于类样式，通过className来赋值。如：imgObj.className = “imgClass”
style对象
每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。
那么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性，一一对应。
因此，style对象用来代替CSS。
如：imgObj.style.border =“1px solid red”;
style对象属性与CSS属性的转换
1） 如果是一个单词，style对象属性，与CSS属性一样。
2） 如果是多个单词，第1单词全小写，后面每个单词首字母大写，并去掉中划线。
i. divObj.style.backgroundColor = “red”;
ii. divObj.style.backgroundImage = “url(images/bg.gfi)”;
iii.divObj.style.fontSize = “18px”;
Event DOM：事件DOM
1、事件简介
事件主要实现“用户与网页的交互”。
当事件发生时，去执行JS功能代码。
当点击图片时(onClick)，将图片放大两倍(JS代码)。
当网页加载完成时("http://p1.pstatp.com/large/b0d0006637b1173f124" alt="JavaScript深入浅出" />
Event对象简介
当事件发生时，向调用函数，传递一个event参数，这个event参数是一个事件对象。
该event对象中记录了当前事件发生的环境信息。如：单击时的坐标、事件类型等。
注意：这个event对象是“短暂”存在的，新的事件发生，新的event对象产生，原来的event对象消失了。
DOM中Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
（1）通过HTML标记的事件属性来传递event对象
在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。
该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数。
（2）使用元素对象的事件属性来传递event对象
2、DOM中Event对象属性
type：当前的事件类型
clientX和clientY：距离窗口左边和上边的距离
pageX和pageY：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离
IE中Event对象
IE中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传参数。如：window.event
IE中Event对象属性
type：事件的类型
clientX和clientY：距离窗口左边和上边的距离。
x和y：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离
实例：点出满天小星星
<html onclick="init(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：点出满天星星
/*
(1)当onclick事件发生时(点击html标记)，去显示一个星星
*/
function init(e)
{
//创建图片
var imgObj = document.createElement("img");
//追加到<body>节点下
document.body.appendChild(imgObj);
//增加src属性
imgObj.src = "images/xingxing.gif";
//增加width属性
var width = getRandom(15,85);
imgObj.width = width;
//增加style属性
var x = e.clientX ? e.clientX : event.clientX;
var y = e.clientY ? e.clientY : event.clientY;
imgObj.style.position = "absolute";
imgObj.style.left = x - width/2 + "px";
imgObj.style.top = y - width/2 + "px";
}
function getRandom(min,max)
{
var random = Math.random()*(max-min)+min;
random = Math.floor(random);
return random;
}
</script>
</head>
<body bgColor="#000">
</body>
综合案例：当当推荐“显示/隐藏”
1、html文件：shopping.html
2、JS文件代码：js/shopping.js
综合案例：“选项卡”切换效果
1、html文件代码：index.html
2、JS文件代码：index.js
综合案例：购物车
1、鼠标放到行上改变背景色，鼠标移出后恢复背景色
<script language="javascript" src="js/shopping.js"></script>
<tr onMouseOver="productOver(this)" onMouseOut="productOut(this)">
2、删除产品(删除表格行)
<tr id="shoppingProduct_01" onMouseOver="productOver(this)" onMouseOut="productOut(this)">
<td><a href="#">私募（首部披秘密的金融...</a></td>
<td>189</td>
<td>￥32.00</td>
<td>￥18.90 (59折)</td>
<td><input onBlur="productCount()" type="text" value="1"></td>
<td><a href="deleteProduct('shoppingProduct_01')">删除</a></td>
</tr>
3、购物车计算
<li id="total">￥626.90</li>
<li>商品金额总计：</li>
<li class="shopping_list_end_4">您共节省：<label id="jiesheng">￥233.70</label><br/>
可获商品积分：<label id="jifen">1740</label></li>
商品统计何时进行？
网页加载完成，进行商品统计。
商品删除时，进行商品统计。
当修改数量时，进行商品统计。
表格对象的属性
一个<table>标记，对应一个table对象。
rows：获取一个表格所有的行构成的数组。
cells：获取一个行中所有单元格构成的数组。
form对象
一个<form>标记，就是一个<form>对象。
1、form对象的属性
name：表单的名称，主要用来让JS来控制表单。
action：表单的数据处理程序(PHP文件)。
method：表单的提交方式，取值：GET、POST
enctype：表单数据的编码方式。
2、form对象的方法
submit()：提交表单，与<input type = “submit” />功能一样。
reset()：重置表单，与重置按钮功能一样。
3、form对象的事件
onsubmit：当单击提交按钮时发生，并数据发往服务器之前发生。主要用来“在表单提交之前进行表单验证”。
onreset：当单击重置按钮时发生(了解)。
获取表单元素的
通过网页元素的id来获取对象。document.getElementById(id)
通过HTML标签名来获取对象。parentNode.getElementsByTagName(tagName)
通过name属性来获取表单元素对象。表单中所有元素的起点都必须是document对象。
语法：document.formObj.elementObj
访问方式是三层结构。其中，formObj代表表单对象，elementObj代表表单元素对象。
举例：document.form1.username.value.length
事件返回值
事件的返回值，会影响对象的默认动作。如：<a>标记的默认动作是打开一个网址。
如果事件返回false，则阻止默认动作的执行；如果事件返回true或空，则默认动作继续执行。
受返回值影响的事件有两个：onclick、onsubmit。
提交和验证方法总结
1、使用submit按钮，结合onsubmit事件来实现(最常用)
2、submit按钮，结合onclick事件，实现表单的验证和提交
3、button按钮(普通按钮)，结合submit()方法，实现表单验证提交
<script type="text/javascript">
function checkForm()
{
if(document.form1.username.value.length == 0)
{
//如果用户名为空
window.alert("用户名不能为空！");
}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
{
//如果用户名长度小于5或大于20
window.alert("用户名只能介于5-20个字符！");
}else if(checkOtherChar(document.form1.username.value))
{
//如果用户名含有特殊符号
window.alert("用户名中含有特殊符号！");
}else
{
//如果验证通过，提交表单
window.alert("验证通过！");
//表单提交方法
document.form1.submit();
}
}
function checkOtherChar(str)
{
//定义一个特殊符号的数组
var arr = ["*","&","<",">","$","\","/"];
//循环比较：数组中的每一个字符，与用户名每一个字符进行比对
for(var i=0;i<arr.length;i++)
{
for(var j=0;j<str.length;j++)
{
if(arr[i]==str.charAt(j))
{
return true;
}
}
}
//如果没找到
return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="button" value="提交按钮" onclick="checkForm()" />
</form>
input对象
一个<input>标记，就是一个input对象。
1、input对象的属性(以type=text为例)
name：表单元素的名称。
value：表单元素的值，用户输入的内容，可以通过该属性来获取。
size：表单的长度。
maxlength：表单元素的最大长度(最多可输的字符数)。
disabled：禁用属性。
readonly：只读属性。
2、input对象的方法
focus()：获得焦点的方法(定位光标)。
blur()：失去焦点的方法(移走光标)。
select()：选中文本的方法。
3、input对象的事件
onfocus：当获得焦点时
onblur：当失去焦点时
综合实例：表单验证
select对象
一个<select>标记，对应一个select对象。
select对象属性
options[]：设置或返回下拉列表中<option>标记构成的数组。
selectedIndex：设置或选中指定<option>的索引号。
length：指定下拉列表中<option>标记的个数。
name：元素名称。
option对象
一个<option>标记，对应一个option对象。
option对象属性
text：指<option>和</option>之间的文本。
value：是指<option>标记的属性。
综合实例：二级联动菜单
（1）二级菜单初始化
当网页加载完成，将arr_province中的数据写入到name=province下拉列表中。
name=city下拉列表数据，要根据name=province列表的默认选择(selectedIndex)而改变。
（2）根据name=province的选择，来改变name=city中的内容
当改变时，获取选择中的省份的索引值。
城市列表，会根据传递过来的索引值，请取对应的二维数组中的数据，并写入city列表中。
代码如下：
<script type="text/javascript">
var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];
var arr_city = [
["请选择城市/地区"],
["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']
];
//网页加载完成，初始化二级菜单
window. init; //传地址，不带括号
function init()
{
//获取name=province和name=city的对象
var province = document.form1.province;
var city = document.form1.city;
//指定省份下拉中<option>标记的个数
province.length = arr_province.length;
//循环将arr_province中的数据写入到<option>标记中
for(var i=0;i<arr_province.length;i++)
{
province.options[i].text = arr_province[i];
province.options[i].value = arr_province[i];
}
//修改省份列表中默认选择项
var index = 0;
province.selectedIndex = index;
//指定城市下拉中<option>标记的个数
city.length = arr_city[index].length;
//循环将arr_city中对应的数据写入到<option>标记中
for(var j=0;j<arr_city[index].length;j++)
{
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
}
function changeSelect(index)
{
//获取name=city的对象
var city = document.form1.city;
//指定城市下拉中<option>标记的个数
city.length = arr_city[index].length;
//循环将arr_city中对应的数据写入到<option>标记中
for(var j=0;j<arr_city[index].length;j++)
{
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
省份：<select name="province" onchange="changeSelect(this.selectedIndex)"></select>
城市：<select name="city"></select>
</form>
相关源代码：http://pan.baidu.com/s/1o8nfWqY 密码：c8a0
注意：本文归作者所有，未经作者允许，不得转载
