前言
上篇文章总结关于Dom编程和Bom编程大致的对象和方法属性，那么打铁趁热，接着总结练习的demo.
总结之前先贴下前面两篇js总结的博文地址
JavaScript基础篇章(总结1) :http://blog.csdn.net/yk377657321/article/details/53930922
JavaScript基础篇章(总结2) :http://blog.csdn.net/yk377657321/article/details/53942368
Ⅰ.练习
为了简单点，就以”demo**”来划分各个demo，demo的主要介绍见html里的title，都进行了简单说明.
demo01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bom 编程练习</title>
</head>
<body>
<form>
<table>
<tr>
<td onclick="onClick()"> //触发的方法在下面js代码中
55555
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/**总结：
* Bom编程：js封装了浏览器的各个对象
* Dom编程：整个网页 等同于 一个文档对象模型,类似一棵树的模型
*
*
* Bom编程技术点
* 1.window对象 JavaScript层级中的顶层对象
* 2.navigator对象 可以获取浏览器的信息
* 3.location对象 包括当前Url有关的信息
* 4.History对象 Url的汇总，可控制网页的后退前进等等
* 5.document对象 代表整个文档页面
*/
document.write("<br/>");
if(navigator.userAgent.match(/firefox/i)){ //判断是不是火狐浏览器
document.write("这是火狐");
}
function onClick(){ //点击事件
alert("9999999");
}
</script>
</html>
demo02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取节点对象练习</title>
</head>
<body>
<form name="one">
<label>用户名:</label>
<input type="text" name="username" value="请输入用户名" id="username"/>
<label>密码:</label>
<input type="password" name="password" id="password"/>
<label>确认:</label>
<input type="password" name="confirm" id="confirm"/>
<label>爱好:</label>
<input type="checkbox" name="like" value="eat" id="eat"/>
吃
<input type="checkbox" name="like" value="sleep" id="sleep"/>
睡
<input type="checkbox" name="like" value="play" id="play"/>
玩
</form>
</body>
<script type="text/javascript">
/**
* 需求：
* 1.得到所有的input元素并显示信息（value）。
* 2.得到所有标签id为"username"的结果。获取旧value值并设置value值
* 3. 获取所有标签name 为like的元素.获取value值.*/
//1.
var inputArr = document.getElementsByTagName("input");
var str="";
for(var i=0;i<inputArr.length;i++){
str += ("input:"+inputArr[i] + ",");
}
window.alert(str);
//2.
var userName = document.getElementById("username");
alert("------>" + userName.value);
username.value = "wyk";
//3.
var likeArr = document.getElementsByName("like");
var str1="";
for(var i=0;i<likeArr.length;i++){
str1 += "like:" + likeArr[i] + ",";
}
alert(str1);
</script>
</html>
demo03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom属性 操作练习</title>
</head>
<body>
<form>
<table border="2px" align="center" width="30%" cellpadding="5px" cellspacing="0px">
<tr align="center">
<th>是否全选</td>
<th>
<input type="checkbox" name="allLike" id="allLike" onchange="return callCheckState()"/>
</th>
</tr>
<tr align="center">
<td>你是否喜欢吃水果?</td>
<td>
<input type="checkbox" name="like" id="like01"/>
</td>
</tr>
<tr align="center">
<td>你是否喜欢吃肉类?</td>
<td>
<input type="checkbox" name="like" id="like02" />
</td>
</tr>
<tr align="center">
<td>你是否喜欢吃饭?</td>
<td>
<input type="checkbox" name="like" id="like03" />
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/**
* 需求：
* 1.获取所有选中的数量。
* 2.实现全选与全不选的效果。
*/
function getLikes(){
var likes = document.getElementsByName("like");
var count = 0;
for(var i=0;i<likes.length;i++){
if(likes[i].checked){
count++;
}
}
window.alert("----选中的数量====" + count);
}
function checkAll(){
var allCheck = document.getElementById("allLike");
var likes = document.getElementsByName("like");
var allCk = allCheck.checked;
for(var j=0;j<likes.length;j++){
likes[j].checked = allCk;
}
}
//先获取所有选中的数量，再实现全选与全不选的效果
getLikes();
checkAll();
//监听全选与全不选的按钮的逻辑代码
function callCheckState(){
checkAll();
}
</script>
</html>
demo04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom 查找节点</title>
</head>
<body>
<table></table>
<form id="form"><label>姓名:</label><input type="text" name="username" value="jack" id="username"/>999999<br/></form>
</body>
<script type="text/javascript">
/**
* 下面的代码主要是查找节点
* Api：
*
var userName = document.getElementById("username");
userName.parentNode.nodeName;
userName.childNodes;
userName.firstChild.nodeName;
userName.lastChild.nodeName;
userName.previousSibling.nodeName;
userName.nextSibling.nodeName;
userName.textContent
*
* */
var name1 = document.getElementById("username");
//parentNode 获取当前元素的父节点。
var parent = name1.parentNode;
alert("----" + parent.nodeName); //这里的parent为空，导致程序运行未出现效果
//原因是是上面的变量名为name，改为name1则正常运行
//form
//childNodes
var form = document.getElementById("form");
var child = form.childNodes;
alert(child.length); // 7
for (var i = 0; i < child.length; i++) {
alert(child[i].nodeName); //
}
//firstChild
var firstChild = form.firstChild;
alert(firstChild.nodeName); //text
alert("---look--->" + firstChild.textContent);
//lastChild
var lastChild = form.lastChild;
alert(lastChild.nodeName); //text
//nextSibling
var nextSibling = form.nextSibling;
alert(nextSibling.nodeName); //text
//previousSibling
var previous = form.previousSibling; //text
alert(previous.nodeName);
//Note:ctrl + F5 去缓存 刷新
</script>
</html>
demo05
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dom 添加节点</title>
</head>
<body>
<form>
<table border="3px" align="center" width="50%" cellpadding="5px" cellspacing="0px">
<tr align="center" id="trPwd">
<td>密码：</td>
<td>
<input type="password"/>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/**
* 下面的代码是插入一行 姓名的
* @type {NodeList}
*/
var tableTag = document.getElementsByTagName("table");
var pwdTr = document.getElementById("trPwd");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2= document.createElement("td");
tr.setAttribute("align","center");
tableTag[0].appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
//----------------------------------------------------------------------------------------
var name1 = document.createElement("input"); //这里声明为 name 会有问题，视图不显示,改为name1、password则没事
var text = document.createTextNode("姓名: "); //创建新文本节点
name1.setAttribute("name", "username");
name1.setAttribute("type", "text");
name1.setAttribute("id", "username");
name1.setAttribute("value", "输入用户名");
alert("wyk");
td1.appendChild(text);
td2.appendChild(name1);
</script>
</html>
demo06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom 节点的添加、删除</title>
</head>
<body>
</body>
<script type="text/javascript">
//添加节点，设置属性操作 createElement、createTextNode方法
var name1 = document.createElement("input"); //创建新元素节点
var text = document.createTextNode("姓名: "); //创建文本节点
name1.setAttribute("type","number"); //设置元素的属性 setAttribute方法
name1.setAttribute("id","uName");
name1.setAttribute("name","uName");
name1.setAttribute("value","please input name");
document.body.appendChild(text); //将节点进行挂载 appendChild方法
document.body.appendChild(name1);
//插入节点操作,下面br是插入在name1之前 insertBefore 方法
var br = document.createElement("br");
document.body.insertBefore(br,name1); //插入指定位置 insertBefore方法
//删除指定的节点
function removeView(){
//Note:通过父控件删除子控件
document.body.removeChild(br); //删除指定元素 removeChild方法
}
window.setTimeout(removeView,1500); //延迟1.5秒秒。之后执行removeView这个方法
</script>
</html>
demo07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理 函数</title>
</head>
<body>
</body>
<script type="text/javascript">
var button = document.createElement("input");
button.setAttribute("type","button");
button.setAttribute("value","单击一下");
button.onclick = function () {
alert("我点的是美女");
}
document.body.appendChild(button);
//-----------------------------------------------------------------
var checkBox = document.createElement("input");
var text = document.createTextNode("未选");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("onchange","return checkState()");
checkBox.setAttribute("id","checkbox");
document.body.appendChild(checkBox);
function checkState(){
var checkName = document.getElementById("checkbox");
var state = checkName.checked;
var str = "我看到你 "
if(state){
str += " 选中了";
}else{
str += "取消了";
}
alert(str);
}
</script>
</html>
demo08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态增加用户信息</title>
</head>
<body>
<form>
<table border="2px" width="50%" cellspacing="0px" cellpadding="5px" align="center" id="table01">
<tr align="center">
<th><label>选择</label></th>
<th><label>编号</label></th>
<th><label>用户名</label></th>
<th><label>密码</label></th>
<th><label>年龄</label></th>
<th><label>住址</label></th>
<th><label>操作</label></th>
</tr>
<tr align="center">
<td><input type="checkbox" id="checkAll" onchange="return allCheck()"/></td>
<td colspan="7"><label id="delete_all" onclick="return execute_delete()">全部删除</label></td>
</tr>
</table>
<hr width="50%"/>
<!--////////////////////////////////////////////////////////////////////////////////////-->
<!--填信息选项-->
<table border="2px" align="center" width="50%" cellpadding="5px" cellspacing="0px">
<tr>
<td width="20%"><label>编号:</label></td>
<td><input type="text" id="number"/></td>
</tr>
<tr>
<td><label>姓名:</label></td>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<td><label>密码：</label></td>
<td><input type="password" id="pwd" /></td>
</tr>
<tr>
<td><label>年龄:</label></td>
<td><input type="text" id="age" /></td>
</tr>
<tr>
<td><label>住址：</label></td>
<td>
<select id="address">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="惠州">惠州</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="7">
<!--return 的好处是可以让click 在返回false时结束，不再执行，直接οnclick="check()" 即时方法中返回false，程序仍继续执行-->
<!--提交按钮的类型设置为reset，主要作用是清空页面的信息-->
<input type="reset" value="提交" onclick="return check()"/>
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
function check(){ //method name 为submit 不起作用
//这里只做数据的增加提交
var number1Node = document.getElementById("number");
var name1Node = document.getElementById("name");
var pwd1Node = document.getElementById("pwd");
var age1Node = document.getElementById("age");
var address1Node = document.getElementById("address");
var number1 = number1Node.value;
var name1 = name1Node.value;
var pwd1 = pwd1Node.value;
var age1 = age1Node.value;
var address1 = address1Node.value;
if(number1=="" || name1=="" || pwd1=="" || age1==""){
alert("信息不完善，请确认!");
return false;
}
createUser(number1,name1,pwd1,age1,address1);
//clearCurrNews(number1Node,name1Node,pwd1Node,age1Node,address1Node);
alert("提交成功!");
return true;
}
function createUser(number1,name1,pwd1,age1,address1){
var table01 = document.getElementById("table01");
var tr2 = document.createElement("tr");
var tdSelete = document.createElement("td");
var tdNumber = document.createElement("td");
var tdUser = document.createElement("td");
var tdPwd = document.createElement("td");
var tdAge = document.createElement("td");
var tdAddress = document.createElement("td");
var tdOperate = document.createElement("td");
var selete = document.createElement("input");
var textNumber = document.createTextNode(number1);
var textName = document.createTextNode(name1);
var pwdName = document.createTextNode(pwd1);
var ageName = document.createTextNode(age1);
var addressName = document.createTextNode(address1);
var aperatorLabel = document.createElement("label");
var operatorName = document.createTextNode("删除");
tr2.setAttribute("align","center");
selete.setAttribute("type","checkbox");
selete.setAttribute("name","checkState");
//下面进行挂载
table01.appendChild(tr2);
tr2.appendChild(tdSelete);
tr2.appendChild(tdNumber);
tr2.appendChild(tdUser);
tr2.appendChild(tdPwd);
tr2.appendChild(tdAge);
tr2.appendChild(tdAddress);
tr2.appendChild(tdOperate);
tdSelete.appendChild(selete);
tdNumber.appendChild(textNumber);
tdUser.appendChild(textName);
tdPwd.appendChild(pwdName);
tdAge.appendChild(ageName);
tdAddress.appendChild(addressName);
tdOperate.appendChild(aperatorLabel);
aperatorLabel.appendChild(operatorName);
aperatorLabel.onclick = delete_self;
}
function allCheck(){
var delete_all = document.getElementById("checkAll");
var checkedState = delete_all.checked;
var checkBoxs = document.getElementsByName("checkState");
for(var i=0;i<checkBoxs.length;i++){
checkBoxs[i].checked = checkedState;
}
}
//执行删除
function execute_delete(){
var checkBoxs = document.getElementsByName("checkState");
var flag = true;
if(checkBoxs.length == 0){
alert("没有数据，无法删除!");
}
for(var i=0;i<checkBoxs.length;i++){
if(checkBoxs[i].checked){
var tr = checkBoxs[i].parentNode.parentNode;
tr.parentNode.removeChild(tr); //table 删除tr
flag = false;
}
if(flag){
alert("未对数据进行勾选，无法删除!");
}
}
var delete_all = document.getElementById("checkAll");
delete_all.checked = false;
return true;
}
//删除自己
function delete_self(){
var tr = this.parentNode.parentNode;
tr.parentNode.removeChild(tr);
var childNodes = tr.childNodes;
var number = childNodes[1];
alert("成功删除 编号为"+number.textContent+"的用户");
}
//提交成功后，清楚用户填的信息//按钮的类型设置为reset，就不用下面这个method
function clearCurrNews(number1Node,name1Node,pwd1Node,age1Node,address1Node){
number1Node.value = "";
name1Node.value = "";
pwd1Node.value = "";
age1Node.value = "";
address1Node.value = "";
}
</script>
</html>demo09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过js创建 生日选项</title>
</head>
<body>
<form>
<table border="2px" align="center" width="20%" cellpadding="5px" cellspacing="0px">
<tr>
<td>Birthday</td>
<td>
<select id="year">
<option>年</option>
</select>
<select id="month">
<option>月</option>
</select>
<select id="day">
<option>日</option>
</select>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/**
* 通过js创建年,月,日
* 大致思路，年、月是确定的，日期会随着年份和月份而改变
*/
//创建年份可选项
function myYear(){
var year = document.getElementById("year");
var minYear = 1950;
var maxYear = new Date().getFullYear();
for(var i=1950;i<=maxYear;i++){
var option = document.createElement("option");
option.innerHTML = i;
option.value = i;
year.appendChild(option);
}
}
//创建月份可选项
function myMonth(){
var month = document.getElementById("month");
for(var i=1;i<=12;i++){
var fullMonth = (i<10)? ("0"+i) : i;
var option = document.createElement("option");
option.innerHTML = fullMonth;
option.value = fullMonth;
month.appendChild(option);
}
month.onchange = myDate;
}
//创建日期可选项
function myDate(){
clearDate();
var month = document.getElementById("month").value;
var year = document.getElementById("year").value;
if(month ==""){
alert("请选择月份!");
return;
}
if(year == ""){
alert("请选择年份!");
return;
}
var dayNode = document.getElementById("day");
//1个月至少有28天；
for(var i=1;i<=28;i++){
var fullDay = i<10? "0"+i:i;
var option = document.createElement("option");
option.innerHTML = fullDay;
option.value = fullDay;
dayNode.appendChild(option);
}
//判断大月、小月、闰年的情况
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;
var end = 28;
if(isBigMonth){
end = 31;
}else if(isSmallMonth){
end = 30;
}else if(isLeapyear){
end = 29;
}
for(var i=29;i<=end;i++){
var endDayOption = document.createElement("option");
endDayOption.innerHTML = i;
endDayOption.value = i;
dayNode.appendChild(endDayOption);
}
}
//删除日期的所有可选项
function clearDate(){
var dayNode = document.getElementById("day");
var days = dayNode.childNodes;
/*for(var index in days){ //从0到(days.length-1) 循环删除会有问题
dayNode.removeChild(days[index]);
}*/
for(var i=days.length-1;i>0;i--){
dayNode.removeChild(days[i]);
}
}
function getBirthDay(){
myYear();
myMonth();
}
getBirthDay(); //执行
</script>
</html>
demo10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成验证码的练习</title>
</head>
<body>
<form>
<table border="2dp" align="center" width="30%" cellspacing="0px" cellpadding="5px">
<tr align="center">
<td>验证码</td>
<td>
<input type="text" id="inputCode" onchange="return checkCode()"/>
<span id="codeSpan"></span>
<a href="#" onclick="createCode()">看不清楚</a>
<span id="codeSpan1"></span>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
function createCode(){
var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
var code = "";
for(var i=0;i<4;i++){
var number = Math.floor(Math.random() * datas.length);
code += datas[number];
}
var codeSpan = 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 = code;
codeSpan.value = code;
}
//校验验证码
function checkCode(){
var code = document.getElementById("codeSpan").value;
var inputCode = document.getElementById("inputCode").value;
var codeSpan1 = document.getElementById("codeSpan1");
//大小写会有问题
var s = new String(code).toLowerCase();
var s1 = new String(inputCode).toLowerCase();
if(s == s1){
codeSpan1.innerHTML = "<img src='img/true.ico' width='20px'/>";
return true;
}else{
codeSpan1.innerHTML = "验证码不正确";
codeSpan1.style.color = "red";
codeSpan1.style.fontSize = "14px";
return false;
}
}
createCode(); //执行
</script>
</html>
Ⅱ.总结
Bom编程：js封装了浏览器的各个对象
Dom编程：整个网页 等同于 一个文档对象模型,类似一棵树的模型
Bom编程技术点:
- 1.window对象 //JavaScript层级中的顶层对象
- 2.navigator对象 //可以获取浏览器的信息
- 3.location对象 //包括当前Url有关的信息
- 4.History对象 //Url的汇总，可控制网页的后退前进等等
- 5.document对象 //代表整个文档页面