【zt】web学习day02

[size=medium][color=red]1、函数(第一部分)[/color]
1)基本语法
function 函数名(参数1,..参数n){
函数体
}
2)函数可以有返回值
function 函数名(参数1,..参数n){
函数体
return...
}
3)函数内部有一个arguments对象，通过该对象
可以访问到参数值。函数在传参的时候，实际上，
会将参数值先封装到arguments对象里，然后再
传给相应的形参。
可以通过arguments[下标]来访问参数值。
函数不能够重载（也就是说，如果有同名的函数，
则后一个函数会覆盖前一个函数的定义）。

[color=red]2、dom[/color]
1)dom是什么?
Document Object Model。将一个结构化的文档
（xml,html文档）转化成一棵树，通过对树的操作
（包括查询某个节点的值、删除某个节点、添加节点
或者修改节点的值或者属性值）来间接实现对文档的
操作。
2)w3c dom模型
(1),基本结构(了解)
Node
Document
HTMLDocument
HTMLBodyElement
Element
HTMLElement
HTMLFormElement
HTMLInputElement
HTMLSelectElement
HTMLOptionElement
HTMLDivElement
HTMLTableElement
HTMLTableCaptionElement
HTMLTableRowElement
HTMLTableCellElement
...
(2),操作
a,查询节点
方式一:依据节点的id值来查找。
var obj = document.getElementById(id);
方式二：
通过遍历的方式（这种方式浏览器不兼容）。
parentNode：父节点
previousSibling : 前一个兄弟节点
nextSibling ：后一个兄弟节点
childNodes : 所有的子节点
firstChild:第一个子节点
lastChild：最后一个子节点
方式三：
var arr = obj.getElementsByTagName(tagName);
依据标记名(tagName)，返回符合该标记名的
所有节点。

查找到节点后，可以通过value属性读取或者设置
文本输入框、密码输入框、按钮等的值。也可以
通过innerHTML属性设置或者读取节点的html文本。

b,创建节点
document.createElement(tagName);
比如:
var div = document.createElement('div');
c,添加节点
var obj = document.getElementById(id);
obj.appendChild(newNode):
将newNode添加到obj的所有的子节点末尾。
obj.insertBefore(newNode,refNode):
将newNode添加到refNode节点之前。
obj.replaceChild(newNode,refNode):
使用newNode替换refNode。
d,删除节点
var obj = document.getElementById(id);
obj.removeChild(node);
e,样式操作
方式一：
修改className属性
比如:
var obj = document.getElementById('id1');
obj.className='s1';
方式二:
修改style属性(通过style属性，可以读取或者
修改节点的style值)
比如:
var obj = document.getElementById('id1');
obj.style.backgroundColor='red';
要注意：
只能够修改内联样式。
如果样式包括"-"，应该将"-"除掉，然后
将后面的第一个字符大写。

如果禁止浏览器的默认行为:
在默认情况下，浏览器会有如下的默认行为：
点击链接，浏览器会跳转到链接所指向的地址。
点击提交按钮，浏览器会提交表单中的数据。
如果要禁止，可以使用"return false"语句。
<a href="abc.do" onclick="return false;">clickme</a>
练习：
表单验证:
密码确认:两次输入必须相等
身份证号码:
身份证号码必须是15位数字或者18位数字
(最末一位也可以是X或者x)
正则表达式：
var reg = /.../;
reg.test(value);
练习：
做一个简单的菜单。[/size]