标签：des winform style http java color
课前说明：
内容：使用JavaScript操作Dom进行DHTML开发
。
目标：能够使用JavaScript操作Dom实现常见的DHTML效果。
参考书：张孝祥《JavaScript网页开发----体验式学习教程》
2.Dom简介2.avi
DOM就是html页面的模型，将每个标签都做为一个对象，javaScript通过调用Dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的Dom对象，就可以读取文本框中的值、设置文本框中的值。
javascript->Dom就是C#->.Net Framwork.
DOM也像WinForm一样，通过事件、属性、方法进行编程。
CSS+javaScript+Dom=DHTML
3.Dom事件1.avi
事件
事件：<body onmousedown="alert("哈哈")>当点击鼠标的时候执行onmousedown中的代码。有时事件响应的代码太多，就放到单独的函数中：
<script type="text/javascript">
function bodymousedown(){
alert("网页被点坏了，赔吧！！");
alert("逗你玩的！！！");
}
</script>
<body onmousedown="bodymousedown()">
bodymousedown后的括号不能丢，因为表示调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown.
4.Dom事件2.avi;
动态设置事件
可以在代码中动态设置事件响应函数，就像.net中btn.click+=一样
function f1(){
alert("1");
}
function f2(){
alert("2");
}
<input type="button" onclick="document.ondblclick=f1"
value ="关联事件1"/>//注意f1不要加括号。
<input type="button" onclick="document.ondblclick=f2"
value="关联事件2"/>
5.window对象1.avi
window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window,比如window.alert(‘a‘)可以省略成alert(‘aa‘).
(1)alert方法，弹出消息对话框
(2)confirm方法，显示"确定"、“取消”对话框，如果按了【确定】按钮，就返回true,否则就false
if(confirm("是否继续?")){
alert("确定");
}
else {
alert("取消");
}
window对象2
（3）重新导航到指定的地址:navigate("http://www.repen.com");
(4)setInterval每个一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。
setInterval("alert(‘hello‘)",5000);
(5)clearinterval取消setInterval的定时执行，相当于Timer中的Enabled=False.因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识,setlnterval的返回值。
var intervalld=setInterval("alert(‘hello‘)",5000);
clearlnterval(intervalld);
<input type="button" value="滚动" onclick="setInterval(‘scroll()‘,500)"/>
每调用一次senInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像"越跑越快"!!!
clearInterval(setInterval("scroll()",500),错，不会停止原先的定时器。因为setInterval就产生一个新的定时器，刚产生就被clear.了。
还有一点不太理解？？？？？？？？？？？
window对象3
（6）setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval:间隔；timeout:超时。
var timeoutld=setTimeout("alert(‘hello‘)",2000);
案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下。提示：标题为document.title属性。实现代码参考备注。
练习：点击【向左】按钮就向左连续滚动，点击【向右】按钮就向右连续滚动。
1.全局变量，标志当前的滚动方向，当点击向左的时候 dir="left",向右dir="right".
2.scrollleft scrollright,向右滚动的时候将scrollleft的Interval clear掉，然后setInterval启动scrollright.
8.Dom事件1.avi
body、document对象的事件
（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到onload事件中，或者可以把javaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成时触发。
（2）onunload：网页关闭（或者离开）后触发。
（3）onbeforeunload：在网页准备关闭（或者离开）后触发。在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息<body onbeforeunload="window.event returnValue="
真的要放弃发帖退出吗？">
9.Dom事件2.avi
其他事件
除了有特有的属性之外，当然还有通用的HTML元素的事件：
onclick（单击）、ondbclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、
onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。
10.Dom属性1.avi
window.location.href=‘http:www.itcast.cn‘,重新导向新的地址，和navigate方法效果一样，window.location.reload()刷新页面。
window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg)
altKey属性，bool类型，表示发生事件的alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子<input type="button" value="点击" onclick="if(event.altKey){alert(‘Alt点击‘)}else {alert(‘普通点击‘)}"/>;
clientX、clientY发生事件的鼠标在客户区的坐标：screenX
、screenY发生事件的鼠标在屏幕上的坐标：offsetX、offsetY
发生事件的鼠标相对于事件源（比如点击按钮时触发onclick）的
坐标。
returnValue属性，如果将returnValue设置为false,就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器。
srcElement,获得事件源对象
keyCode,发生事件时的按键值。
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按
<body onmousedown="if(event button==2){alert(‘禁止复制‘);}">
头部标签
<meta>标签，<meta>有指定name和指定http-equiv两种用法，
<meta name="名字" content="值"/>,<meta http-equiv="名字" content="值"/>两种用法。
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8"/>指定网页编码
<meta http-equiv="Refresh" content="3"/>三秒钟后刷新此网页。
<meta http-equiv="Refresh"
content="3;url=http://www.rupeng.com"/>三秒钟后重定向到新网页。发帖成功后提示"发帖成功，即将转向帖子查看页面".
<meta http-equiv="Cache-Control" content="no-cache"/>禁止浏览器缓存页面。
13.Dom属性2.avi
（*）screen对象，屏幕的信息
alert("分辨率："+screen.width+"*"+screen.height);
if(screen.width<1024||screen.height<768){
alert("分辨率太低!");
}
clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val),设置粘贴板中的值。
案例：复制地址给好友。见备注。
当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert(‘禁止复制！！‘);return false;"
很多元素也有oncopy、onpaste方法：
案例：禁止粘贴账号。见备注。
14.粘贴板处理.avi
window对象的属性3
在网站中复制文章的时候，为了防止那些拷贝当不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard(){
clipboardData.setData(‘Text‘,clipboardData.GetData(‘Text‘)+‘文本来自传智播客技术专区，转载请注明来源。‘+location.href);
}
oncopy="setTimeout(‘modifyClipboard()‘,100)".用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、200......都行
不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不在oncopy的执行调用栈上了。
15.前进后退导航.avi
window对象的属性4
history操作历史记录
window.history.back()后退；window.history.forward()
前进。也可以用window.history.go(-1)/window.history.go(1)前进
document属性。是最复杂的属性之一。后面讲解详细使用
16.document.write应用.avi
document属性1
document是window对象的一个属性，因为使用window对象成员的时候可以省略window，所以一般直接写doucument
document的方法：
（1）write:向文档中写入内容。writeln,和write差不多，只不过最后添加一个回车
<input type="button" value="点击" onclick="document.write(‘<font color=red>你好</font>‘)"
/>
在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
<script type="text/javascript">
document.write(‘<font color=red>你好</font>‘);
</script>
write经常在广告代码、整合资源代码中被使用。见备注
内容联盟、广告代码、不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。
http://heima8.com/ 广告联盟网站
如鹏网 CNZZ 密码：123456
计算机传智播客
CNZZ
17.getElementById.avi
(2)getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
(3)(*)getElementByName,根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementByTagName,获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的<p>标签。
案例：加法计算器。
案例：十秒钟后协议文本框下的注册按钮才能点击。时钟倒数。(btn.disabled=true)
1.注册按钮初始状态为不可用，disabled
2.启动定时器，setInterval,一秒钟运行一次CountDowm方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3.直到全局变量值为<
练习：加法计算器。
练习：美女时钟。
26.动态创建元素.avi
Dom的动态创建
document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的Dom对象，然后通过调用元素的appendChild方法将新创建元素添加到相应的元素下
function showit(){
var divMain=document.getElementById("divMain");
var btn=document.createElement("input");
btn.type="button";
btn.value="我是动态的";
divMain.appendChild(btn);
}
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()"/>
27.动态创建元素案例.avi
几乎所有Dom元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>
<input type="button" value="inner*"
onclick="alert(document.getElementById(‘link1‘).innerText);
alert(document.getElementById(‘link1‘)innerHTML);"/>
用innerHTML也可以代替createElement,属于简单、粗放型，后果自负的创建
function createlink(){
var divMain=document.getElementById("divMain");
divMain.innetHTML="<a href="http;//www.rupeng.com‘>
如鹏网</a>";
}
28动态创建超链接练习.avi
练习
练习1：点击按钮增加一个网站的超链接
练习2：点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名，增加三行常见网站。
function createLink(){
var divMain=document.getElementById("divMain");
var link=document.createElement("a");
link.href="http://www.baidu.com";
link.innerText="百度网";//不要写成link.value
divMain.appendChild(link);
}
练习2.动态产生的元素，查看源代码是看不到的。
通过DebugBar->Dom->文档->HTML可以查看动态的源文件。
练习：无刷新评论.
31.动态创建表格IE6下兼容性问题解决方法
浏览器兼容性问题
浏览器兼容性的例子：ie6,ie7对于table.appendChild("tr")的支持和IE8不一样，用insertRow/insertCell来代替或者为表格添加tbody,然后向tbody中添加tr.FF不支持InnerText.
所以动态加载网站列表的程序修改为：
var tr=tableLinks.insertRow(-1);//FF必须加-1这个参数
var td1=tr.insertCell(-1);
td1.innerText=key;
var td2=tr.insertCell(-1);
td2.innerHTML="<a href=‘"+value+"‘>"+value+"</a>";
或者：<table id="tableLinks">
<tbody></tbody>
</table>,然后tableLinks.childNodes[0].appendChild(tr);
insertCell(-1)insertRow(-1)是什么意思呀？？？？？
下载一个IEtester()
34.事件冒泡.avi
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是"由内而外".验证:在页面上添加一个table/table里有tr/tr里有td,td里放一个p,在p、td、tr、table中添加onclick事件响应，见备注。
36.Dom修改样式.avi
其他：
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement.(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象，事件冒泡。
易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。
易错：单独修改样式的属性使用"style.属性名".注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以Css中背景颜色是background-color,而Javascript则是style.background;元素样式名是class,在Javascript中是className属性；font-size-->style.fontSize;
margin-top-->style.marginTop
单独修改控件的样式<input type="button" value="AAA"
onclick="this.style.color="red"/>
38.Dom修改样式练习.avi
案例练习
案例1.创建三个输入文本框，当光标离开文本框的时候文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur.
案例2：评分控件V1,用一个单行5列的table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。演示JQuery版。
练习1：超链接的单选效果。页面上三个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其他超链接背景还原为白色。参考时候：点击变"呜呜",没有点击变"哈哈"window.event.returnValue=false;
练习2：表格隔行变色：偶数行为黄色背景，奇数行为默认颜色
通过table的getElementsByTagName取得所有的tr,依次遍历如果是偶数就为黄色，奇数行为默认颜色。
练习3：放若干文本框。获得焦点的文本框黄色背景，其他控件背景颜色还原。
思路：1.监听所有input的onfocus事件-->将背景设置为黄色；监听所有的input的onblur事件->将背景设置为白色。
思路2:只监听onfocus和练习1一样。
练习4.：点击表格行，被点击的行高亮显示（背景是黄色，其他行白色背景。）。监听每个tr的onclick事件，将点击的背景设置为黄色。其他的设置为白色背景。
练习1：到底在什么地方错了呢？？？？？？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementByTagName("input");//调试错误对象不支持此方法或属性在这一行。ment为复数形式为getElementsByTagName()丢了一个s
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur; //设置inputOnBlur函数为input元素的onblur事件的响应函数，
}
}
function inputOnBlur() {
//inputOnBlur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象。
if(this.value.length<=0){
this.style.background="red";
}
else {
this.style.background="white";
}
}
</script>
</head>
<body onload="initEvent()">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
this的应用记住，弄懂
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick3() {
alert(this.value);//在事件响应函数调用的函数里就不能通过this来获得事件对象了。
}
function btnClick4(btn) {
alert(btn.value);//在事件响应函数中将this传过来就可以了
}
function btnClick5() {
alert(event.srcElement.value); //（*）this和event.srcElement的语义是不一样的，this就是表示
//当前监听事件的这个对象，event.srcElement是引发事件的对象，事件冒泡。
}
function btnClick6() {
alert(this.value);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="alert(event.srcElement.value)" />
<input type="button" value="click2" onclick="alert(this.value)" />
<input type="button" value="click3" onclick="btnClick3()" />
<input type="button" value="click4" onclick="btnClick4(this)" />
<input type="button" value="click5" onclick="btnClick5()" />
<input type="button" id="btn6" value="click6" />
<input type="button" id="btn7" value="click7" onclick="btnClick6()" />
<script type="text/javascript">
var btn6 = document.getElementById("btn6");
btn6.onclick = btnClick6;
//onclick="btnClick6()相当于btn7.onclick=function(){btnClick6(); };在这个匿名函数function中this取不到btnClick()中的对象了。
//也就是onclick的响应函数是一个匿名的函数，匿名的函数实现就是调用btnClick6().所以也就丧失了通过this取属性或方法的功能了。
//面试题中this也是经常考的。
</script>
</body>
</html>
42.编程控制层.avi
控制层的显示
修改style.display,结果为none为不显示，其他结果比如空则为显示。例子：切换层的显示
function togglediv(){
var div1=document.getElementById(‘div1‘);
if(div1.style.display=="){
div1.style.display=‘none‘;//不显示
}
else{
div1.style.display=‘‘;//显示
}
}
★ ☆ √
案例练习：
案例3：鼠标放到一个超链接的时候，显示一个黄色背景，带图片的悬浮提示：鼠标离开就消失。。提示：鼠标进入控件的事件是onmouseover,离开的事件是onmouseout
评分控件V2.用一个单行5列的Table，td中默认都是starEmpty.jpg这个图片。监听td的mouseover事件，鼠标在一个td的视乎将这个td及之前的td的内容换成starFill.jpg这个图片。鼠标在评分控件上的时候显示超链接形式的鼠标图标。提示：鼠标进入控件的事件是onmouseover,离开的事件是onmouseout
案例：注册页面，点击"高级"CheckBox,则显示高级选项，否则隐藏
案例2：跟着鼠标飞的图片。提示：鼠标移动的事件是onmousemove，通过window.event的那些‘‘X/‘‘Y属性获得鼠标的位置。
练习1：点击【登录】按钮，弹出一个显示用户名、密码等的层。
练习2：点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层。
45.Body的事件范围.avi
IE中body的事件范围
IE中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则"body"中最后一个元素一下(横向不限制）"的部分是无法响应事件的，必须使用代码在document上监听那些事件，比如document.onmousemove=MovePic
FF中的差不多。
FF和IE的区别都有哪些？
火狐和IE除了差两个像素以外，还有哪些不同。
IE好些东西是它自己专用，FF则符合w3c规则，IE和FF的width和height与padding和margin的算法是不一样的，IE的一些样式FF不能用，同样FF也有其占用的样式。有些功能在IE下是很容易实现，由于它有特殊的函数等，但到FF下就需要做比较多的事了，最简单的例子就是拖曳的实现，IE代码很少，而FF下则需要有一堆代码。
46.元素单位1.avi
元素的位置、大小单位
通过dom读取元素的top、left、width、height等取到的值不是数字，而是"10px"这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF必须是"80px"、"90%"等这样的字符串形式，为了兼容统一用字符串形式。
如果要修改元素的大小（宽度加10），则首先要取出元素的宽度，然后用parseInt将宽度转换为数字(parseInt可以将"20px"这样数字开头的包含其他内容的字符串解析为20,parseInt(‘22px‘,10),也就是解析尽可能多的部分);然后加上一个值，再加上px赋值回去。
48元素的编程定位.avi
层的操作
元素的position样式值:static(无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative（相对元素默认位置的定位）。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。
案例：跟着鼠标飞的图片。提示：鼠标移动的事件是onmousemove,通过window.event的clientX、clientY属性获得鼠标的位置。（一边移动事件一边触发，而不是移动开始或者移动完成才触发）
案例：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开就消失。提示：鼠标进入控件的事件是onmouseover,离开的事件是onmouseout.
案例：点击按钮层动态变大。
52.编程控制层练习说明.avi
案例练习：
练习：点击【登录】按钮，弹出一个显示用户名、密码等的层
练习：点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层。进阶：元素的额外属性。
评分控件V2.用一个单行5列的Table,td中默认都是starEmpty.jpg这个图片。监听td的mouseover事件，鼠标在一个td的时候将这个td及之前的td的内容换成starFill.jpg这个图片。鼠标在评分控件上的时候显示超链接形式的鼠标图标。
案例：注册页面，点击"高级"CheckBox,则显示高级选项，否则隐藏。
53.编程控制层常见错误.avi
问题：
易错：不要写成div1.style.width=80px,而是div1.style.width=‘80px‘;//宽度是字符串的形式。
修改元素的样式不能this.style="input type="button" value="AAA" onclick="this.style.color=‘red‘"/>.只修改用修改的样式。技巧，没有文档的情况下的值属性名，随便给一个元素设定id,然后在js中就能id.style.出来能用的属性。
createElement的两种用法，注意innerText的问题。
var input=document.createElement("<input type=‘button‘ value=‘hello‘/>")快速创建元素，并且赋值，但是注意设置的inner部分不会被设置。
label.setAttribute("for","username");//设定一些Dom元素属性名特殊的属性label.for="username"会有问题。
label.setAttribute("xuehao","33333");//给元素添加HTML标准没有的自定义属性。
做招聘网站，可以参考网上开源的招聘系统。
用骑士cms 现成的招聘系统 大概需要四周时间。
电脑快捷键：
ctrl+x 剪切
ctrl+z 撤销
ctrl+s 保存
ctrl+shift 输入法切换
ctrl+空格 中英文切换
ctrl+拖动文件 复制文件
57.编程控制层案例.avi
案例练习
练习：界面上有几个球队名字的列表，将鼠标放到球队名字上就会变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30的字体。
练习：显示数字时钟，时间显示到一个div中。思路：
练习：有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本(Gray)的"输入搜索关键词",否则显示用户输入的值；焦点在文本框中时如果之前显示"输入搜索关键词"则清空文本框的值，并且将文本修改为黑色。
onfocus的时候如果文本框中的值为"输入搜索关键词",则清空文本框，并且恢复文本框的颜色为Black;onblur的时候如果文本框中没有值，则将文本框的值设置为"输入搜索关键词"并且文本框中显示为灰色文本(Gray) style.color=‘Gray‘.
59.编程操作表单.avi
form对象
form对象是表单的Dom对象。
方法：submit()提交表单，但是不会触发onsubmit事件。
实现autopost,也就是焦点离开控件以后页面立即提交，而不是
只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法。代码见备注。
在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，数据有问题，返回false即可取消提交
<form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById(‘txtname‘).value.length<=0){alert(‘姓名必填‘);return false;}">
60.不同浏览器的Dom差异.avi
面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的? appendChild.insertCell,px
不同浏览器的差异（*)
不同浏览器中对DOM支持的方法不一样。
获取网页中那个元素触发了事件：在IE里使用srcElement;在
FireFox里使用target
使用Dom获取和更改网页标签元素内文本：在IE里使用innerText;在FireFox里使用textContent
动态为网页或元素绑定事件：在IE中绑定事件的方法是attachEvent;在FireFox中绑定事件的方法是addEventListener
更多http://www.360doc.com/content/09/0319/12/16915_2855107.shtml.
不同浏览器中对CSS的支持不一样，所以出现在IE中显示正常的网页，在FF下全部乱掉了。
JQuery之类的框架进行了封装，将不同浏览器的差异帮开发人员处理了，开发人员只要调用JQuery的方法，JQuery会帮助在不同浏览器中进行翻译。用JQuery就可以解决不同浏览器上Dom的不同。对于CSS的不同是美工的事。IETester、FF、Chrome测不同浏览器在哪。
61.JS中的正则表达式.avi
复习C#正则表达式
JavaScript中创建正则表达式类的方法：
var regex=new RegExp("\\d{5})或者var regex=/\d{5}/
/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。
RegExp对象的方法：
（1）test（str）判断字符串str是否匹配正则表达式，相当于IsMatch
var regex=/.+@+./;
alert(regex.test("a@b.com"));
alert(regex.test("ab.com"));
(2)exec(str)进行搜索匹配，返回值为匹配结果(*)
(3)compile编译表达式，提高运行速度。（*)
string的正则表达式方法
String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：
match(regexp),相当于调用exec
var s="aaa@163.com";
var regex=/(.+)@(.+)/;
var match=s.match(regex);
alert(RegExp.$1+",服务器:"+RegExp.$2);
练习：光标离开Email地址框的时候用正则表达式校验是否是合法的 Email地址，如果不是的话Email地址框变红，并且注册按钮禁用，否则Email地址框颜色为白色，启用注册按钮。disabled
弹出对话框的处理
复习：使用window.showModalDialog(‘dialog.htm‘)弹出模态对话框
给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用window.dialogArguments获得传递的参数值；对话框中给window.parent.returnValue设定返回值，这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。例子：弹出对话框询问用户姓名，向用户问好；弹出含有"是"、"否"、"取消"、三个按钮的模态窗口，点击按钮的时候窗口关闭，然后主窗口显示用户点击的按钮。
传递多个参数，将参数包装到数组中，然后任然是通过第二个参数传递，返回多个返回值也可以返回数组：var arr=new Array();arr[0]=30;arr[1]="tom";
练习（面试题),弹出一个含有确定、取消、重试三个按钮的对话框，并且得知用户的选择。
62.综合案例金额文本框.avi
HTML、Javascript的压缩和混淆。去掉空格、缩短变量名，让js、html尺寸更小，提高下载速度。
HTML、JS压缩、混淆有动态和静态两种方案。HTML压缩器，比如HTML Compress,JavaScript压缩工具：Google Closure Complier、YUI Compressor等。
很多js库都提供了.min.js、compress.js的压缩版本。
keyCode
ascii码说明：
8：退格键
46：delete
37-40:方向键
48-57：小键盘区的数字
96-105：主键盘区的数字
110、190：小键盘区和主键盘区的小数点
189、109：小键盘区和主键盘区的负号
13：回车
9：Tab 就是那个把焦点移到下一个文本框的东东。
案例：
案例1：回车实现Tab跳转。响应文本框的哦你KeyDo我们事件，window.event.keyCode获得用户点击的keyCode.(*)keyCode和ASCII不是完全一致，主键盘的1和小键盘的1的ASCII一样，但是keyCode不一样。详见备注。回车的keyCode为13，Tab的keyCode为9.if(window.event.keyCode=13){
window.event.keyCode=9;
}
只有少数的键才能被替换，大部分是不行的，有权限问题。
案例：金额文本框
财务相关系统中涉及到金额的文本框有如下要求：
进入金额文本文本框不使用中文输入法
不能输入非数字
焦点在文本框中时文本框左对齐：焦点离开文本框时文本框右对齐，显示千分位
禁用输入法：style="ime-mode.disabled"
禁止键入非法值，只有这些才能被键入
（k==46)||(k==8)||(k==109)||(k==110)||(k>=48&&
k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40)
onkeydowm="return numonKeyDown()"不要写成onkeydown="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。
禁止粘贴（伟大的Tester),<input onpaste="return false;",太暴力，应该只是禁止粘贴非法值。在onpaste中通过clipboardData.getData.getData(‘Text‘)取到粘贴板中的值，
然后遍历每个字符，看是否是合法的值，如果全部是合法值才允许粘贴，只要有一个非法值就禁止粘贴。
添加千分位的方法，见备注
焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位。
this.style.textAlign=‘right‘
练习1
案例代码阅读，模拟对话框。见备注
案例：实现省市选择界面。
练习：歌曲列表全选、全不选、反选。
练习：权限选择页面，选择、撤回、全部选择、全部撤回。
代码参考"实现省市选择界面",因为可能多选，判断选择项和单选的会有不同。
dom,布布扣,bubuko.com
dom
标签：des winform style http java color
原文地址：http://www.cnblogs.com/fanhongshuo/p/3812358.html
