学习java—第五十天学习笔记2019.9.4NIIT第五十天html是树状结构js操作css样式时，如果样式属性是两个

2019.9.4 NIIT第五十天

html是树状结构 js操作css样式时，如果样式属性是两个单词中间有——，会把两个单词拼接起来，第二个单词首字母大写平常js去操作html，css样式，请参考【网页制作完全手册】

xml语法中：换行也是一个节点(文本节点)

使用伪类选择器实现的效果是鼠标进入元素设置样式，鼠标移除元素，移除设置的样式 div:hover: 使用鼠标移入移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				border: red solid thin;
				width: 200px;
				height: 200px;
			}
			/*div:hover{
				color: red;
			}*/
		</style>
		<script type="text/javascript">
			function mouseOver(){
				var d1=document.getElementById("d1");
				d1.style.color="red";
			}
			function mousrOut(){
				var d1=document.getElementById("d1");
				d1.style.color="blue";
			}
		</script>
	</head>
	<body>
		<div id="d1" onmouseover="mouseOver()" onmouseout="mousrOut()">
			这里有一个鼠标经过事件
		</div>
	</body>
</html>

this关键字

表示当前对象，默认window

function show1(){
	console.log(this)
}

当做参数时，可以获取当前对象

function show3(obj){
	console.log(obj);
}
<img src="img/nike.gif" onclick="show3(this)"/>

动态创建时，可以使用this来获取当前对象，不需要一个一个设置

设置单元格高亮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function addBc(obj){
				obj.style.backgroundColor="red";
			}
			function removeBc(obj){
				obj.style.backgroundColor="white";
			}
		</script>
	</head>
	<body>
		<button onclick="clickMe()">点我</button>
		<table id="t1" border="" cellspacing="10" cellpadding="10">
			<thead>
				<tr onmouseover="addBc(this)" onmouseout="removeBc(this)">
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</thead>
			<tbody>
				<tr onmouseover="addBc(this)" onmouseout="removeBc(this)">
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr onmouseover="addBc(this)" onmouseout="removeBc(this)">
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr onmouseover="addBc(this)" onmouseout="removeBc(this)">
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr onmouseover="addBc(this)" onmouseout="removeBc(this)">
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>7</td>
					<td>8</td>
					<td>9</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

二级联动省市

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var cities = new Array();
				//2.定义第二维的数组，存储城市
				cities[0] = new Array("武汉市","黄石市","黄冈市","十堰市");
				cities[1] = new Array("长沙市","株洲市","湘潭市","衡阳市");
				cities[2] = new Array("苏州市","南京市","无锡市","常州市");
				cities[3] = new Array("杭州市","温州市","宁波市","嘉兴市");
			function addCity(sel){
				//获取省份的value
				var selOpValue=sel.selectedOptions[0].value;
				//获取对应省份的数组
				var selCity=document.getElementById("city");
					selCity.options.length=0;
				for(var i=0;i<cities[selOpValue].length;i++){
					var city=cities[selOpValue][i];
					console.log(city);
					//清空城市列表中的option
					var op=document.createElement("option");
					var textNode=document.createTextNode(city);
					//把文本节点挂载到节点上
					op.appendChild(textNode);
					console.log(op);
					selCity.appendChild(op);
				}
				//把数组中的所有城市添加到城市的select列表中
				
			}
		</script>
	</head>
	<body>
		<center>
			所在地

			<select name="" onchange="addCity(this)"> 
				<option value=>请选择省份</option>
				<option value="0">湖南省</option>
				<option value="1">湖北省</option>
				<option value="2">江苏省</option>
				<option value="3">浙江省</option>
			</select>
			
			<select id="city">
				<option value="">请选择城市</option>
			</select>
			
		</center>
	</body>
</html>