前言
上篇文章總結關於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對象 //代表整個文檔頁面