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代码)。
当网页加载完成时(onLoad)，弹出一个小窗口。
当鼠标放到滚动文本上时(onMouseOver)，文本停滞滚动。
当向下拖动滚动条时(onscroll)，文本向上滚动。
……
2、常用事宜
onload：当网页加载完成时。只能给<body>用。
onclick：当点击时，所有标记都适用。
onscroll：当拖动滚动条时
onmouseover：当鼠标放上时
onmouseout：当鼠标移开时
onsubmit：当提交表单时
onreset：当重置表单时
onfocus：当得到焦点时，把光标定位到文本框中。
onblur：当失落去焦点时，把光标从文本框中移开。
onchange：当下拉列表内容改变时。用不才拉列表、上传文件。
onselect：当选中文本时。
onresize：当改变窗口大小时，发生的事宜。
……
3、事宜句柄属性
HTML标记，都有相应的事宜属性。
每一个HTML标记，都对应一个元素工具。元素工具也具有相应的事宜属性。
但是，元素工具的事宜属性该当是全小写。
事宜属性后面调用的一样平常是JS函数，通过JS函数来完成相应的功能。
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=\"大众javascript: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.onload = 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
