DOMJavascript总结
来源：互联网 发布：联通 知乎 编辑：程序博客网 时间：2024/06/06 00:39
1，动态设置事件：
<script type="text/javascript">
function F1(){
alert('In F1');
}
function F2{
alert(In F2);
}
</script>
<input type="button" value="关联F1" onclick="document.onclick=F1;/">
input type="button" value="关联F2" onclick="document.onclick=F2;/">
!!:onclick="document.onclick=F1;"此处的F1不要加括号，加括号，就调用了F1（）函数，并且把返回值赋值给了document。onclick了
document.body.onclick范围仅限于body；document。onclick范围于整个文档
2，使用window对象的属性，方法的时候可以省略window
3， 1>window.alert（‘大家好！’）;//弹出警告对话框
2>window.confirm('确定要删除吗？')；确定，取消对话框，返回true和false
3>prompt（‘message’，’default value‘）；IE8阻止了。窗口弹出
4>window.navigate(url);将网页从新导航到url，只支持IE，Opera11.6
5>window.loction.href='url';支持绝大多数浏览器
6>setTimeout：也是定时执行，但是不像setInterval那样重复的定时执行，只执行一次，
clearTimeout：也是清除定时
interval：间隔的意思，timeout超时的意思；
var timeoutid=setTimeout("alert('hello')",2000);
==标题栏走马灯练习：
①②③④⑤
function scrollTitle() {
var str = document.title;
str = str.charAt(str.length - 1) + str.substring(0, str.length - 1);
document.title = str;
}
setInterval("scrollTitle()", 500);
7>showModalDialog:弹出模态对话框!!注意showModalDialog必须在onclick等用户动手触发事件中才会执行，否则会被最新浏览器当成广告弹窗而拦截
第一个参数为弹出模态窗口的页面地址
在弹出的页面中调用window.close();关闭窗口；只有在对话框中调用window.close（）才会自动关闭窗口，否则浏览器会提示用户进行确认
--showModelessDialog弹出非模态窗口，参数和showModalDialog一样
--给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用，window.dialogArgument获得传递的参数值，
window.parent.returnValue设定返回值，这样在父窗口就可以通过showModalDialog返回值读取设置的返回值了
传递多个参数，将参数包装
到数组中，然后仍然通过第二个参数传递，返回多个返回值，也可以返回数组：var arr=new Array();arr[0]=30;arr[1]="tom";
!!在弹出的窗口也可以使用alert（）；（要注意缓存）
<body onLoad="javascript:document.getElementById('mytext1').value=window.dialogArguments;">
<input type="text" id="mytext1"/>
<input type="button" value="确定" onclick="javascript:window.parent.returnValue=getData();window.close();">
</body>
主页面：
var result=window.showModalDialog('dialog2.htm',777);
alert(result);
4，body,document对象事件：
->onload（页面加载后触发）： 网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。
->window.控件Id(不建议使用)
->document.getElementById('空间Id');(推荐)
->onunload(页面卸载后触发)：网页关闭（或者离开）后触发。//刷新页面的时候、关闭选项卡的时候（多个选项卡）
->onbeforeunload(页面卸载前触发)：在网页准备关闭（或者离开）前触发。//注意浏览器缓存
<body onbeforeunload=“return ‘真的要放弃发帖退出吗?’; ”>。显示的文字随浏览器版本而有差异。// =“window.event.returnValue=‘’只兼容IE
<body onbeforeunload=“window.event.returnValue=‘r u sure?’”></body> //IE的写法
<body onbeforeunload=“event.preventDefault();”></body> //FF
//不同浏览器有差别，所以这里直接用了
<body onbeforeunload=“return ‘r u sure?’”></body>
5,其他事件：
通用的HTML元素的事件：
onclick（单击事件）
ondblclick(双击事件)
onkeydown(按键按下)
onkeypress(点击按键)
onkeyup(按键释放)
onmousedown(鼠标按下)
onmousemove(鼠标移动)
onmouseout（鼠标离开元素范围）
onmouseover（鼠标移动到元素范围）
onmouseup（鼠标按键释放）
oncontextmenu(在浏览器中单击鼠标右键显示”右菜单“时触发)
6，window对象的属性1：
window.location对象：
window.location.href='';重新导航到新页面，可以取值，也可以赋值
window.location.reload();刷新页面
window.event用于获得发生事件时的信息
window.event.altKey属性，bool类型，表示事件发生时按下alt键；类似的还有ctrlKey，shiftKey等键
演示：<input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；
//在FF（火狐）下的写法
function BodyClickHandlerOnFF(e) {
if (e.altKey) {
alert('按下alt键');
} else {
alert('普通点击！');
}
}
<body onclick="BodyClickHandlerOnFF(event);">
//在IE下的写法
//在IE下的写法
function BodyClickHandler() {
if (window.event.altKey) {
alert('press alt key');
} else {
alert('normal click');
}
}
<body onclick="BodyClickHandler();">
===================================兼容的写法======================================================
<script type="text/javascript">
document.body.onmousemove = function () {
if (window.event) {
document.title = '(' + window.event.clientX + ',' + window.event.clientY + ')';
} else {
document.title = '(' + arguments[0].clientX + ',' + arguments[0].clientY + ')';
}
}
</script>
7，window属性2：
window.event的属性：
clintX，clintY：发生事件时鼠标在客户区的坐标
screenX，screenY：发生事件时，鼠标在屏幕上的坐标
offsetX，offsetY：发生事件时鼠标相对于事件源的坐标
(window.event.returnValue) returnValue属性： 如果returnValue属性设置为false，就会取消默认事件的处理 在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(onsubmit="window.event.returnValue=false;")
window.event.returnValue不兼容火狐浏览器
FireFox:e. preventDefault();取消事件的默认动作。
直接写return false;IE、FF、Chrome都可以。
8,window对象的属性：
window.event的属性：
--srcElement：获得事件源对象，几个按钮共享一个事件响应函数用；如：
click （object sender,EventArgs e）//IE和谷歌支持火狐用e.target;
--button:发生事件时鼠标按键 ，1为左键，2为右键，4为滑轮，要测试event.button的值时，要在onmousedown事件中测试，在onclick事件中，智能识别鼠标左键的单击，
screen对象：
获取屏幕的信息；
alert（"分辨率："+screen.width+"*"+screen。height）;
if (screen.width<1024||screen.height<768){
alert("分辨率太低！")
}
实例：
//It works on IE
function MyEventHandler() {
var obj = window.event.srcElement;
alert(obj.value);
}
<input type="button" value="click me!" onclick="MyEventHandler();" />
//FF
//FF
function MyEventHandlerFF(e) {
var obj = e.target;
alert(obj.value);
}
<input type="button" value="In FF Click me" onclick="MyEventHandlerFF(event);" />
//IE and FF
function TNB(e) {
if (e.target) {
alert(e.target.value);
} else if (e.srcElement) {
alert(e.srcElement.value);
}
}
9，window对象的属性4：
clipboardData对象，对粘贴板的操作；
setData（"Text",val）：设置粘贴板中的值
getData("Text")：读取粘贴板的值，返回值为粘贴板中的内容
clearData（"Text"）：清空粘贴板；
案例:赋值地址给好友：详见下面备注：
<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');"/>
!!:当复制的时候body的oncopy方法被触发，直接return false就是禁止复制，<body oncopy="alert('禁止复制');return false;">
很多元素也有oncopy(复制),onpaste(粘贴)，oncut(剪切)
案例：禁止粘贴账号：
帐号：<input type="text" /><br />
重复帐号：<input type="text" onpaste="alert('为保证帐号的正确，请勿粘贴帐号');return false;" />
案例：在网站中复制文章的时候，为了防止那些”拷贝党”不添加文章来源，自动在复制的内容后添加版权声明。代码见下页：
=========================================Firefox下使用clipboardData对象===================缺东西：随后补出来
代码：
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自传智博客技术专区，转载请注明来源。'+loction.href);
}
oncopy="setTimeout('modifyClipboard()',100)"//用户在0.1秒钟以后再去改粘贴板中的内容，不能直接在oncopy哩修改粘贴板
不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
history操作历史记录：
Window.history.back()后退；
window.history.forward()前进；
Window.history.go(-1)后退;
Window.history.go(1)前进；
10,Window对象的属性5——document
document属性：
document的方法：
write();//向文档中写入内容：在onclick等事件中代码会冲掉页面的内容，只有在加载过程中write才会与原有内容融合在一起
writeln();//向文档中写入内容后，添加了一个回车：在源代码里面换行
document.write（）经常在广告代码，整合资源代码中被调用
=========================站长统计=====================================
<SCRIPT language=JavaScript charset=gb2312 src="http://s23.cnzz.com/stat.php?id=613505&web_id=613505&show=pic2"></SCRIPT>
A title=站长统计 href="http://www.cnzz.com/stat/website.php?web_id=613505" target=_blank><IMG border=0 hspace=0 vspace=0 src="http://icon.cnzz.com/pic2.gif"></A><IMG border=0 src="http://hzs13.cnzz.com/stat.htm?id=613505&r=&lg=zh-cn&ntime=0.20273000 1323873730&repeatip=1&rtime=0&cnzz_eid=16357578-1323873730-&showp=1440x900&st=31&sin=&res=0" width=0 height=0></DIV></DIV>
==========备注1===========
document.write('<pre>');
document.write('1');
document.writeln('2');
document.write('3');
document.write('</pre>');
这里是页面的内容。
<script type="text/javascript">
document.write("<font color=red>红色呀</font>");
</script>
哈哈哈哈哈 。
write经常在广告代码、整合资源代码中被使用
广告代码的例子：在http://heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中
整合资源的例子：百度新闻 http://news.baidu.com/newscode.html
百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。
脚本的好处：
1.自动执行
2.动态生成。
===================================example===============================
<script type="text/javascript">
var reffer = "";
var url = "";
if (window.parent != window.self) {
try { reffer = parent.document.referrer; }
catch (err) { reffer = document.referrer; }
try { url = parent.document.location; }
catch (err) { url = document.location; }
} else { reffer = document.referrer; url = document.location; }
document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='http://pv.heima8.com/index.php?p=126292971&b=100002856&itemid1=107075271&reffer=" + escape(reffer) + "&url=" + escape(url) + "' width='468' height='60'></iframe>");
</script>
==========================站长统计的============================
<script src="http://s84.cnzz.com/stat.php?id=3493955&web_id=3493955" language="JavaScript"></script>
11，Window对象的属性6
最基本的dom 遍历：
===================================备注1 ================================
//遍历直接子节点，如需获得所有节点，用递归。需要放在页面的最后测试（或者是在onload里面，否则页面还没有加载完毕。）
c
======================递归版本=========================
function dg(snodes){
//alert(snodes.nodeName+' '+snodes.childNodes.length);
for(var i=0;i<snodes.childNodes.length;i++)
{
alert(snodes.childNodes[i].nodeName);
if(snodes.childNodes[i].childNodes.length>0){
dg(snodes.childNodes[i]);
}
}
}
//放在onload事件中。
dg(document.documentElement);
//本来可以直接使用元素的Id来访问，但是如果元素嵌套在表单中后，就不能直接使用元素Id了
//还需要window.form.元素id,所以我们一般用document.getElementById(元素id).该方法无论在哪里
//都会搜索网页中的全部元素，找对应id的元素。
document.getElementById('btn2').value = 'button';
//如果在网页中有id重复的元素，那么getElementById()获得的是
//第一id为指定id的元素，而不是数组
var txtctrl = document.getElementById('txt1');
getElementById();(非常常用)，根据id获得对象，网页中id不能重复，也可以通过元素的Id来引用元素，但是有有效范围，form1.textbox1之类的问题（当元素放在form中的时候（html页面中需要通过form，元素id）），因此不建议直接通过id操作元素，而是通过getElementById；
getElementByName()；根据元素的name获得对象，由于网页中的元素的name 可以重复使用，比如多个RadioButton的name一样，因此getElementByName的返回值是对象数组；
getElementByTagName();获得指定标签名称的元素数组，比如：getElementByTagName（"p"）可以获得所有的<p>标签；
”*“表示所有的标签
!!:此处切记不要使用forin循环（forin循环是键值对，不是对象本身）
综合例题：
案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
================================================
<script type="text/javascript">
function g(){
ar ctrls=document.getElementsByTagName('input');
for(var i=0;i<ctrls.length;i++){
ctrls[i].value='哈哈';
}
window.event.srcElement.value='呜呜!!';
}
</script>
练习：加法计算器。两个文本框中输入
加法计算器。
<input type="text" id="num1" />+<input type="text" id="num2" />
<input type="button" onclick="calc()" value="=" /><input type="text" id="num3" />
function calc() {
var s1 = document.getElementById("num1").value;
var s2 = document.getElementById("num2").value;
var i3 = parseInt(s1) + parseInt(s2);
document.getElementById("num3").value = i3;
}
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = “” ，让元素可用。disabled=disabled,为不可用)disabled=true;
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
思路：
1、注册按钮初始状态为不可用，disabled
2、启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3、直到全局变量值为<=0，就让注册按钮可用，将按钮的文本设置为“同意”
练习：美女时钟。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>美女时钟</title>
<script type="text/javascript">
function GetImg() {
var curDate = new Date();
var h = curDate.getHours();
// var m = curDate.getMinutes();
var s = curDate.getSeconds();
if (h < 10) {
h = '0' + h;
}
if (s < 10) {
s = '0' + s;
}
var filename = 'images/' + h + '_' + s + '.jpg';
document.getElementById('imgClock').src = filename;
}
function ChangeTime() {
setInterval(GetImg, 1000);
}
</script>
</head>
<body onload="ChangeTime();">
<img id="imgClock" src="" />
</body>
</html>
12：冒泡事件：
事件冒泡:如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发，触发的顺序是由内而外的，验证：在页面上添加一个table，table理由tr,tr哩有td,td哩放一个P，在P，td,tr,table中添加onclick事件响应，下边：
//window.event.srcElement指最初引发事件的事件源（对象、元素）
//alert('body click ' + window.event.srcElement.id);
//this表示当前谁在执行事件，则this就表示哪个对象。
<table onclick="alert('table onclick');">
<tr onclick="alert('tr onclick');">
<td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
Span设置display：block；以后再设置height，width才会有效；
window.onload与body的onload的共同点：
1，二者效果完全一样，都是在页面内容都加载完毕后才触发；
2，由于网页中没有window所以在body中写onload
3，建议使用window.onload//使用JS脚本的方式高效
4，其实应该是document。onload，但是所有的浏览器都实现到了window对象上；
13：事件中的this：
事件中的this，除了可以使用event.srcElement在事件响应函数中，this表示发生的控件，只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里this表示window对象），如果使用则要将this传递给函数或者使用event.srcElement；
（*）this和event.srcElement的语义是不一样的：
this是表示当前监听事件的对象 ；
event.srcElement是引发事件的对象：事件冒泡；
<body onclick="这个叫做事件响应函数，在这里写this表示发生事件的控件，在这里调用另外一个函数F1，则F1中不能使用this表示发生事件的控件">
body.onclick=F1；
14，动态创建DOM：
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下，//父元素对象.removeChild（子元素对象）；删除元素。
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()" />
=====================常用方法与属性===========================
方法：
createElement(‘element’);
appendChild(node);
removeChild(node);
replaceChild(new,old);
insertBefore(new,参照);
属性：
firstChild
lastChild
//通过js动态创建的元素，直接 右键→查看源码是看不到的，需要通过“开发人员工具”才能看到。s
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
15，innerText和innerHTML：
innerText：表示：元素标签内内容的文本表示形式
innerHTML：表示：HTML源代码；
这俩个属性是可读可写的；火狐不支持innerText，在火狐下用textContent，也可以使用innerHTML设置普通文本编写兼容的innerText
详见实例：
=========================备注1==============================
function ihd() {
var vv = document.getElementById('dv1');
if (typeof (vv.innerText) == 'string') {
document.getElementById('dv1').innerText = '哈哈。。';
} else {
vv.textContent = '哈哈。。';
}
}
//innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码，
//innerHTML可以设置html代码和纯文本。
============innerHTML与innerText示例=================
<script type="text/javascript">
function showInfo() {
var aObj = document.getElementById('a1');
alert(aObj.innerHTML);
alert(aObj.innerText);
}
</script>
<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>
<br />
<input type="button" value="show innerText and innerHTML" onclick="showInfo();" />
===============================备注1===========================
<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>
<script type="text/javascript">
function showInfo() {
var aObj = document.getElementById('a1');
alert(aObj.innerHTML);
alert(aObj.innerText); //获取去掉html标签的所有文本
}
</script>
=========================================outerText与outerHTML=====================================
将原来的元素直接替换。
innerHTML也可以替代createElement，属于简单，粗放型，后果自负穿的创建
示例：
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";}
<span/>的innerHTML和<span></span>的innerHTML不一样。//建议，在使用之前要保证标签具有开始和结束标记，否则，会出现一下意想不到的后果。
16，浏览器兼容性问题：
浏览器兼容性的例子：
IE6，IE7对table。appendChild（”tr“）的支持和IE8不一样
用insertRow，insertCell来代替或者为表格添加tbody，然后向tbody中添加tr
所以动态网页加载网站列表的程序修改为：
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. tBodies[0].appendChild(tr);
16，innerHTML还是操作Dom节点
操作页面元素的时候是用innerHTML的方式还是createElement（），appendChild（）与removeChild（）的方式？
1，对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom 操作，先将页面的HTML 代码写好，然后调用一次innerHTML，而不要反复的调用innerHTML
2，对于使用innerHTML=‘’的方式来删除节点，在某些情况下会存在内存问题，比如：div下有很多其他元素，每个元素绑定有事件处理程序，此时innerHTML值是把当前元素从节点树上移除了，但是那些事件处理程序依然占内存
17，代码是否要放到onload中：
如果JS代码需要操作页面上的元素，则该代码需要放到onload中；
因为：当页面加载完毕之后页面才会有相关的元素；
如果JS代码中没有操作页面元素的语句，则可以将代码直接写在<script>标签中；
例如： 声明变量，相加求和等操作。
<body>
<!-- html标签-->
<script type="text/javascript">
//写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里面也可以操作页面上的元素。
//建议将操作页面元素的代码都放到onload里面。
</script>
</body>
18，JS操作页面样式及其他：
易错点：修改元素的样式不是设置class属性，而是className属性；
修改元素的样式不能this.style="background-color:red".
剖析：单独修改样式的属性使用style.属性名；注意在CSS中属性名在javascript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为javascript中-是不能做属性，类名的所以CSS中背景颜色是background-color。而javascript则是style.backgroundColor；元素样式名是class，在javascript中是className属性：font→style.fontSize；margin-top→style.marginTop //驼峰命名法。
单独修饰控件的样式:<input type="button" value="AAA" onclick="this.style.color='red'"/>
技巧：没有文档的情况下，随便给一个元素设定id；然后再JS中 就能id.style；.出来能用的属性。
操作float样式的时候，IE与其他浏览器不太一样；
IE：obj.style.styleFloat='right';
其他浏览器：obj.style.cssFloat='right';
通用代码祥见下：
========================备注1==========================
var vv = document.getElementById('dv1');
if (typeof (vv.style.styleFloat) == 'string') {
vv.style.styleFloat = 'right';
} else {
vv.style.cssFloat = 'right';
}
========================================================
<style type="text/css">
.emptyfield
{
background-color:Red;
}
.normal
{
background-color:inherit;
}
</style>
<script type="text/javascript">
function check(txt) {
var s = txt.value;
if (s.length <= 0) {
txt.className = "emptyfield";
alert('这个字段必填！');
}
else {
txt.className = "normal";
}
}
</script>
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
案例2：个td的时候，将这个td及之前的td背景变为红色，之后评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。自定义简易评分控件代码：
=========================================备注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>==
<!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 getCurrentIndex(curTd) {
<title>评分控件好看版</title>
<script type="text/javascript">
function getCurrentIndex(curTd) {
var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
for (var i = 0; i < tdArr.length; i++) {
if (curTd == tdArr[i]) {
return i;
}
}
return -1;
}
function initialEvent() {
var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
for (var i = 0; i < tdArr.length; i++) {
//为每个td设置分数
tdArr[i].setAttribute("curScore", 10 * (i + 1));
//绑定onmouseover事件
tdArr[i].onmouseover = function () {
//设置鼠标指针为:手形
this.style.cursor = 'hand';
var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
var curIndex = getCurrentIndex(this); //这里只能传this参数，不能传tdArr[i]
//将curIndex之前的五角星设置为：★
for (var j = 0; j <= curIndex; j++) {
tdArr[j].innerHTML = '★';
}
//将curIndex之后的五角星设置为：☆
for (var j = curIndex + 1; j < tdArr.length; j++) {
tdArr[j].innerHTML = '☆';
}
}
//绑定onclick事件
tdArr[i].onclick = function () {
alert('您当前的评分为：'+this.getAttribute('curScore'));
}
}
}
</script>
</head>
<body onload="initialEvent();">
<table id="tblVote" border="0" cellpadding="0" cellspacing="0" style="font-size: 40px;
color: Blue">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
</html>
19：控制层的显示：
修改style.display，例子：切换层的显示：
function togglediv(){
var div1=document.getElementById('div1');
if (div1.style.display == '') {
div1.style.display = 'none';//不显示
}
else {
div1.style.display = '';//显示
}
}
与元素对象.enabled=true或者readonly=true等不一样 ，这里是样式，不是元素的直接属性不能用true或者false
!!:对于div、table、font、p这类型的标签时没有name属性的。
对于没有name属性的元素，如果仍要加个name属性。那么通过document.getElementsByName（）也无法获取到。
一般只有表单元素才有name属性。
<script type="text/javascript">
function F1(){
alert('In F1');
}
function F2{
alert(In F2);
}
</script>
<input type="button" value="关联F1" onclick="document.onclick=F1;/">
input type="button" value="关联F2" onclick="document.onclick=F2;/">
!!:onclick="document.onclick=F1;"此处的F1不要加括号，加括号，就调用了F1（）函数，并且把返回值赋值给了document。onclick了
document.body.onclick范围仅限于body；document。onclick范围于整个文档
2，使用window对象的属性，方法的时候可以省略window
3， 1>window.alert（‘大家好！’）;//弹出警告对话框
2>window.confirm('确定要删除吗？')；确定，取消对话框，返回true和false
3>prompt（‘message’，’default value‘）；IE8阻止了。窗口弹出
4>window.navigate(url);将网页从新导航到url，只支持IE，Opera11.6
5>window.loction.href='url';支持绝大多数浏览器
6>setTimeout：也是定时执行，但是不像setInterval那样重复的定时执行，只执行一次，
clearTimeout：也是清除定时
interval：间隔的意思，timeout超时的意思；
var timeoutid=setTimeout("alert('hello')",2000);
==标题栏走马灯练习：
①②③④⑤
function scrollTitle() {
var str = document.title;
str = str.charAt(str.length - 1) + str.substring(0, str.length - 1);
document.title = str;
}
setInterval("scrollTitle()", 500);
7>showModalDialog:弹出模态对话框!!注意showModalDialog必须在onclick等用户动手触发事件中才会执行，否则会被最新浏览器当成广告弹窗而拦截
第一个参数为弹出模态窗口的页面地址
在弹出的页面中调用window.close();关闭窗口；只有在对话框中调用window.close（）才会自动关闭窗口，否则浏览器会提示用户进行确认
--showModelessDialog弹出非模态窗口，参数和showModalDialog一样
--给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用，window.dialogArgument获得传递的参数值，
window.parent.returnValue设定返回值，这样在父窗口就可以通过showModalDialog返回值读取设置的返回值了
传递多个参数，将参数包装
到数组中，然后仍然通过第二个参数传递，返回多个返回值，也可以返回数组：var arr=new Array();arr[0]=30;arr[1]="tom";
!!在弹出的窗口也可以使用alert（）；（要注意缓存）
<body onLoad="javascript:document.getElementById('mytext1').value=window.dialogArguments;">
<input type="text" id="mytext1"/>
<input type="button" value="确定" onclick="javascript:window.parent.returnValue=getData();window.close();">
</body>
主页面：
var result=window.showModalDialog('dialog2.htm',777);
alert(result);
4，body,document对象事件：
->onload（页面加载后触发）： 网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。
->window.控件Id(不建议使用)
->document.getElementById('空间Id');(推荐)
->onunload(页面卸载后触发)：网页关闭（或者离开）后触发。//刷新页面的时候、关闭选项卡的时候（多个选项卡）
->onbeforeunload(页面卸载前触发)：在网页准备关闭（或者离开）前触发。//注意浏览器缓存
<body onbeforeunload=“return ‘真的要放弃发帖退出吗?’; ”>。显示的文字随浏览器版本而有差异。// =“window.event.returnValue=‘’只兼容IE
<body onbeforeunload=“window.event.returnValue=‘r u sure?’”></body> //IE的写法
<body onbeforeunload=“event.preventDefault();”></body> //FF
//不同浏览器有差别，所以这里直接用了
<body onbeforeunload=“return ‘r u sure?’”></body>
5,其他事件：
通用的HTML元素的事件：
onclick（单击事件）
ondblclick(双击事件)
onkeydown(按键按下)
onkeypress(点击按键)
onkeyup(按键释放)
onmousedown(鼠标按下)
onmousemove(鼠标移动)
onmouseout（鼠标离开元素范围）
onmouseover（鼠标移动到元素范围）
onmouseup（鼠标按键释放）
oncontextmenu(在浏览器中单击鼠标右键显示”右菜单“时触发)
6，window对象的属性1：
window.location对象：
window.location.href='';重新导航到新页面，可以取值，也可以赋值
window.location.reload();刷新页面
window.event用于获得发生事件时的信息
window.event.altKey属性，bool类型，表示事件发生时按下alt键；类似的还有ctrlKey，shiftKey等键
演示：<input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；
//在FF（火狐）下的写法
function BodyClickHandlerOnFF(e) {
if (e.altKey) {
alert('按下alt键');
} else {
alert('普通点击！');
}
}
<body onclick="BodyClickHandlerOnFF(event);">
//在IE下的写法
//在IE下的写法
function BodyClickHandler() {
if (window.event.altKey) {
alert('press alt key');
} else {
alert('normal click');
}
}
<body onclick="BodyClickHandler();">
===================================兼容的写法======================================================
<script type="text/javascript">
document.body.onmousemove = function () {
if (window.event) {
document.title = '(' + window.event.clientX + ',' + window.event.clientY + ')';
} else {
document.title = '(' + arguments[0].clientX + ',' + arguments[0].clientY + ')';
}
}
</script>
7，window属性2：
window.event的属性：
clintX，clintY：发生事件时鼠标在客户区的坐标
screenX，screenY：发生事件时，鼠标在屏幕上的坐标
offsetX，offsetY：发生事件时鼠标相对于事件源的坐标
(window.event.returnValue) returnValue属性： 如果returnValue属性设置为false，就会取消默认事件的处理 在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(onsubmit="window.event.returnValue=false;")
window.event.returnValue不兼容火狐浏览器
FireFox:e. preventDefault();取消事件的默认动作。
直接写return false;IE、FF、Chrome都可以。
8,window对象的属性：
window.event的属性：
--srcElement：获得事件源对象，几个按钮共享一个事件响应函数用；如：
click （object sender,EventArgs e）//IE和谷歌支持火狐用e.target;
--button:发生事件时鼠标按键 ，1为左键，2为右键，4为滑轮，要测试event.button的值时，要在onmousedown事件中测试，在onclick事件中，智能识别鼠标左键的单击，
screen对象：
获取屏幕的信息；
alert（"分辨率："+screen.width+"*"+screen。height）;
if (screen.width<1024||screen.height<768){
alert("分辨率太低！")
}
实例：
//It works on IE
function MyEventHandler() {
var obj = window.event.srcElement;
alert(obj.value);
}
<input type="button" value="click me!" onclick="MyEventHandler();" />
//FF
//FF
function MyEventHandlerFF(e) {
var obj = e.target;
alert(obj.value);
}
<input type="button" value="In FF Click me" onclick="MyEventHandlerFF(event);" />
//IE and FF
function TNB(e) {
if (e.target) {
alert(e.target.value);
} else if (e.srcElement) {
alert(e.srcElement.value);
}
}
9，window对象的属性4：
clipboardData对象，对粘贴板的操作；
setData（"Text",val）：设置粘贴板中的值
getData("Text")：读取粘贴板的值，返回值为粘贴板中的内容
clearData（"Text"）：清空粘贴板；
案例:赋值地址给好友：详见下面备注：
<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');"/>
!!:当复制的时候body的oncopy方法被触发，直接return false就是禁止复制，<body oncopy="alert('禁止复制');return false;">
很多元素也有oncopy(复制),onpaste(粘贴)，oncut(剪切)
案例：禁止粘贴账号：
帐号：<input type="text" /><br />
重复帐号：<input type="text" onpaste="alert('为保证帐号的正确，请勿粘贴帐号');return false;" />
案例：在网站中复制文章的时候，为了防止那些”拷贝党”不添加文章来源，自动在复制的内容后添加版权声明。代码见下页：
=========================================Firefox下使用clipboardData对象===================缺东西：随后补出来
代码：
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自传智博客技术专区，转载请注明来源。'+loction.href);
}
oncopy="setTimeout('modifyClipboard()',100)"//用户在0.1秒钟以后再去改粘贴板中的内容，不能直接在oncopy哩修改粘贴板
不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
history操作历史记录：
Window.history.back()后退；
window.history.forward()前进；
Window.history.go(-1)后退;
Window.history.go(1)前进；
10,Window对象的属性5——document
document属性：
document的方法：
write();//向文档中写入内容：在onclick等事件中代码会冲掉页面的内容，只有在加载过程中write才会与原有内容融合在一起
writeln();//向文档中写入内容后，添加了一个回车：在源代码里面换行
document.write（）经常在广告代码，整合资源代码中被调用
=========================站长统计=====================================
<SCRIPT language=JavaScript charset=gb2312 src="http://s23.cnzz.com/stat.php?id=613505&web_id=613505&show=pic2"></SCRIPT>
A title=站长统计 href="http://www.cnzz.com/stat/website.php?web_id=613505" target=_blank><IMG border=0 hspace=0 vspace=0 src="http://icon.cnzz.com/pic2.gif"></A><IMG border=0 src="http://hzs13.cnzz.com/stat.htm?id=613505&r=&lg=zh-cn&ntime=0.20273000 1323873730&repeatip=1&rtime=0&cnzz_eid=16357578-1323873730-&showp=1440x900&st=31&sin=&res=0" width=0 height=0></DIV></DIV>
==========备注1===========
document.write('<pre>');
document.write('1');
document.writeln('2');
document.write('3');
document.write('</pre>');
这里是页面的内容。
<script type="text/javascript">
document.write("<font color=red>红色呀</font>");
</script>
哈哈哈哈哈 。
write经常在广告代码、整合资源代码中被使用
广告代码的例子：在http://heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中
整合资源的例子：百度新闻 http://news.baidu.com/newscode.html
百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。
脚本的好处：
1.自动执行
2.动态生成。
===================================example===============================
<script type="text/javascript">
var reffer = "";
var url = "";
if (window.parent != window.self) {
try { reffer = parent.document.referrer; }
catch (err) { reffer = document.referrer; }
try { url = parent.document.location; }
catch (err) { url = document.location; }
} else { reffer = document.referrer; url = document.location; }
document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='http://pv.heima8.com/index.php?p=126292971&b=100002856&itemid1=107075271&reffer=" + escape(reffer) + "&url=" + escape(url) + "' width='468' height='60'></iframe>");
</script>
==========================站长统计的============================
<script src="http://s84.cnzz.com/stat.php?id=3493955&web_id=3493955" language="JavaScript"></script>
11，Window对象的属性6
最基本的dom 遍历：
===================================备注1 ================================
//遍历直接子节点，如需获得所有节点，用递归。需要放在页面的最后测试（或者是在onload里面，否则页面还没有加载完毕。）
c
======================递归版本=========================
function dg(snodes){
//alert(snodes.nodeName+' '+snodes.childNodes.length);
for(var i=0;i<snodes.childNodes.length;i++)
{
alert(snodes.childNodes[i].nodeName);
if(snodes.childNodes[i].childNodes.length>0){
dg(snodes.childNodes[i]);
}
}
}
//放在onload事件中。
dg(document.documentElement);
//本来可以直接使用元素的Id来访问，但是如果元素嵌套在表单中后，就不能直接使用元素Id了
//还需要window.form.元素id,所以我们一般用document.getElementById(元素id).该方法无论在哪里
//都会搜索网页中的全部元素，找对应id的元素。
document.getElementById('btn2').value = 'button';
//如果在网页中有id重复的元素，那么getElementById()获得的是
//第一id为指定id的元素，而不是数组
var txtctrl = document.getElementById('txt1');
getElementById();(非常常用)，根据id获得对象，网页中id不能重复，也可以通过元素的Id来引用元素，但是有有效范围，form1.textbox1之类的问题（当元素放在form中的时候（html页面中需要通过form，元素id）），因此不建议直接通过id操作元素，而是通过getElementById；
getElementByName()；根据元素的name获得对象，由于网页中的元素的name 可以重复使用，比如多个RadioButton的name一样，因此getElementByName的返回值是对象数组；
getElementByTagName();获得指定标签名称的元素数组，比如：getElementByTagName（"p"）可以获得所有的<p>标签；
”*“表示所有的标签
!!:此处切记不要使用forin循环（forin循环是键值对，不是对象本身）
综合例题：
案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
================================================
<script type="text/javascript">
function g(){
ar ctrls=document.getElementsByTagName('input');
for(var i=0;i<ctrls.length;i++){
ctrls[i].value='哈哈';
}
window.event.srcElement.value='呜呜!!';
}
</script>
练习：加法计算器。两个文本框中输入
加法计算器。
<input type="text" id="num1" />+<input type="text" id="num2" />
<input type="button" onclick="calc()" value="=" /><input type="text" id="num3" />
function calc() {
var s1 = document.getElementById("num1").value;
var s2 = document.getElementById("num2").value;
var i3 = parseInt(s1) + parseInt(s2);
document.getElementById("num3").value = i3;
}
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = “” ，让元素可用。disabled=disabled,为不可用)disabled=true;
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
思路：
1、注册按钮初始状态为不可用，disabled
2、启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3、直到全局变量值为<=0，就让注册按钮可用，将按钮的文本设置为“同意”
练习：美女时钟。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>美女时钟</title>
<script type="text/javascript">
function GetImg() {
var curDate = new Date();
var h = curDate.getHours();
// var m = curDate.getMinutes();
var s = curDate.getSeconds();
if (h < 10) {
h = '0' + h;
}
if (s < 10) {
s = '0' + s;
}
var filename = 'images/' + h + '_' + s + '.jpg';
document.getElementById('imgClock').src = filename;
}
function ChangeTime() {
setInterval(GetImg, 1000);
}
</script>
</head>
<body onload="ChangeTime();">
<img id="imgClock" src="" />
</body>
</html>
12：冒泡事件：
事件冒泡:如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发，触发的顺序是由内而外的，验证：在页面上添加一个table，table理由tr,tr哩有td,td哩放一个P，在P，td,tr,table中添加onclick事件响应，下边：
//window.event.srcElement指最初引发事件的事件源（对象、元素）
//alert('body click ' + window.event.srcElement.id);
//this表示当前谁在执行事件，则this就表示哪个对象。
<table onclick="alert('table onclick');">
<tr onclick="alert('tr onclick');">
<td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
Span设置display：block；以后再设置height，width才会有效；
window.onload与body的onload的共同点：
1，二者效果完全一样，都是在页面内容都加载完毕后才触发；
2，由于网页中没有window所以在body中写onload
3，建议使用window.onload//使用JS脚本的方式高效
4，其实应该是document。onload，但是所有的浏览器都实现到了window对象上；
13：事件中的this：
事件中的this，除了可以使用event.srcElement在事件响应函数中，this表示发生的控件，只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里this表示window对象），如果使用则要将this传递给函数或者使用event.srcElement；
（*）this和event.srcElement的语义是不一样的：
this是表示当前监听事件的对象 ；
event.srcElement是引发事件的对象：事件冒泡；
<body onclick="这个叫做事件响应函数，在这里写this表示发生事件的控件，在这里调用另外一个函数F1，则F1中不能使用this表示发生事件的控件">
body.onclick=F1；
14，动态创建DOM：
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下，//父元素对象.removeChild（子元素对象）；删除元素。
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()" />
=====================常用方法与属性===========================
方法：
createElement(‘element’);
appendChild(node);
removeChild(node);
replaceChild(new,old);
insertBefore(new,参照);
属性：
firstChild
lastChild
//通过js动态创建的元素，直接 右键→查看源码是看不到的，需要通过“开发人员工具”才能看到。s
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
15，innerText和innerHTML：
innerText：表示：元素标签内内容的文本表示形式
innerHTML：表示：HTML源代码；
这俩个属性是可读可写的；火狐不支持innerText，在火狐下用textContent，也可以使用innerHTML设置普通文本编写兼容的innerText
详见实例：
=========================备注1==============================
function ihd() {
var vv = document.getElementById('dv1');
if (typeof (vv.innerText) == 'string') {
document.getElementById('dv1').innerText = '哈哈。。';
} else {
vv.textContent = '哈哈。。';
}
}
//innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码，
//innerHTML可以设置html代码和纯文本。
============innerHTML与innerText示例=================
<script type="text/javascript">
function showInfo() {
var aObj = document.getElementById('a1');
alert(aObj.innerHTML);
alert(aObj.innerText);
}
</script>
<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>
<br />
<input type="button" value="show innerText and innerHTML" onclick="showInfo();" />
===============================备注1===========================
<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>
<script type="text/javascript">
function showInfo() {
var aObj = document.getElementById('a1');
alert(aObj.innerHTML);
alert(aObj.innerText); //获取去掉html标签的所有文本
}
</script>
=========================================outerText与outerHTML=====================================
将原来的元素直接替换。
innerHTML也可以替代createElement，属于简单，粗放型，后果自负穿的创建
示例：
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";}
<span/>的innerHTML和<span></span>的innerHTML不一样。//建议，在使用之前要保证标签具有开始和结束标记，否则，会出现一下意想不到的后果。
16，浏览器兼容性问题：
浏览器兼容性的例子：
IE6，IE7对table。appendChild（”tr“）的支持和IE8不一样
用insertRow，insertCell来代替或者为表格添加tbody，然后向tbody中添加tr
所以动态网页加载网站列表的程序修改为：
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. tBodies[0].appendChild(tr);
16，innerHTML还是操作Dom节点
操作页面元素的时候是用innerHTML的方式还是createElement（），appendChild（）与removeChild（）的方式？
1，对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom 操作，先将页面的HTML 代码写好，然后调用一次innerHTML，而不要反复的调用innerHTML
2，对于使用innerHTML=‘’的方式来删除节点，在某些情况下会存在内存问题，比如：div下有很多其他元素，每个元素绑定有事件处理程序，此时innerHTML值是把当前元素从节点树上移除了，但是那些事件处理程序依然占内存
17，代码是否要放到onload中：
如果JS代码需要操作页面上的元素，则该代码需要放到onload中；
因为：当页面加载完毕之后页面才会有相关的元素；
如果JS代码中没有操作页面元素的语句，则可以将代码直接写在<script>标签中；
例如： 声明变量，相加求和等操作。
<body>
<!-- html标签-->
<script type="text/javascript">
//写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里面也可以操作页面上的元素。
//建议将操作页面元素的代码都放到onload里面。
</script>
</body>
18，JS操作页面样式及其他：
易错点：修改元素的样式不是设置class属性，而是className属性；
修改元素的样式不能this.style="background-color:red".
剖析：单独修改样式的属性使用style.属性名；注意在CSS中属性名在javascript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为javascript中-是不能做属性，类名的所以CSS中背景颜色是background-color。而javascript则是style.backgroundColor；元素样式名是class，在javascript中是className属性：font→style.fontSize；margin-top→style.marginTop //驼峰命名法。
单独修饰控件的样式:<input type="button" value="AAA" onclick="this.style.color='red'"/>
技巧：没有文档的情况下，随便给一个元素设定id；然后再JS中 就能id.style；.出来能用的属性。
操作float样式的时候，IE与其他浏览器不太一样；
IE：obj.style.styleFloat='right';
其他浏览器：obj.style.cssFloat='right';
通用代码祥见下：
========================备注1==========================
var vv = document.getElementById('dv1');
if (typeof (vv.style.styleFloat) == 'string') {
vv.style.styleFloat = 'right';
} else {
vv.style.cssFloat = 'right';
}
========================================================
<style type="text/css">
.emptyfield
{
background-color:Red;
}
.normal
{
background-color:inherit;
}
</style>
<script type="text/javascript">
function check(txt) {
var s = txt.value;
if (s.length <= 0) {
txt.className = "emptyfield";
alert('这个字段必填！');
}
else {
txt.className = "normal";
}
}
</script>
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
案例2：个td的时候，将这个td及之前的td背景变为红色，之后评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。自定义简易评分控件代码：
=========================================备注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>==
<!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 getCurrentIndex(curTd) {
<title>评分控件好看版</title>
<script type="text/javascript">
function getCurrentIndex(curTd) {
var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
for (var i = 0; i < tdArr.length; i++) {
if (curTd == tdArr[i]) {
return i;
}
}
return -1;
}
function initialEvent() {
var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
for (var i = 0; i < tdArr.length; i++) {
//为每个td设置分数
tdArr[i].setAttribute("curScore", 10 * (i + 1));
//绑定onmouseover事件
tdArr[i].onmouseover = function () {
//设置鼠标指针为:手形
this.style.cursor = 'hand';
var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
var curIndex = getCurrentIndex(this); //这里只能传this参数，不能传tdArr[i]
//将curIndex之前的五角星设置为：★
for (var j = 0; j <= curIndex; j++) {
tdArr[j].innerHTML = '★';
}
//将curIndex之后的五角星设置为：☆
for (var j = curIndex + 1; j < tdArr.length; j++) {
tdArr[j].innerHTML = '☆';
}
}
//绑定onclick事件
tdArr[i].onclick = function () {
alert('您当前的评分为：'+this.getAttribute('curScore'));
}
}
}
</script>
</head>
<body onload="initialEvent();">
<table id="tblVote" border="0" cellpadding="0" cellspacing="0" style="font-size: 40px;
color: Blue">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
</html>
19：控制层的显示：
修改style.display，例子：切换层的显示：
function togglediv(){
var div1=document.getElementById('div1');
if (div1.style.display == '') {
div1.style.display = 'none';//不显示
}
else {
div1.style.display = '';//显示
}
}
与元素对象.enabled=true或者readonly=true等不一样 ，这里是样式，不是元素的直接属性不能用true或者false
!!:对于div、table、font、p这类型的标签时没有name属性的。
对于没有name属性的元素，如果仍要加个name属性。那么通过document.getElementsByName（）也无法获取到。
一般只有表单元素才有name属性。
- DOMJavascript总结
- 总结
- 总结
- 总结
- 总结
- 总结！
- 总结
- 总结.
- 总结。
- 总结
- 总结
- 总结
- 总结
- 总结
- 总结
- 总结
- 总结
- 总结
- VBscript常用函数——其它函数
- 我怀念的是
- apache 统计日志访问IP数量
- Java类、成员变量、局部变量、成员方法的权限修饰
- JQuery选择器总结
- DOMJavascript总结
- apache,php,mysql,phpMyAdmin的配置.
- linux 禁止某个IP访问本机
- 基于tungsten API 同步mysql binlog出现EOF packet received的问题解决
- 什么时候该用NoSQL？
- JS函数定义方式的区别
- Poj 3468 A Simple Problem with Integers （线段树 区间更新 区间求和）
- 验证码的简单实现
- 第一章、mysql体系结构和存储引擎 [Mysql] (百度文库)
