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() 输入框。
关闭窗口:
close
<p> <a href="#" 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方法)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="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 i in linkArr) { alert(i); } } //testLinks(); // 获取页面的Body var body = dom.body; alert(body.nodeName); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body onmousemove="test(this)"> <img src="xxx" alt="这是一个美女"/> <img src="xxx" alt="这是一个美女"/> <img src="xxx" alt="这是一个美女"/> <a href="http://www.baidu.com">百度一下</a> <a href="http://www.google.com">百度两下</a> <a href="http://www.baigu.com">百谷一下</a> <a name="one"></a> <a name="two"></a> <form> <label>姓名:</label><!--默认不写type 就是文本输入框--> <input type="text"/> </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,实现全选与全不选的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>
<script type="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>
<div>商品列表</div> <input type="checkbox" name="all" onclick="checkAll(this)" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /> <input type="checkbox" name="all" onclick="checkAll(this)" />全选<br /> <input type="button" value="总金额:" onclick="getSum()"/><span id="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 属性对于文档节点和元素节点是不可用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body onmousemove="test(this)"> <a>哈哈</a> <form id="form1"> <label>姓名:</label> <input type="text" /> </form> </body> </html> |
2.5. 节点操作
2.5.1. 创建新节点
document.createElement("标签名") 创建新元素节点
document.createTextNode("文本内容") 创建新文本节点
elt.setAttribute("属性名", "属性值") 设置属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body onmousemove="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);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> table a:link,table a:visited{ color:#0099FF; text-decoration:none; }
</style> <script type="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)' οnclick='delFile(this)'>删除附件</a>"; //tdNode_del.innerHTML = "<img src='1.jpg' alt='删除附件' οnclick='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> <table id="fileid"> <tr> <td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td> </tr>
</table> </body> </html> |
2.5.4. 案例
1. 生成二级城市联动菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> select{ width:100px; } </style> <script type="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> <select id="selid" onchange="selcity()"> <option>--选择省市--</option> <option>北京市</option> <option>辽宁省</option> <option>山东省</option> <option>河北省</option> </select> <select id="subselid"> <option>--选择城市--</option> </select> </body> </html> |
2.动态生成年、月、日字段
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> 生日: <select id="year"> <option>年</option> </select> <select id="month"> <option>月</option> </select> <select id="day"> <option>日</option> </select>
</body> </html> |
2,实现增删改查表格的增删改查。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <!--表单--> <form> <table border="1px" align="center" width="50%" cellspacing="0px" cellpadding="3px" id="tb1"> <tr> <td>选择</td><td>编号</td><td>姓名</td><td>密码</td><td>年龄</td><td>住址</td><td>操作</td> </tr> <tr> <td> <input type="checkbox" id="selectAll" onclick="mySelectAll()"/> </td> <td colspan="6"> <input type="button" value="全部删除" onclick="myDeleteAll()"/> </td> </tr> </table> </form> <hr/> <form> <table border="1px" align="center" width="50%" cellspacing="0px" cellpadding="3px"> <tr> <td>编号</td><td> <input type="text" name="uid" id="uid"/> </td> </tr> <tr> <td>姓名:</td><td> <input type="text" name="username" id="username"/> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="pwd" id="pwd"/> </td> </tr> <br/> <tr> <td>年龄</td><td> <input type="text" name="age" id="age"/> </td> </tr> <tr> <td>住址:</td><td> <select name="city" id="city"> <option value="">请选择</option> <option value="gz">广州</option> <option value="bj">北京</option> <option value="sh">上海</option> </select></td> </tr> <tralign="center"> <td colspan="2"> <input type="button" value="提交" onclick="addUser()"/> <input type="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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> /** * @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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <span id="codeSpan"></span><a href="#" 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 )
练习:校验表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .okinfo,.errorinfo{ display:none; } .okinfo{ color:#0099FF; } .errorinfo{ color:#FF0000; } </style> <script type="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> <form onsubmit="return checkForm()"> 用户名称:<input type="text" name="user" onblur="checkUser()" /> <span id="userspan"></span> <div> 用户名必须是由四位字母组成。 </div> 输入密码:<input type="text" name="psw" onblur="checkPass()" /> <div id="okpassid" class="okinfo">密码格式正确</div> <div id="nopassid" class="errorinfo">密码格式错误</div> <div> 必须由四位数字组成 </div> 确认密码:<input type="text" name="repsw" onblur="checkRepass()" /> <span id="okrepassid" class="okinfo">密码和确认密码一致</span> <span id="norepassid" class="errorinfo">密码和确认密码不一致</span> <br /> 邮件地址:<input type="text" name="mail" onblur="checkMail()" /> <span id="okmailid" class="okinfo">邮件地址正确</span> <span id="nomailid" class="errorinfo">邮件地址错误</span> <br /> <input type="submit" value="提交数据" /> </form> </body> </html> |