小強のHTML 5モバイル開発の道(31)-JavaScriptレビュー6

5065 ワード
JavaScript
HTML DOMモデル:w 3 c 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オブジェクト
に相当
属性:
tHead:tHeadオブジェクトを返す
tFoot:tFootオブジェクトを返します
tBody:tBodyオブジェクト配列を返す
rows:テーブルのすべての行を返し、Table Row配列
方法:
var obj=insertRow(index):indexに行を挿入し、返されるobjはTable Rowオブジェクト(下付きは0から)
deleteRow(index):indexの行を削除
Table Rowオブジェクト
に相当
属性:
cells:すべてのセルを表す配列(Tableセルオブジェクト)
方法:
var obj = insertCell(index); indexにセルを挿入し、objがTableセルであることを返します.
delecteCell(index):セルを削除
Tableセルオブジェクト
に相当する
<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>
62進数
Web StorageのセッションStorageとlocalStorage