1． Js在浏览器端运行；js相当于ado.net,dom相当于数据库
2． var inputs = document.getElementsByName("input1");//返回NodeList(集合)对象
getElementById在IE中只能拿到表单元素对象，document.getElementById(“divId”),如果页面上有多个相同id元素，则返回第一个
3． 事件冒泡：子元素会触发父级的事件，一直冒泡到最上层的元素
<body οnclick="alert('body')">
<table οnclick="window.event.cancelBubble()" id ="tab" > <!--取消冒泡-->
<tr οnclick="alert('tr')" id="tr" >
<td οnclick="alert('td')" id="td" >aaa</td>
取消事件冒泡：window.event.cancelBubble = true (IE)
event.preventDefault() (Firefox)
4．事件中的this，谁点出来的方法，那么方法里的this就是谁。this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡
5．修改元素的样式：cssText，gel("bDiv").cssText="color:green";
修改class属性是用：className
6．案例：文本框为空变红
var inputs = document.getElementsByName("txtName");
//alert(inputs instanceof NodeList);//在chrome中返回true，说明inputs不是数组,而是NodeList,IE中不行
for(i=0;i<inputs.length;i++){
inputs[i].onfocus = check;
inputs[i].onblur = check;
}
function check(){
var o = window.event.srcElement;
var str = o.value;
if(str==""){
o.style.backgroundColor="red";
}else{
o.style.backgroundColor="white";
}
}
7.案例：评分控件
评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色。
//--------------星星打分-----------
function gel(id){return document.getElementById(id);}
var tds = gel("tbList").childNodes[0].childNodes[0].childNodes;
//alert(tds.length);//返回5行
for(i=0;i<tds.length;i++){
tds[i].onclick = checkRed;
}
function checkRed() {
var tds2 = gel("tbList").childNodes[0].childNodes[0].childNodes;
//tds[i].style.backgroundColor = "red";//点击的时候，tds都不存在了！会报错
var nowTd = window.event.srcElement;
for (j = 0; j < tds2.length; j++) {//循环所有的单元格
if (tds2[j] == nowTd) {//找到被点击的单元格
for (z = 0; z < tds2.length; z++) {//再次循环所有单元格
if (z <= j) {//将所有 下标小于 当前单元格 的单元格 都设置成红色背景
//tds2[z].style.backgroundColor = "red";
tds2[z].style.cssText = "background-color:red";
} else {//将之后的 背景都设置为白色
//tds2[z].style.backgroundColor = "white";
tds2[z].style.cssText = "background-color:white";
}
}
}
}
}
8．IE中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则 “body 中最后一个元素以下（横向不限制）” 的部分是无法响应事件的，必须使用代码在document上监听那些事件
body以下是属于document的范围，document又属于window
9．浏览器兼容：要加上px，动态改变div大小：
<style>
#divSize{border:1px 100px #aabbcc}
</style>
<script type="text/javascript">
function gel(id){return document.getElementById(id)}
var timerId;
window.onload()=function(){
gel("Change").οnclick=function(){
timerId = setInterval(changeSize,50);
}
}
function changeSize(){
var nowWidth = gel("divSize").style.width;
nowWidth = parseInt(nowWidth);
if(nowWidth<=500){
gel("divSize").style.width = (nowWidth+10)+"px";
}else{
clearInterval(timerId);
}
}
</script>
</head>
<body>
<div id = "divSize" style="width:100px;">2011年8月8日22:25:44</div>
<input type="button" id="Change" value="changeSize" />
</body>
10．表单提交（重点）4中方法
(1) 通过js 代码，阻断表单提交的默认动作。window.event.returnValue = false; （不提倡使用，因为浏览器不兼容）
(2) 在表单中 添加 按钮(button)，在按钮的 onclick事件 方法中，调用表单对象的submit()方法，也可以提交表单。document.getElementById("mF").submit();
(3) 为 表单中的 提交按钮(submit) 添加 οnclick="return check();".当方法返回false，表单提交被打断。
function checkName(){
var strName=document.getElementById("txtName").value;
if(strName==""){
//不提交
alert("请提交用户名");
return false;
//window.event.returnValue = false;//打断 提交按钮的默认 提交操作（不提倡使用，因为浏览器不兼容）
}else{
return true;
//提交
//document.getElementById("mF").submit();
}
}
<input type="submit" value="提交" οnclick="return checkName();" />
(4) 为 表单 onsubmit = "return check();".当方法返回false，表单提交被打断。
如：<form οnsubmit="return checkName()"
function checkName(){
var strName=document.getElementById("txtName").value;
if(strName==""){
//不提交
alert("请提交用户名");
return false;
//window.event.returnValue = false;//打断 提交按钮的默认 提交操作（不提倡使用，因为浏览器不兼容）
}else{
return true;
//提交
//document.getElementById("mF").submit();
}
}
<form οnsubmit="return checkName()">
11．浏览器兼容，非IE中注意event
var btn = gel("txtName"); //获得按钮对象
btn.onclick = function (event) {//为按钮对象的点击事件绑定一个匿名方法。为了让火狐浏览器将事件参数传入，专门为该匿名函数 添加了一个 事件参数(IE里没用)
追加事件：非IE浏览器btn.addEventListener(evType,fn,false)//要追加事件的dom元素，要追加的事件名，要追加的方法;IE浏览器btn.attachEvent(“on”+evType,fn)
12.(1)dom元素的操作 insertBefore
var newBtn = document.createElement("input");
newBtn.type = "button";
newBtn.value = "新按钮";
gel("divC").insertBefore(newBtn, bt);
(2) cloneNode(bool)-复制节点(true-深拷贝(子节点内容也拷贝进去),false-浅拷贝(只拷贝当前节点))
13．TEXT元素(TextNode)
l document.createTextNode("Hello world!")
l normalize 合并某一元素下所有的连接的兄弟文本元素
var textNode= document.createTextNode("Hello world!");
var tb = gel("bd");
tb.appendChild(textNode);
tb.appendChild(document.createTextNode("Hello world!"));
tb.normalize();
14.DocumentFragment类型(文档片段)
var bd = gel("bd");
var fdf = document.createDocumentFragment();
for (i = 0; i < 10; i++) {
var d = document.createElement("div");
d.style.cssText = "border:1px solid #000;height:20px;";
fdf.appendChild(d);
}
bd.appendChild(fdf);
var fdf = document.createDocumentFragment();
文档片段，当在需要将很多dom元素加入dom树时，最好先将dom元素加入到
文档片段对象中，然后一次性将 文档片段 对象加入到dom树。
注意：文档片段对象 本身并不会被添加到dom树中。
15．在js里没有类的概念，平常我们在C#里说的类的概念，在js里就是对象。
对象的概念，在js里叫对象的实例。
在调用方法，实际传递的参数，都是保存在方法的 内部属性arguments中。
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
