并給我們講解了很多關(guān)于如何去學(xué)習(xí)DOM的方法,覺得真的是受益匪淺啊.
下面就幾個(gè)我覺得比較好的例子和大家分享一下。
1.二級(jí)連動(dòng)下拉菜單(一級(jí)是省份,二級(jí)是城市,要求一級(jí)選中省份,二級(jí)城市對(duì)應(yīng)出現(xiàn))
步驟:1)基本框架(HTML):兩個(gè)復(fù)選框,而第二個(gè)復(fù)選框里面開始應(yīng)該是沒(méi)有選項(xiàng)的,注意第一個(gè)下拉框會(huì)作為事件源,通過(guò) onchange方法激發(fā)JavaScript中的功能實(shí)現(xiàn)部分。
<xmp>
<select id="province" onchange="selCity()">
<option >--選擇省份--</option>
<option >北京</option>
<option >天津</option>
<option >湖北</option>
<option >山東</option>
<option >河北</option>
</select>
<select id="city">
<option>--選擇城市--</option>
</select>
</xmp>
2)頁(yè)面修飾不需要太多,只要讓下拉菜單顯示一個(gè)就好了
3)通過(guò)JavaScript來(lái)實(shí)現(xiàn)功能,我們要想在第一個(gè)下拉列表中選擇省份,后面能直接顯示他的城市,看到這種一對(duì)多對(duì)應(yīng)關(guān)系,首先想到map集合這個(gè)容器,可是JavaScrip沒(méi)有map集合,那我們就想到了數(shù)組這樣一個(gè)容器,最后決定用二維數(shù)組來(lái)幫我我們實(shí)現(xiàn)這個(gè)功能。
<script type="text/javascript">
function selCity()
{
var arr= [["--選擇城市--"],["海淀區(qū)","朝陽(yáng)區(qū)","東城區(qū)","西城區(qū)","宣武區(qū)"],
["和平區(qū)","河北區(qū)","河?xùn)|區(qū)","河西區(qū)","南開區(qū)"],
["武漢","宜昌","孝感","襄樊","荊州"],
["濟(jì)南","青島","煙臺(tái)","威海","日照"],
["石家莊","保定","張家口","廊坊","邯鄲"]];
var selpNode = document.getElementById("province");
var selcNode = document.getElementById("city");
var citys = arr[selpNode.selectedIndex];
selcNode.options.length = 0;
for(var x=0; x<citys.length; x++)
{
var optNode = document.createElement("option");
optNode.innerText = citys[x];
selcNode.appendChild(optNode);
}
}
</script>
小結(jié):每次一定記得要將數(shù)組清空。
2.郵件列表
思想:1)首先想到整體框架,肯定會(huì)想到用表格來(lái)進(jìn)行格式化,然后通過(guò)操作表格以及行和單元格這些節(jié)點(diǎn)來(lái)實(shí)現(xiàn)相關(guān)功能
2)css主要是對(duì)表格相關(guān)格式化,其次就是選中以及兩行顯示不一樣的效果,通過(guò)動(dòng)態(tài)修改className來(lái)實(shí)現(xiàn)
由于篇幅的關(guān)系,html以及css部分代碼相對(duì)簡(jiǎn)單,就不獻(xiàn)丑了。
3)JavaScript來(lái)實(shí)現(xiàn)各種不同功能,代碼如下:
<script>
var color ="";
function getStyle()
{
var tableNode =document.getElementsByTagName("table")[0];
var arr = tableNode.rows;
for(var x = 0;x<arr.length;x++)
{
if(x%2)
arr[x].className = "one";
else
arr[x].className = "two";
var tdNode0 = arr[x].cells[0];
tdNode0.align = "center";
arr[x].onmouseover = function()
{
color = this.className;//將原有的值記錄,一遍鼠標(biāo)走后能回到原來(lái)的顏色
this.className = "checked";
}
arr[x].onmouseout = function()
{
this.className = color;
}
}
}
//我們需要全選實(shí)現(xiàn)同樣的功能,所以我們通過(guò)傳值來(lái)區(qū)分是那個(gè)節(jié)點(diǎn)
function allCheck(index)
{
var allNode = document.getElementsByName("all")[index];
var checkNodes = document.getElementsByName("mail");
for(var x=0;x<checkNodes.length;x++)
{
checkNodes[x].checked = allNode.checked;
}
}
function checkBut(num)
{
var mailNodes = document.getElementsByName("mail");
for(var x=0; x<mailNodes.length; x++)
{
if(num>1)
mailNodes[x].checked = !(mailNodes[x].checked);//將自己狀態(tài)反向賦給自己實(shí)現(xiàn)反選功能
else
mailNodes[x].checked = num;
}
}
function del()
{
var b = window.confirm("確定要?jiǎng)h除所選郵件嗎?");
if(!b)
return ;
var mailNodes = document.getElementsByName("mail");
var arr = new Array();
var pos = 0;
for(var x=0; x<mailNodes.length; x++)
{
if(mailNodes[x].checked)
{
var trNode = mailNodes[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
for(var x=0; x<arr.length; x++)
{
arr[x].parentNode.removeChild(arr[x]);
}
getStyle();
}
window.onload = getStyle;
</script>