bom_dom

来源：互联网发布：微信闪退修复软件编辑：程序博客网时间：2024/06/05 11:20

1. BOM编程

1.1. BOM编程基础

全称 Browser Object Model，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

1.2. BOM对象：

1.3. window 对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

1.3.1. window中的属性

属性: status

//属性:defaultStatus设置或返回窗口状态栏中的默认文本。

window.defaultStatus = "大家好";

window.status ="欢迎大家";

案例:

设置滚动的状态栏

//1.设置滚动的状态栏

var mess ="大家早上好";

var count =0;

function showMess(){

window.status= mess.substring(0,++count);

if(count >=mess.length) {

count = 0;

}

window.setTimeout(showMess,500);

}

showMess();

1.3.2. window中的方法

对话框

都是window的方法.

alert() 显示一个警告框。

confirm() 选择确定框。

prompt() 输入框。

关闭窗口:

<p>

<ahref="#"onclick="myClose()">关闭窗口</a>

</p>

function myClose(){

window.close();

}

打开一个新窗口

document 对 Document 对象的只读引用

location 用于窗口或框架的 Location 对象

history 对 History 对象的只读引用。

status 获取或设置窗口状态栏的文本。

document.tilte 设置网页的标题

   moveto()  将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveby() 相对于目前的位置移动。

resizeTo()   调整当前浏览器的窗口。

open() 打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）

setTimeout(vCode, iMilliSeconds) 超时后执行代码。

setInterval(vCode, iMilliSeconds) 定时执行代码，第一次也是先待，到时再执行。

2. 事件

a) 事件说明

基本上所有的HTML元素中都可以指定事件属性。

每个元素支持什么样事件应查询文档。

所有的事件属性都是以on开头，后面的是事件的触发方式，如：

onclick，表示单击

onkeydown，表示键按下

...

b) 常用的事件类型：

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发。

ondblclick 当用户双击对象时触发。

onmousedown 当用户用任何鼠标按钮单击对象时触发。

onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseout 当用户将鼠标指针移出对象边界时触发。

onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

onblur 在对象失去输入焦点时触发。

onfocus 当对象获得焦点时触发。

按键相关的：

onkeydown 当用户按下键盘按键时触发。

onkeyup 当用户释放键盘按键时触发。

onkeypress 当用户按下字面键时触发。

其他：

onchange 当对象或选中区的内容改变时触发。

onload 在浏览器完成对象的装载后立即触发。

onsubmit 当表单将要被提交时触发。

location 对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

location中的重要方法：

href属性设置或获取整个 URL 为字符串。

reload() 重新装入当前页面

1.3.3. screen 对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

属性：

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。

availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

height 获取屏幕的垂直分辨率。

width 获取屏幕的水平分辨率。

示例：

document.write("屏幕工作区: " + screen.availHeight + "," + screen.availWidth + "<br>");

document.write("屏幕分辨率: " + screen.height + ", " +screen.width + "<br>");

1.3.4. document对象

该对象代表整个文档页面

对象的集合：

all 获取页面所有元素对象, firfox不兼用该属性

forms 获取页面所有表单对象

images 获取页面所有图片对象

links 获取所有超链接或area对象

具体的内容会在学习DOM时学习。

2. DOM

2.1. DOM简介

全称Document Object Model，即文档对象模型。

DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，

而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，

组建好之后，按照树的结构将页面显示在浏览器的窗口中。

2.2. 节点层次

HTML网页是可以看做是一个树状的结构，如下：

html

|-- head

| |-- title

| |-- meta

| ...

|-- body

| |-- div

| |-- form

| | |-- input

| | |-- textarea

... ... ...

这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。

节点最多有一个父节点，可以有多个子节点。

HTML DOM 定义了访问和操作HTML文档的标准方法。

document

代表当前页面的整个文档树。

访问属性

all

forms

images

links

body

访问方法(最常用的DOM方法)

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript">

// 获取dom树, 获取document对象.

var dom = window.document;

// all 获取页面中所有的标签节点 ,注释和文档类型约束.

function testAll() {

var allArr = dom.all;

alert(allArr.length);

for (var i = 0; i < allArr.length; i++) {

//获取节点名称

alert(allArr[i].nodeName);

}

// anchors 获取页面中的所有的锚连接.

function testAnchors() {

var anArr = dom.anchors;

alert(anArr.length);

}

// froms 获取所有的form表单对象

function testForms() {

var formArr = dom.forms;

alert(formArr.length);

alert(formArr[0].nodeName);

}

// images

function testImages() {

var imageArr = dom.images;

alert(imageArr.length);

}

// links 获取页面的超链接.

function testLinks() {

var linkArr = dom.links;

//alert(linkArr.length);

for (var i = 0; i < linkArr.length; i++) {

//alert(linkArr[i].nodeName);

}

for (var iin linkArr) {

alert(i);

}

//testLinks();

// 获取页面的Body

var body = dom.body;

alert(body.nodeName);

</script>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>javascript</title>

</head>

<bodyonmousemove="test(this)">

<imgsrc="xxx"alt="这是一个美女"/>

<ahref="http://www.baidu.com">百度一下</a>

<ahref="http://www.google.com">百度两下</a>

<ahref="http://www.baigu.com">百谷一下</a>

<aname="one"></a>

<aname="two"></a>

<form>

</form>

</body>

</html>

2.3. 获取节点对象案例

document.getElementById("html元素的id")

document.getElementsByTagName("标签名")

document.getElementsByName("html元素的name")

示例：

1，得到所有的div元素并显示信息（innerHTML）。

2，得到所有div元素中id为"test"的结果。

var dom = window.document;

function testByTagName() {

var iptArr = dom.getElementsByTagName("input");

for (var i = 0; i < iptArr.length; i++) {

alert(iptArr[i].value);

}

// window 对象提供了一个事件, onload事件 onload(页面加载完毕执行该代码)是一个事件, 给事件一个方法,

//window.onload = testByTagName;

//2，得到所有标签id为"username"的结果。获取旧value值并设置value值

function testById() {

var user = dom.getElementById("username");

alert(user.value);

user.value = "rose";

}

//testById();

//3. 获取所有标签name为like的元素.获取value值.

function testByName() {

var likeArr = dom.getElementsByName("like");

for (var i = 0; i < likeArr.length; i++) {

alert(likeArr[i].value);

}

testByName();

2.3.1. 案例

显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue

2.3.2. 属性操作练习

1，写一个form，其中有多个checkbox。

2，获取所有选中的数量。

3，实现全选与全不选的效果。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<scripttype="text/javascript">

function getSum()

{

需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。

思路：

1，先获取所有的checkbox对象。

2，对这些对象进行遍历。判断哪个对象被选中。

3，对被选中对象的金额进行累加。

4，显示在按钮右边。

var items = document.getElementsByName("item");

var sum = 0;

for(var x=0; x<items.length; x++)

{

if(items[x].checked)

{

sum += parseInt(items[x].value);

}

var str = sum+"元";

document.getElementById("sumid").innerHTML = str.fontcolor('red');

}

function checkAll(node)

{

需求：通过全选checkbox，将其他条目都选中。

思路：

只要将全选checkbox的checked状态赋值给其他的item checked状态即可。

//var allNode = document.getElementsByName("all")[index];

var items = document.getElementsByName("item");

for(var x=0; x<items.length; x++)

{

items[x].checked = node.checked;

}

</script>

</head>

<body>

<inputtype="checkbox"name="all"onclick="checkAll(this)" />全选<br/>

<inputtype="checkbox"name="item"value="3000"/>笔记本电脑3000元<br/>

<inputtype="checkbox"name="item"value="3000" />笔记本电脑3000元<br/>

<inputtype="checkbox"name="all"onclick="checkAll(this)" />全选<br/>

<inputtype="button"value="总金额："onclick="getSum()"/><spanid="sumid"></span>

</body>

</html>

2.4. 通过节点关系查找节点

从一个节点出发开始查找：

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素。

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling 获取当前节点的下一个节点。（兄节点）

previousSibling 获取当前节点的上一个节点。（弟节点）

示例1：

firstChild属性最普遍的用法是访问某个元素的文本：

var text=x.firstChild.nodeValue;

示例2：

parentNode 属性常被用来改变文档的结构。

假设您希望从文档中删除带有 id 为 "maindiv" 的节点：

varx=document.getElementById("maindiv");

x.parentNode.removeChild(x);

2.4.1. 获取节点对象的信息

每个节点都包含的信息的，这些属性是：

nodeType 节点类型

nodeName 节点名称

nodeValue 节点值

nodeType

nodeType 属性可返回节点的类型。

---------------------------------

元素类型节点类型

------------------

元素 1 就是标签元素，例<div>..</div>

文本 3 标签元素中的文本

注释 8 表示为注释

nodeName

nodeName 属性含有某个节点的名称。

--------------------------------

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

nodeValue

对于文本节点，nodeValue 属性是所包含的文本。

对于属性节点，nodeValue 属性是属性值。

对于注释节点，nodeValue 属性注释内容。

nodeValue 属性对于文档节点和元素节点是不可用的。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript">

//节点和节点之间的关系.

//获取dom树

var dom = window.document;

//获取指定id的标签节点.

function test() {

var form = dom.getElementById("form1");

//获取父节点.

//alert(form.parentNode.nodeName);

//获取子节点(Node 包含文本,注释,标签)

var childArr = form.childNodes;

//alert(childArr.length);

for (var i = 0; i < childArr.length; i++) {

alert(childArr[i]);

}

//获取第一个孩子.

var first = form.firstChild;

//alert(first);

//最后一个孩子.

var last = form.lastChild;

//alert(last);

//获取下兄弟(获取弟弟)

var sibling = form.nextSibling;

//alert(sibling.nodeName);

//获取大哥

var previous = form.previousSibling;

alert(previous.nodeName);

}

test();

</script>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>javascript</title>

</head>

<bodyonmousemove="test(this)">

<formid="form1">

<inputtype="text"/>

</form>

</body>

</html>

2.5. 节点操作

2.5.1. 创建新节点

document.createElement("标签名") 创建新元素节点

document.createTextNode("文本内容") 创建新文本节点

elt.setAttribute("属性名", "属性值") 设置属性

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript">

///创建一个文本输入框.

// 获取dom树.

var dom = window.document;

// 获取body节点.

var body = dom.body;

// 创建标签节点 ,注意: 节点创建成功,需要挂载在DOM树中, 指定父节点.

function testCreateElement() {

//创建了一个input 节点.

var ipt = dom.createElement("input");

//alert(ipt);

//指定节点存放的位置. 指定父节点.挂载在父节点下(认爹)

ipt.setAttribute("id","username");

//父节点挂载子节点.

body.appendChild(ipt);

}

// 创建文本?文本节点

function testCreateTextNode() {

var text = dom.createTextNode("姓名:");

//挂载该节点.该方法默认尾部追加

body.appendChild(text);

}

// 创建标签节点,是一个按钮

function testCreateButton() {

var ipt = dom.createElement("input");

//设置节点的属性.

ipt.setAttribute("type","button");

ipt.setAttribute("value","按钮");

//挂载节点

//body.appendChild(ipt);

//指定位置的.

//获取位置.

var user = dom.getElementById("username");

//参数一: 需要添加的新节点, 参数二:指定位置.先元素会添加到在改位置之前

body.insertBefore(ipt, user);

//按钮添加事件.节点对象.事件名的形式添加事件

ipt.onclick = test;

ipt.re

}

function test() {

//删除节点.

this.parentNode.removeChild(this);

}

testCreateTextNode();

testCreateElement();

testCreateButton();

test();

</script>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>javascript</title>

</head>

<bodyonmousemove="test(this)">

</body>

</html>

2.5.2. 把新节点放到指定位置

elt.appendChild(e) 添加元素到elt中最后的位置

elt.insertBefore(new, child); 添加到elt中，child之前。

// 参数1：要插入的节点参数2：插入目标元素的位置

2.5.3. 移除某个节点

elt.removeChild(eChild) 删除指定的子节点

示例：

var by = document.forms[0]

var ip =document.createElement("input");

document.createTextNode() ;

ip.setAttribute("type","file");

by.appendChild(ip);

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<styletype="text/css">

table a:link,table a:visited{

color:#0099FF;

text-decoration:none;

}

</style>

<scripttype="text/javascript">

function addFile()

{

var tabNode = document.getElementById("fileid");

var trNode = tabNode.insertRow();

var tdNode_File = trNode.insertCell();

var tdNode_del = trNode.insertCell();

tdNode_File.innerHTML = "<input type='file' />";

tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delFile(this)'>删除附件</a>";

//tdNode_del.innerHTML = "<img src='1.jpg' alt='删除附件' onclick='delFile(this)' />";

}

function delFile(node)

{

//alert(node.parentNode.parentNode.nodeName);

var trNode = node.parentNode.parentNode;

//trNode.removeNode(true);//将tr自己删除，并删除自己的子节点。

trNode.parentNode.removeChild(trNode);

}

</script>

</head>

<body>

<tableid="fileid">

<tr>

</tr>

</table>

</body>

</html>

2.5.4. 案例

1. 生成二级城市联动菜单

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<styletype="text/css">

select{

width:100px;

}

</style>

<scripttype="text/javascript">

function selcity()

{

//定义数据对应关系

//城市有很多，所以通过数组存储。每一个省对应一个城市数组，怎么建立对应关系呢？

//每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。

var arr = [['--选择城市--'],['海淀区','朝阳区','东城区','西城区']

,['沈阳','大连','鞍山','抚顺']

,['济南','青岛','烟台','威海']

,['石家庄','廊坊','唐山','秦皇岛']];

//获取选择的省的角标。

var selNode = document.getElementById("selid");

var index = selNode.selectedIndex;

var cities = arr[index];

var subSelNode = document.getElementById("subselid");

//有更简单清除方式，只要改变下拉菜单的长度即可。

subSelNode.options.length = 0;

//清除上一次选择的子菜单内容。

for(var x=1; x<subSelNode.options.length;)

{

alert(subSelNode.options.length+"..."+subSelNode.options[x].innerHTML+"..."+x);

subSelNode.removeChild(subSelNode.options[x]);

}

for(var x=0; x<cities.length; x++)

{

var optNode = document.createElement("option");

optNode.innerHTML = cities[x];

subselid.appendChild(optNode);

}

</script>

</head>

<body>

<selectid="selid"onchange="selcity()">

</select>

<selectid="subselid">

</select>

</body>

</html>

2.动态生成年、月、日字段

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript">

/**

* @author Administrator

//通过js创建年,月,日

//获取Dom

var dom = window.document;

function myYear() {

//获取年的select

var year = dom.getElementById("year");

//创建年

var minYear = 1900;

var maxYear =new Date().getFullYear();

for (var i = minYear; i <= maxYear; i++) {

//创建Option

var opt = dom.createElement("option");

//设置Option,标签体.

opt.innerHTML = i;

opt.value = i;

//挂载节点

year.appendChild(opt);

}

function myMonth() {

var month = dom.getElementById("month");

//创建月

for (var i = 1; i <= 12; i++) {

//创建Option

var opt = dom.createElement("option");

//设置Option,标签体.

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = i;

} else {

opt.innerHTML = i;

opt.value = i;

}

month.appendChild(opt);

}

month.onchange = myDay;

}

function myDay() {

clear();

//创建天

//大月1 3 5 7 8 10 12 ,小月4 6 9 11 闰年2月非闰年的2月

//获取年

var year = dom.getElementById("year").value;

//获取月

var month = dom.getElementById("month").value;

if (year =="") {

alert("请选择年");

return;

}

if (month =="") {

alert("请选择月");

return;

}

//获取天select

var day = dom.getElementById("day");

//一个月至少有28天.

for (var i = 1; i <= 28; i++) {

var opt = dom.createElement("option");

if (i < 10) {

opt.innerHTML = "0" + i;

opt.value = "0" + i;

} else {

opt.innerHTML = i;

opt.value = i;

}

day.appendChild(opt);

}

//大月

var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;

//小月

var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;

//闰年

var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;

//判断,如果是大月,添加3天

if (isBigMonth) {

//添加3天

for (var i = 29; i <= 31; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} elseif (isSmallMonth) {

//添加2天

for (var i = 29; i <= 30; i++) {

var opt = dom.createElement("option");

opt.innerHTML = i;

opt.value = i;

day.appendChild(opt);

}

} elseif (isLeapYear) {

//如果是闰年,添加一天.专门处理闰年2月.

var opt = dom.createElement("option");

opt.innerHTML = 29;

opt.value = 29;

day.appendChild(opt);

}

function clear() {

var day = dom.getElementById("day");

var optArr = day.childNodes;

for (var i = optArr.length - 1; i >= 0; i--) {

day.removeChild(optArr[i]);

}

function getBirthday() {

//获取Dom

var dom = window.document;

myYear();

myMonth();

}

getBirthday();

</script>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>javascript</title>

</head>

<body>

生日:

<selectid="year">

</select>

<selectid="month">

</select>

<selectid="day">

</select>

</body>

</html>

2，实现增删改查表格的增删改查。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript">

var dom = window.document;

function getUserData() {

//获取id

var uid = dom.getElementById("uid").value;

var username = dom.getElementById("username").value;

var pwd = dom.getElementById("pwd").value;

var age = dom.getElementById("age").value;

var city = dom.getElementById("city").value;

//创建一个对象.封装用户的信息

//创建对象

var p1 =new Object();

//成员

p1.uid = uid;

p1.username = username;

p1.pwd = pwd;

p1.age = age;

p1.city = city;

//函数

p1.toString = function() {

alert("对象的toString方法");

alert(p1.uid + ":" + p1.username + ":" + p1.pwd +":" + p1.age +":" + p1.city);

}

//执行对象的功能.

//p1.toString();

return p1;

}

function createUser() {

//获取用户录入的信息.

var person = getUserData();

//将用户的信息显示在表单中.

//创建用户

//创建TR

var dom = window.document;

var tr1 = dom.createElement("tr");

//创建TD 7个

var td1 = dom.createElement("td");

var td2 = dom.createElement("td");

var td3 = dom.createElement("td");

var td4 = dom.createElement("td");

var td5 = dom.createElement("td");

var td6 = dom.createElement("td");

var td7 = dom.createElement("td");

//TD中添加用户的信息.

//td1中需要添加一个复选框

//1.创建复选框.

var select = dom.createElement("input");

//设置属性,变为复选框

select.setAttribute("type","checkbox");

select.setAttribute("name","select");

//挂载节点.

td1.appendChild(select);

td2.appendChild(dom.createTextNode(person.uid));

td3.appendChild(dom.createTextNode(person.username));

td4.appendChild(dom.createTextNode(person.pwd));

td5.appendChild(dom.createTextNode(person.age));

td6.appendChild(dom.createTextNode(person.city));

//td7的内容是一个按钮.

//创建按钮

var but = dom.createElement("input");

but.setAttribute("type","button");

but.setAttribute("value","删除");

//注册事件(单击事件)

but.onclick = myDelete;

//挂载节点.

td7.appendChild(but);

//将td挂载到tr中

tr1.appendChild(td1);

tr1.appendChild(td2);

tr1.appendChild(td3);

tr1.appendChild(td4);

tr1.appendChild(td5);

tr1.appendChild(td6);

tr1.appendChild(td7);

//将tr挂载到tbody中

//获取table

// var tb1 = dom.getElementById("tb1");

// tb1.appendChild(tr1);

//获取tbody

var tbody1 = dom.getElementsByTagName("tbody")[0];

tbody1.appendChild(tr1);

}

function checkUserData() {

returnfalse;

}

function addUser() {

//获取用户信息

var person = getUserData();

//检测用户数据有效性

if (checkUserData()) {

//创建用户

createUser(person);

}

//全部选中的功能.

function mySelectAll() {

//获取复选框.

var selectAll = dom.getElementById("selectAll");

//获取程序创建的复选框

var selectArr = dom.getElementsByName("select");

if (selectAll.checked) {

for (var i = 0; i < selectArr.length; i++) {

selectArr[i].checked =true;

}

} else {

for (var i = 0; i < selectArr.length; i++) {

selectArr[i].checked =false;

}

//全部删除功能

function myDeleteAll() {

//获取复选框.

var selectAll = dom.getElementById("selectAll");

//获取程序创建的复选框

var selectArr = dom.getElementsByName("select");

if (selectAll.checked) {

for (var i = selectArr.length - 1; i >= 0; i--) {

var select = selectArr[i];

//删除复选框所在的tr

//复选框的父节点(td)->父节点(tr)(删除该节点)->tbody

if (select.checked) {

select.parentNode.parentNode.parentNode.removeChild(select.parentNode.parentNode);

}

//删除一行一个tr

function myDelete() {

//this表示当前对象.

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

</script>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>javascript</title>

</head>

<body>

<form>

<tableborder="1px"align="center"width="50%"cellspacing="0px"cellpadding="3px"id="tb1">

<tr>

</tr>

<tr>

<td>

<inputtype="checkbox"id="selectAll"onclick="mySelectAll()"/>

</td>

<tdcolspan="6">

<inputtype="button" value="全部删除"onclick="myDeleteAll()"/>

</td>

</tr>

</table>

</form>

<hr/>

<form>

<tableborder="1px"align="center"width="50%"cellspacing="0px"cellpadding="3px">

<tr>

<inputtype="text"name="uid"id="uid"/>

</td>

</tr>

<tr>

<inputtype="text"name="username"id="username"/>

</td>

</tr>

<tr>

<td>

<inputtype="password"name="pwd"id="pwd"/>

</td>

</tr>

<br/>

<tr>

<inputtype="text"name="age"id="age"/>

</td>

</tr>

<tr>

<selectname="city"id="city">

<optionvalue="">请选择</option>

<optionvalue="gz">广州</option>

<optionvalue="bj">北京</option>

<optionvalue="sh">上海</option>

</select></td>

</tr>

<tralign="center">

<tdcolspan="2">

<inputtype="button"value="提交"onclick="addUser()"/>

<inputtype="reset"value="重置"/>

</td>

</table>

</form>

</body>

</html>

c) 改变HTML中元素的CSS样式：

element.style.样式名 = 值

例如：

myDiv.style.color = "red"; // 对应color样式

myDiv.style.backgroundColor ="blue"; // 对应background-color

随机码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/**

* @author Administrator

//验证码 ,4位的,由字符,数字组成.

function createCode() {

var datas = ["A","B", "C","D", "E","F", "G","H", "Z","0", "1","2", "3","4", "5","6", "7","8", "9"];

//随机的从数组中取出4个元素.

var mess ="";

var index = 0;

for (var i = 0; i < 4; i++) {

//生成随机数.而且是在数组的长度范围内.

//0-9之间的随机数. Math.floor(Math.random()*10)

//0到数组长度(不包含)之间的浮点数.,向下取整,

var index = Math.floor(Math.random() * datas.length);

mess += datas[index];

};

var codeSpan = window.document.getElementById("codeSpan");

codeSpan.style.color = "red";

codeSpan.style.fontSize = "20px";

codeSpan.style.background = "gray";

codeSpan.style.fontWeight = "900";

codeSpan.style.fontStyle = "italic";

codeSpan.style.textDecoration = "line-through";

codeSpan.innerHTML = mess;

codeSpan.value = mess;

}

createCode();

</script>

<title>javascript</title>

</head>

<body>

<spanid="codeSpan"></span><ahref="#"onclick="createCode()">看不清楚</a>

</body>

</html>

i. 注意

IE将跳过在节点之间产生的空格文档节点（如：换行字符）。

而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取。

因此，在ie 中用nextSibling便可读取到的下一个节点元素。

在FF中就需要这样写：nextSibling.nextSibling了。

3. 正则表达式

位置：

^ 开头

$ 结尾

次数：

* 0或多个

+ 1或多个

? 0或1个

{n} 就是n个

{n,} 至少n个

{n,m} 最少n个，最多m个

通配符：

\d 任意数字

\D 任意非数字

\s 任意空白

\S 任意非空白

. 任意字符（除'\n'外）

组合：

[a-z]

[0-9]

等

组：

(正则) 匹配括号中正则表达式对应的结果，并暂存这个结果。

(?:正则) 匹配括号中正则表达式对应的结果，但不暂存这个结果。

\数字使用第n个组匹配的结果

使用正则的工具（RegExp类与相关方法）

创建：

// 方式一

var regex = new RegExp("正则表达式", "标志");

// 方式二

var regex = /正则表达式/标志

参数说明：

正则表达式：

参见上面的规则

标志：

g （全文查找出现的所有 pattern）

i （忽略大小写）

m （多行查找）

方法：

Regexp.test( str )

String.replace( regex, str )

练习：校验表单

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<styletype="text/css">

.okinfo,.errorinfo{

display:none;

}

.okinfo{

color:#0099FF;

}

.errorinfo{

color:#FF0000;

}

</style>

<scripttype="text/javascript">

function checkUser()

{

var node = document.getElementsByName("user")[0];

var b ;

var name = node.value;//获取文本框中输入的用户名。

//定义一个正则规则。

//var reg = new RegExp("^\\w{4}$");//如果在该种格式中出现了 \必须是一对，因为字符串中的 \有转义的作用。

//var reg = /^\w{4}$/;//如果是这种方式封装，出现了 \，不用转义。

var reg = /^[a-z]{4}$/i;

//怎么让规则作用到字符串上。

//方式一,使用string对象中的match方法。注意：match方法在js中使用于查找符合规则子串，返回的是数组。

//如果返回数组，说明匹配，如果没有具体数组返回，而是null。说明不匹配。

var temp = name.match(reg);

var spanNode = document.getElementById('userspan');

if(temp!=null)

{

spanNode.innerHTML = "用户名正确".fontcolor('green');

}

else

{

spanNode.innerHTML = "用户名错误".fontcolor('red');

}

//方式二：使用js中正则对象的test方法。可以直接对字符串进行匹配。

var spanNode = document.getElementById('userspan');

if(reg.test(name))

{

spanNode.innerHTML = "用户名正确".fontcolor('green');

b = true;

}

else

{

spanNode.innerHTML = "用户名错误".fontcolor('red');

b = false;

}

return b;

}

//校验密码

function checkPass()

{

var node = document.getElementsByName("psw")[0];

var b ;

var word = node.value;

var reg = /^\d{4}$/;

var okDiv = byId("okpassid");

var noDiv = byId("nopassid");

if(reg.test(word))

{

okDiv.style.display = "block";

noDiv.style.display = "none";

b = true;

}

else

{

noDiv.style.display = "block";

okDiv.style.display = "none";

b = false;

}

return b;

}

function byId(id)

{

return document.getElementById(id);

}

function checkRepass()

{

var b ;

//只要确定和密码一致即可。

//1,获取密码。

var pass = document.getElementsByName("psw")[0].value;

//2,获取确认密码

var repass = document.getElementsByName("repsw")[0].value;

var okSpan = byId("okrepassid");

var noSpan = byId("norepassid");

if(pass==repass)

{

okSpan.style.display = "inline";

noSpan.style.display = "none";

b = true;

}

else

{

noSpan.style.display = "inline";

okSpan.style.display = "none";

b = false;

}

return b;

}

function checkMail()

{

var b;

var mail = document.getElementsByName("mail")[0].value;

var reg = /^\w+@\w+(\.\w+)+$/;

var okSpan = byId("okmailid");

var noSpan = byId("nomailid");

if(reg.test(mail))

{

okSpan.style.display = "inline";

noSpan.style.display = "none";

b = true;

}

else

{

noSpan.style.display = "inline";

okSpan.style.display = "none";

b = false;

}

return b;

}

function checkForm()

{

var isuser = checkUser();

var ispass = checkPass();

var isrepass = checkRepass();

var ismail = checkMail();

alert(isuser +"....."+ ispass+"......"+isrepass+"...."+ismail);

if(isuser && ispass && isrepass && ismail)

returntrue;

else

returnfalse;

}

</script>

</head>

<body>

<formonsubmit="return checkForm()">

用户名称：<inputtype="text"name="user"onblur="checkUser()"/>

<spanid="userspan"></span>

<div>

用户名必须是由四位字母组成。

</div>

输入密码：<inputtype="text"name="psw"onblur="checkPass()"/>

<divid="okpassid"class="okinfo">密码格式正确</div>

<divid="nopassid"class="errorinfo">密码格式错误</div>

<div>

必须由四位数字组成

</div>

确认密码：<inputtype="text"name="repsw"onblur="checkRepass()"/>

<spanid="okrepassid"class="okinfo">密码和确认密码一致</span>

<spanid="norepassid"class="errorinfo">密码和确认密码不一致</span>

<br/>

邮件地址：<inputtype="text"name="mail"onblur="checkMail()"/>

<spanid="okmailid"class="okinfo">邮件地址正确</span>

<spanid="nomailid"class="errorinfo">邮件地址错误</span>

<br/>

<inputtype="submit"value="提交数据"/>

</form>

</body>

</html>

0 0