javaScript高级程序设计读书笔记
一：目录介绍
第三章：对象基础（完成） Math是内置对象无须new
本地对象.Object,Array,String,Boolean,Number,Date,RegExp,Eg:var array=new Array();
第六章:DOM基础
第七章:正则表达式
第九章:事件
第十一章:表单和数据完整性
二：5．3：BOM
Brower Object Model
Window:Frames集合中，可以用数字或名称对框架进行索引，window.frames[0]或top.frames[0]。Top表示浏览器本身
Window.open(“http://”,”topFrame”) 两个参数表示载入新窗口的URL,和新窗口的名称。
Window.alert();
Window.confirm();//与alert类似，带有cancel
Window.setTimeout(“par1”,par2)//par1 要执行的代码，par2 等待的毫秒数
Window.history.go(1),history.go(-1)
prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
Localtion对象
Location对象表示载入窗口的URL
最常用的属性javasrcipt:location.href=http://www.sina.com导航到新的页面
Location.reload(true) //从服务器端重载当前页面，
Location.reload(false);//从缓存中重载当前页面
注意：location对象是window对象和document对象的属性，所以window.location和document.location相互等价，可以交换使用
三：DOM基础 Document Object Model
DOM访问指定节点
（一）：getElementsByTagName();//返回一个对象数组
var oImgs=document.getElementsByTagName(“img”)//所有图形都存于oImgs中
alert(oImgs[0].tagName); 输出第一个图象的标签名
var oPs=document.getElementsByTagName(“p”);//得到某一个段落的所有图象
var attribute oPs.getAttribute(“align”); <p align=”bottom”>
alert(attribute) //bottom
var oImgsInp=oPs.getElementsByTagName(“img”);
（二）：getElementsByName();
<input type=”radio” name=”radColor” value=”red”/>Red<br/>
<input type=”radio” name=”redColor” value=” Green”/> Green</br>
<input type=”radio” name=”radColor” value=”blue”/>Blue</br>
Var oRadios=document.getElementsByName(“radColor”);
alert(oRadios[0].getAttribute(“value”));//output “red”
(三)：getElementById()//从文档树中快速指定单个元素
<html>
<p>Hello World!</p>
<div id=”div1”>This is my div</div>
</html>
Var oDivs=document.getElementsByTagName(“div”);
Var oDiv1=null;
For(var i=0;i<oDivs.length;i++){
If(oDivs.getAttrubute(“id”)==”div1”){
oDiv1=oDivs[i];
break;
}
}
等价与var oDiv1=document.getElementById(“div1”);
DOM创建和操作节点
createElement();
createTextNode();
appendChild();
ex:将<p>Hello World</p>添加到页面中
var oP=document.createElement(“p”);
var oText=document.createTextNode(“Hello World!”);
document.body.appendChild(oP);
（3）table方法
//create the table
Var otable=document.createElement(“table”);
Otable.setAttribute(“border”,”1”);
Otable.setAttribute(“width”,”100%”);
//create the Tbody
Var tbody=document.createElement(“tbody”);
//add the tbody to the table
Otable.appendChild(tbody);
//add the first row
Var otr=document.createElement(“tr”);
Var otd=document.createElement(“td”);
Otd.appendChild(document.createTextNode(“my first cols”));
Otr.appendChild(“otd”);
//add the table to the document body
Document.body.appendChild(otable);
//table特性
deleteRow(position); //删除指定位置上得行
insertRow(position); //在rows集合中得指定位置插入一新行
//tbody 特性
Rows //tbody 中所有行得集合
deleteRow(position); //删除指定位置上得行
insertRow(position); //在rows集合中得指定位置插入一新行
Cells // tbody 中所有单元格得集合
deleteCell(position); //删除指定位置上得行
insertCell(position); //在rows集合中得指定位置插入一新行
example:
var tb=document.getElementById(“tbodyId”);
for(var i=0;i<tb.rows.length;i++){
cellValues=tb.rows[i].cells;
for(var j=0;j<cellValues.length;j++){
if( cellValues[j].firstChild.nodeValue!=null){
//或者cellValues[j].childNodes[0].value;
}
}
}
简化后得代码
//create the table
Var otable=document.createElement(“table”);
Otable.setAttribute(“border”,”1”);
Otable.setAttribute(“width”,”100%”);
//create the Tbody
Var tbody=document.createElement(“tbody”);
//add the tbody to the table
Otable.appendChild(tbody);
//add the first row
Tbody.insertRow(0);
//add the first col
Tbody.rows[0].insertCell(0);
Tbody.rows[0].cells[0].appendChild(document.createTextNode(“my first row”));
Document.body.appendChild(otable);
四：
（一）：事件的分类：()
1: Click事件 鼠标单击事件
2: MouseOver 鼠标移到连接上发生的事件
3: MouseOut 鼠标离开连接上发生的事件
4: load 在浏览器完成对象的装载后立即触发。如：img (unload)
5：Change事件 就是当文本框的内容改变的时候，发生的事件。
6：Select事件 所谓的Select事件就是当文本框的内容被选中的时候发生的事件。
7: submit 表单被提交时发生的事情
8：reset 点击重置按钮触发
9：Focus事件 所谓的Focus事件就是当光标落在文本框中的时候，发生的事件。
10:blur 当对象失去焦点时，发生的事情
对应的事件处理函数 Click(),MouseOver()….
(二):事件处理函数
响应某个事件而调用的函数叫事件处理函数
两种分配方式
（1）：在javascript中分配事件处理函数，首先获取处理对象的引用，然后将函数赋值给对应事件处理函数属性，
Var oDiv=document.getElementByID(“txt1”);
oDiv.οnclick=function(){ //onclick函数必须小写
alter(“I was clicked”);
}
(2):在HTML中分配事件处理函数，(常用)
<div onClick=”alert(‘I was clicked’)”></div>
五：表单和数据完整性
(1):表单特性：method,action,enctype//向服务器发送数据时使用的编码方法，上传文件设置为multipart/form-data
(2)表单字段的共性
除了（隐藏字段）都有的特性，方法，事件
Disabled 设置字段是否被禁用
Form 指向字段对应的表单
Blur() 可以使表单字段失去焦点（焦点移到别处）
focus() 可以使表单字段获取焦点（控件被选中）
当字段失去焦点，发生blur事件，执行onblur事件处理函数
当字段获取焦点，发生focus事件，执行onfocus事件处理函数
隐藏字段只有form特性
(3):获取表单引用的方法
Var oForm=document.getElementById(“form1”);
Var oForm=document.getElementByName(“form1”);
Var oForm=document.forms[0]//通过某个表单在forms集合中的位置
Var oForm=document.forms[“form1”]与方法二类似
（4）：提交表单
方法有二
<input type=”submint” value=”提交”/>
<input type=”image” src=”submit.gif”/>
在js中通过获取表单引用后直接调用
oForm.submit()方法则表单中的数据就直接提交到服务器上去执行了
<script language=”javascript” type=”text/javascript”>
Function check(){
……
}
</script>
<form name=”form1” method=”post”action=”index.jsp” onSubmit=”return check()”>
等价于
<input type=”button” value=”提交” οnclick=”document.forms[0].submit()”/>
按下提交按钮后，会触发submit事件，调用onSubmit事件处理函数。这个函数可以用来在提交过程前验证表单，如果使用oForm.submit()方法是不会触发submit事件的。
小技巧：仅提交一次:<input type=”button” value=”提交” οnclick=”this.disabled=true;this.form.submit()”/>
（5）：文本框
1:Text和textarea size maxlength cols rows
获取和更改文本框的值 的到的值value特性是一个字符串，可以使用任何字符串的特性和方法，如：length.
Cols rows 表示一行或一列能显示多少字。
Eg:<textarea cols=“10” rows=”10” style=”overflow:hidden color:red”></textarea>
2:选择文本
Select()方法 //可以选中文本框中的所有文本。Text和textarea
必须在调用select()方法以前调用focus()方法以获取焦点，
(6):文本框事件
Change和select事件
Change:当用户更改内容后文本框失去焦点与blur事件的区别是:只要文本框失去焦点就触发blur事件而change事件只有在文本框的文本改变，失去焦点时才触发。如果文本不变，但文本框失去焦点，那么只有blur事件触发；如果文本发生改变，则先触发change事件后触发blur事件
<input type="text" name="textbox" value="" οnblur="alert('blur')" οnchange="alert('change')"/>
Select 事件和文本框的焦点无关。当用户选中一个或多个字符或调用select()方法时触发这个事件
<input type="text" name="textbox" value="" οnselect="alert('select')"/>
(7):自动选择文本框
当用户切换到文本框时其中全部内容已经被选中
<input type=”text” οnfοcus=”this.select()”>
<textarea οnfοcus=”this.select()”/>
（8）：列表框和组合框mutiple
<select name=”s1” id=”sid”size=”2”>//size 控制可见条目个数
<option value=”op1”>s1</option>
<option value=”op2”>s2</option>
<option value=”op3”>s3</option>
</select>
oListbox=document.getElementById(“sid”);//获取列表框引用
var sText=oListbox.options[0].text //options集合返回文本：s1
var sVar=oListbox.options[0].value //options集合返回值特性：op1
var sIndex=oListbox.options[1].index//表示在options集合中的位置
var slength=oListbox.options.length //表示有多少个选项
var sfirst=oListbox.selectedindex //表示组合框中目前选中的选项第一个选中的索引
(9):添加选项(下拉列表)
function add(oListbox,sName,sValue){
var oOption=document.createElement("option")
oOption.appendChild(document.createTextNode(sName));
if(arguments.length==3){
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption);
}
