JAVAWEB第四天——JavaScript速成(2)【动态添加省市二级联动，表格高亮显示demo，表格隔行换色，js编码，解码】

一、后台项目隔行换色需要的技术部分

新标签的学习

<thead>
<tr>
		<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
		<td></td>
</tr>
</tbody>

确定事件(页面加载事件onload)
获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。
tbody里面的行数(rows.length)
JS的遍历(for循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)

二、隔行换色的步骤

第一步：确定事件(onload)并为其绑定一个函数
第二步：书写函数(获取表格)
第三步：获取tbody里面的行数
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行(角标对2取余)
第六步：分别对奇数行和偶数行设置背景颜色

三、代码实现

<script>
window.onload = function(){
//获取表格
var tblEle = document.getElementById("tbl");
var len = tblEle.tBodies[0].rows.length;
for(var i =0;i<len;i++){
		if(i%2 == 0){			 		
		tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
	}
		else{			 		
		tblEle.tBodies[0].rows[i].style.backgroundColor="yellow";
		}
	 }
}
</script>

TIPS：tBodies[0]：表示第一个tbody部分，也就是一个表，如果有两个tbody则需要写tBodies[1]……另外注意行一定要写rows，如rows.length和rows[i]。标题头部用thead包裹，表部分用tBody部分包裹。

四、实现一个表格高亮显示技术需求

事件 onmouseover=”一个函数”
事件 onmouseout=“一个函数”

五、表格高亮显示代码实践

<script>
function changeColor(id,flag){
if(flag =="over"){		
	document.getElementById(id).style.backgroundColor="red";
		}
else if(flag == "out"){
	document.getElementById(id).style.backgroundColor="white";
		}
	}
</script>

在每一行进行函数的书写例如：

<tr οnmοuseοver="changeColor('tr1','over')" id="tr1" οnmοuseοut="changeColor('tr1','out')">

六、常用事件的回顾

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)

七、后台进行全选和全不选操作技术需求

确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面
获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked ？
获取下面所有的复选框：
document.getElementsByName(“name”);

八、后台进行全选和全不选的步骤分析

第一步：确定事件(onclick)并为其绑定一个函数
第二步：书写函数(获取编号前面的复选框，获取其状态)
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)

九、代码实践

function checkALL(){
var checkallEle = document.getElementById("checkall");
	if( checkallEle.checked ==true){
var checkOnes = document.getElementsByName("checkOne");
for(var i = 0;i<checkOnes.length;i++){
checkOnes[i].checked  = true;
			}
 }else{
var checkOnes = document.getElementsByName("checkOne");
for(var i =0 ;i<checkOnes.length;i++){
		checkOnes[i].checked  = false;
		}
	}
}

在全选对勾上面进行标注：<th><input type="checkbox" onclick="checkALL()" id="checkall"/></th>
在每个格子上面进行选择：<td><input type="checkbox" name="checkOne"/></td>

Tips:
1.记得var checkOnes为一个对象数组，后面将他们选中应当进行遍历。
2.getElementsByName()的返回值是一个对象。

十、 JavaScript的DOM操作

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

十一、 Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

后面两个方法获取之后需要遍历！
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

十二、 Element元素

我们所认知的html页面中所有的标签都是element元素。

element.appendChild()

向元素添加新的子节点，作为最后一个子节点。

element.firstChild()

返回元素的首个子节点。

element.getAttribute()

返回元素节点的指定属性值。

element.innerHTML()

设置或返回元素的内容。 =赋值，若无则获取

element.insertBefore()

在指定的已有的子节点之前插入新节点。

element.lastChild()

返回元素的最后一个子元素。

element.setAttribute()

把指定属性设置或更改为指定值。

element.removeChild()

从元素中移除子节点。

element.replaceChild()

替换元素中的子节点。

十三、 Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

十四、添加省市二级城市的一个小DEMO

<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
	//1.获取ul元素节点
	var ulEle = document.getElementById("ul1");
	//2.创建城市文本节点
	var textNode = document.createTextNode("深圳");//深圳
	//3.创建li元素节点
	var liEle = document.createElement("li");//<li></li>
	//4.将城市文本节点添加到li元素节点中去
	liEle.appendChild(textNode);//<li>深圳</li>
	/5.将li添加到ul中去
	ulEle.appendChild(liEle);
		}
	}
</script>		
<body>
		<input type="button" value="添加城市" id="btn"/>
		<ul id="ul1">
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
			
		</ul>
	</body>

十五、完成省市二级联动技术分析

事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建？)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作

createTextNode()
createElement()
appendChild()

十六、完成省市二级联动的步骤

第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。

十七、代码实践

var Cities = new Array(3);
var Cities = new Array(3);
	Cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
	Cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
	Cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
	Cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

	
function selectCity(val){
	//获取第二个下拉列表的option内容
	var cityEle = document.getElementById("city");
	//清空列表列表内容
cityEle.options.length =0;
	for(var i =0;i<Cities.length;i++){
		if(val == i){
			for( var j = 0;j<Cities[i].length;j++){
		//创建城市的文本节点
		var textNode = document.createTextNode(Cities[i][j]);
		//创建option元素节点
		var opEle = document.createElement("option");
		//将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
				//将option元素节点添加到第二个下拉列表中去
				cityEle.appendChild(opEle);
			}
		}
	}		
籍贯&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<select onchange="selectCity(this.value)">
		<option>--请选择--</option>
		<option value="0">湖北</option>
		<option value="1">湖南</option>
		<option value="2">河北</option>
		<option value="3">河南</option>
		</select>
		<select id="city">
						
		</select>
</div>

十八、 JavaScript内置对象

包含JS Array、JS Boolean、JS Date、 JS Math、JS Number、JS String、JS RegExp
 Array对象
Array对象用于在单个的变量中存储多个值。
创建Array对象用于在单个的变量中存储多个值。
 创建对象的语法：

new Array();

new Array(size);

new Array(element0,element1,…elementn);

 数组的特点：
长度可变！数组的长度=最大角标+1
 方法如拼接等，concat()，和插入join()等
 Boolean对象

 创建Boolean对象的语法：
new Boolean(value) //构造函数
Boolean(value); //转换函数
如果不写value，那么默认创建结果为false；
 Date对象

getTime()

返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题

time = new Date().gettime（）；

 Math和number对象
取绝对值，ValueOf()，与java中一模一样
 String对象

match()

找到一个或多个正则表达式的匹配。
substr()

从起始索引号提取字符串中指定数目的字符。

substring()

提取字符串中两个指定的索引号之间的字符。

案例：
<script>
	var str = "-a-b-c-d-e-f-";
	var str1 = str.substr(2,4);//-b-c
	//alert(str1);
	var str2 = str.substring(2,4);//-b
	alert(str2);
</script>

 RegExp对象
正则表达式对象
test
检索字符串中指定的值。返回 true 或 false。
 全局函数
全局属性和函数可用于所有内建的 JavaScript 对象

关于编码和解码的一组方法：

<script>
	var str = "张三";
	//alert(encodeURI(str));
	//%E5%BC%A0%E4%B8%89
	//alert(encodeURIComponent(str));
	//%E5%BC%A0%E4%B8%89
	编码
	//alert(decodeURI(encodeURI(str)));
	//张三
	//alert(decodeURIComponent(encodeURIComponent(str)));
	//张三
	解码
	var str1 = "http://www.itheima.cn";
	//alert(encodeURI(str1));
	//http://www.itheima.cn
	//alert(encodeURIComponent(str1));
	//http%3A%2F%2Fwww.itheima.cn
	
	//alert(decodeURI(encodeURI(str1)));
	//http://www.itheima.cn
	//alert(decodeURIComponent(encodeURIComponent(str1)));
	//http://www.itheima.cn
	
	var str2 = "alert('abc')";
	//alert(str2);
	eval(str2);
	
</script>