学习笔记---Javascript - DOM 及 简版JS二级联动
DOM: Document Object Model文本对象模型, 是针对XML处理的树形结构的API.
1. 通过window对象的document可以取得DOM对象的引用, 通过document对象的getElementById和getElementByTagName方法获得特定的元素.
通过document对象的createElement和createTextNode创建元素或文本节点, 通过appendChild附加到dom元素上.
2. 大部分表单元素都有Value属性, 提交表单的时候, 将把这个字符串发送到web服务器.
3. 当长的表格被打印时, thead和tfoot可以被打印在包含数据行的每一页上.
table中常用方法: createCaption()、createTHead()、createTFoot()、insertRow()、insertRow(position)、deleteCaption()、deleteTHead()、deleteTFoot、deleteRow(positon)、insertCell(position)、deleteCell(position);
//Javascript -DOM 及二级联动代码
代码
<!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>
<title>Java Script - DOM</title>
<link type="text/css" href="StyleSheet.css" rel="Stylesheet" />
</head>
<body>
<table id="goods">
<thead>
<tr>
<td>
商品名称
</td>
<td>
商品单价
</td>
<td>
商品数量
</td>
<td>
商品总价
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
牙膏
</td>
<td>
8.8
</td>
<td>
2
</td>
<td>
</td>
</tr>
<tr>
<td>
拖鞋
</td>
<td>
26.0
</td>
<td>
1
</td>
<td>
</td>
</tr>
<tr>
<td>
巧克力
</td>
<td>
6.2
</td>
<td>
5
</td>
<td>
</td>
</tr>
<tr>
<td>
可口可乐
</td>
<td>
2.5
</td>
<td>
24
</td>
<td>
</td>
</tr>
<tr>
<td>
活鲤鱼
</td>
<td>
8
</td>
<td>
2
</td>
<td>
</td>
</tr>
<tr>
<td>
炖鱼王
</td>
<td>
1.8
</td>
<td>
1
</td>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
数量小计:
</td>
<td colspan="2">
合计:
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
// JScript source code, 注意: js文件需要用UTF-8保存
//通过JS操作DOM(Document Object Model文本对象模型)对象
var doc = window.document; //获得当前窗体对象中的DOM对象
var tb = doc.getElementById("goods");
//计算某类商品的价格小计
//var dataBody = tb.getElementsByTagName("tBody")[0]; //也可以
var dataBody = tb.tBodies[0]; //table中可能有多个tBody, 因此找第一个tBody
for (var i = 0; i < dataBody.rows.length; i++) {
var itemtotal = dataBody.rows[i].cells[3]; //获得某行的价格小计列的引用
//toFixed()和toPrecision()区别: 前者参数指小数点位数, 后者指数字总长度
itemtotal.innerHTML = (parseFloat(dataBody.rows[i].cells[1].innerText) * parseFloat(dataBody.rows[i].cells[2].innerText)).toFixed(2);
}
//计算商品数量及总价
var dataFoot = tb.tFoot.rows[0];
dataFoot.cells[0].innerHTML = "数量: 共< " + dataBody.rows.length + " >件 ";
var total = 0;
for (var i = 0; i < dataBody.rows.length; i++) {
total += parseFloat(dataBody.rows[i].cells[3].innerText);
}
dataFoot.cells[1].innerHTML = "总价: 共< "+total.toFixed(2)+" >元 ";
dataFoot.cells[0].style.textAlign = "right";
dataFoot.cells[1].style.textAlign = "right";
//排序:
var goodzPrice = []; //利用数组排序
for (var i = 0; i < dataBody.rows.length; i++) {
//goodzPrice.push(parseFloat(dataBody.rows[i].cells[3].innerText)); //需要对结果按行排序, 所以直接用row数组比用数字要好
goodzPrice.push(dataBody.rows[i]);
}
//alert(goodzPrice.join(",")); //利用","连接数组元素
//利用数组排序
goodzPrice.sort(function(a, b) {
//return b - a; //倒序, 默认为正序, 即sort()即可
return parseFloat(b.cells[3].innerText) - parseFloat(a.cells[3].innerText);
});
//alert(goodzPrice.join(","));
//将排序后的结果放入table中
//var h1 = document.createElement("h1"); //创建h1元素, 测试
//var txt = document.createTextNode("hello"); //创建文字节点, 测试
var frag = doc.createDocumentFragment(); //创建文档片断, 用来存放临时数据. fragment片断, 碎片, segment片段, 部分
for (var i = 0; i < goodzPrice.length; i++) { //将数组中的行内容加入到片断中
frag.appendChild(goodzPrice[i]);
}
/*清楚tBody中的内容, 用fragment覆盖, 不需要该操作
for(var i=0;i<dataBody.rows.length;i++){
dataBody.deleteRow(0); //删除掉row的引用, 只能从第一个删
}
*/
dataBody.appendChild(frag); //覆盖tBody的内容
</script>
<br />
<hr />
<br />
<select id="region" onchange="showSelect();">
<option> 请选择</option>
<optgroup label="华北地区">
<option value="bj">
北京
</option>
<option value="hb">
河北
</option>
<option value="tj">
天津
</option>
</optgroup>
<optgroup label="华南地区">
<option value="hn">
湖南
</option>
<option value="hub">
湖北
</option>
<option value="zj">
浙江
</option>
</optgroup>
</select>
<br />
<hr />
<br />
<select id="city" multiple="multiple" onchange="showSelectedItems();" size="10">
<option>两级联动</option>
</select>
<script type="text/javascript">
function showSelect() {
var elem = document.getElementById("region");
//alert(elem.selectedIndex);
var op = elem.options[elem.selectedIndex];
//alert(op.value + " , " + op.innerText);
var items = findCity(op.value);
var elemCity = document.getElementById("city")
elemCity.innerHTML = ""; //每次清空
var option;
for (var i = 0; i < items.length; i++) {
option = document.createElement("option");
option.innerHTML = items[i];
elemCity.appendChild(option);
}
}
function showSelectedItems() {
var elem = document.getElementById("city");
var list = [];
var op;
for (var i = 0; i < elem.options.length; i++) {
op = elem.options[i];
if (op.selected) {
list.push(op.innerText);
}
}
alert(list.join(","));
}
function findCity(abbreviation) {
var result = [];
switch (abbreviation) {
case "bj":
return result = ["海淀区", "西城区", "朝阳区", "昌平区"];
break;
case "hb":
return result = ["廊坊", "石家庄", "沧州", "保定"];
case "tj":
return result = ["塘沽", "塘沽2", "塘沽3"];
case "hn":
return result = ["长沙", "承德"];
case "hub":
return result = ["宜宾", "襄樊","武汉"];
case "zj":
return result = ["宁波"];
}
return result;
}
</script>
</body>
</html>
//DOM - Array(javascript & jQuery)
代码
<!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>
<title>Java Script -DOM</title>
<link type="text/css" href="StyleSheet.css" rel="Stylesheet" />
</head>
<body>
<table id="goods">
<thead>
<tr>
<td>
商品名称
</td>
<td>
商品单价
</td>
<td>
商品数量
</td>
<td>
商品总价
</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="2">
数量小计:
</td>
<td colspan="2">
合计:
</td>
</tr>
</tfoot>
</table>
<div>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//数据
var dataAry = [
{ itemName: "牙膏", itemPrice: 8.8, itemCount: 2 },
{ itemName: "拖鞋", itemPrice: 26.0, itemCount: 1 },
{ itemName: "巧克力", itemPrice: 6.2, itemCount: 5 },
{ itemName: "可口可乐", itemPrice: 2.5, itemCount: 24 },
{ itemName: "活鲤鱼", itemPrice: 8, itemCount: 2 },
{ itemName: "炖鱼王", itemPrice: 1.8, itemCount: 1 }
];
//添加类别小计
for (var i = 0; i < dataAry.length; i++) {
dataAry[i].itemTotal = dataAry[i].itemPrice * dataAry[i].itemCount;
}
//对数组排序
dataAry.sort(function(a, b) { return b.itemTotal - a.itemTotal });
// for (var i = 0; i < dataAry.length; i++) { //验证排序结果
// alert(dataAry[i].itemTotal);
// }
//插入数据岛tBody中
//var tb = document.getElementById("goods"); //使用DOM对象查找元素
var tb = $("#goods")[0]; //必须[0], 直接找的是jQuery对象, [0]才是找到的第一个元素
var dataBody = tb.tBodies[0]; //tb可能有多个tBody
var r;
for (var i = 0; i < dataAry.length; i++) {
r = dataBody.insertRow();
for (var j = 0; j < 4; j++) {
r.insertCell();
}
r.cells[0].innerHTML = dataAry[i].itemName;
r.cells[1].innerHTML = dataAry[i].itemPrice;
r.cells[2].innerHTML = dataAry[i].itemCount;
r.cells[3].innerHTML = dataAry[i].itemTotal;
}
//计算汇总数据
var count = 0;
var allTotal = 0;
for(var i=0;i<dataAry.length;i++){
count += dataAry[i].itemCount;
allTotal += dataAry[i].itemTotal;
}
tb.tFoot.rows[0].cells[0].innerHTML = "数量共计: < " + count + " > 件";
tb.tFoot.rows[0].cells[1].innerHTML = "共计: < " + allTotal + " > 元";
tb.tFoot.style.textAlign = "right";
</script>
</div>
</body>
</html>
//以上两示例用到的CSS
table
{
border: solid 3px Lime;
border-collapse: collapse;
width:600px;
}
td
{
border: solid 1px Lime;
font-size:large;
padding: 10px;
}
//Javascript综合小练习 Calendar
代码
<!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>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tb">
<table id="tbl">
<thead>
<tr>
<th>
星期日
</th>
<th>
星期一
</th>
<th>
星期二
</th>
<th>
星期三
</th>
<th>
星期四
</th>
<th>
星期五
</th>
<th>
星期六
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div>
<script type="text/javascript">
//计算时间
var elem = document.getElementById("tbl").tBodies[0];
var now = new Date(); //获得当前时间
var year = now.getFullYear();
var month = now.getMonth(); //获得月份, 最终显示月份时, 需要+1
var day = now.getDate(); //获得几号
var weekday = now.getDay(); //今天星期几
//获得每月的天数
var one = new Date(year, month, 1); //当月一号
one.setMonth(month + 1); //下月1号
one.setDate(0); //设置日期为0号, 即上月的最后一号
var days = one.getDate(); //当月的天数
//画表格
var rows = Math.floor((days + weekday + 6) / 7); //获得当月有多少天
for (var i = 0; i < rows; i++) {
var r = elem.insertRow();
for (var j = 0; j < 7; j++) {
var c = r.insertCell();
c.innerHTML = " ";
c.attachEvent("onclick", cellClick);
}
}
//填数字
for (var i = 0; i < days; i++) {
var r = (i + weekday) / 7;
var c = (i + weekday) % 7;
elem.rows[r].cells[c].innerHTML = i + 1;
}
//显示记事
var undefined = undefined;
function cellClick() {
// alert( event.srcElement.innerHTML );
var day = event.srcElement.innerHTML;
var events = data[day];
if (events === undefined) {
alert("没有记事");
}
else {
var html = "";
for (var i = 0; i < events.length; i++) {
html += events[i].subject + " : " + events[i].memo + "\n";
}
alert(html);
}
}
// 数据的表示
var data = {
"3": [
{
"subject": "今天有朋友过生日",
"memo": "不要忘了带礼物。"
},
{
"subject": "买礼品",
"memo": "不要太贵。"
}
],
"17": [
{
"subject": "看电影",
"memo": "提前订票"
}
]
};
</script>
</div>
</body>
</html>
