【zt】web学习day02

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

2、dom
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);
  练习：
  做一个简单的菜单。