小强的HTML5移动开发之路（31）—— JavaScript回顾6

浏览数：18 / 时间：2015年06月11日

HTML DOM模型： w3c dom 模型(规范)出现之前，各个浏览器自己支持的一些dom操作

Select对象

属性：

selectedIndex:表示用户现在选择的那个选项的下标(从0开始)

length:获取或者设置选项的长度

options:值是一个数组，每个数组元素是option对象，表示下拉列表的所有选项

Option对象

属性：

text:选项的描述

value:选项的值

selected:当值为ture时，表示这个选项被用户选中

可以按照如下方式创建Option对象

var obj = new Option(text, value);

<html>
	<head>
		<script src="myjs.js"></script>
		<script>
			function f1(){
				//alert($(‘s1‘).selectedIndex);
				//alert($(‘s1‘).length);
				var arr = $(‘s1‘).options;
				for(i=0;i<arr.length;i++){
					alert(arr[i].text +‘   ‘+ arr[i].value);
				}
			}
			function f2(){			
				var op = new Option(‘武汉‘,‘wh‘);
				$(‘s1‘).options[$(‘s1‘).options.length] = op;
			}
		</script>
	</head>
	<body>
		<select id="s1" style="width:120px;" name="s1">
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="xa">西安</option>
			<option value="sz">深圳</option>
			<option value="tj">天津</option>
		</select>
		<input type="button" value="点我吧" onclick="f2();"/>
	</body>
</html>

级联下拉列表

<html>
	<head>
		<script src="myjs.js"></script>
		<script>
			var arr = new Array();
			arr[0] = [new Option(‘--方向--‘,‘-1‘)];
			arr[1] = [new Option(‘商务英语‘,‘en1‘),
				new Option(‘专业英语‘,‘en2‘)];
			arr[2] = [new Option(‘计算机软件‘,‘comp1‘),
				new Option(‘计算机网络‘,‘comp2‘),
				new Option(‘计算机应用‘,‘comp3‘)];
			//数组的创建放在外面执行效率更高
			function change(index){
				$(‘s2‘).length = 0;
				for(i=0;i<arr[index].length;i++){
					$(‘s2‘).options[i] = arr[index][i];
				}
			}
		</script>
	</head>
	<body>
		<select id="s1" style="width:120px;" onchange="change(this.selectedIndex);">
			<!-- this表示绑定该事件的节点,在这里表示<select>节点-->
			<option value="-1">--专业--</option>
			<option value="english">英语</option>
			<option value="computer">计算机</option>
		</select>
		<select id="s2" style="width:120px;">
			<option value="-1">--方向--</option>
		</select>
	</body>
</html>

Table对象相当于<table>

属性：

tHead:返回tHead对象

tFoot:返回tFoot对象

tBody:返回tBody对象数组

rows:返回表格所有的行，TableRow数组

方法：

var obj = insertRow(index):在index处插入一行,返回的obj是TableRow对象(下标从0开始)

deleteRow(index):删除index处的一行

TableRow对象相当于<tr>

属性：

cells：表示所有单元格的一个数组(TableCell对象)

方法：

var obj = insertCell(index); 在index处插入一个单元格，返回obj是TableCell

delecteCell(index):删除一个单元格

TableCell对象相当于<td>

<html>
	<head>
		<script src="myjs.js"></script>
		<script>
			//html dom模型做
			function addRow1(){
				var tr = $(‘t1‘).insertRow($(‘t1‘).rows.length);	
				var td1 = tr.insertCell(tr.cells.length);
				var td2 = tr.insertCell(tr.cells.length);
				td1.innerHTML = $(‘name‘).value;
				td2.innerHTML = $(‘salary‘).value;
				//tr.style.backgroundColor = ‘red‘;   //两种样式1
				//tr.className = ‘selected‘;          //两种样式2
				$(‘t1‘).rows[1].cells[1].style.backgroundColor = ‘red‘;//把某一格加亮
			}
			//采用w3c dom模型做
			function addRow2(){
				var tr1 = document.createElement(‘tr‘);
				var td1 = document.createElement(‘td‘);
				var td2 = document.createElement(‘td‘);
				td1.innerHTML = $(‘name‘).value;
				td2.innerHTML = $(‘salary‘).value;
				tr1.appendChild(td1);
				tr1.appendChild(td2);
				$(‘t1‘).appendChild(tr1);
			}
		</script>
		<style>
			.selected{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<table id="t1" border="1" cellpadding="0" cellspacing="0" width="60%">
			<tr><td>姓名</td><td>工资</td></tr>
			<tr><td>zs</td><td>2000</td></tr>
			<tr><td>ls</td><td>3000</td></tr>
			<tr><td>wu</td><td>4000</td></tr>
		</table><br/>
		姓名：<input type="text" name="name" id="name"/>
		工资：<input type="text" name="salary" id="salary"/>
		<input type="button" value="添加" onclick="addRow2();"/>
	</body>
</html>