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

时间：2022-05-25 14:10:49
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>



标签：

相关文章