第3章 WEB03- JS篇-视频教程-第二部分

Java帮帮

发布于 2022-11-25 16:51:10

3K0

发布于 2022-11-25 16:51:10

文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结

11-案例三：JS控制表格隔行换色的总结第一行不换色

12-案例四：JS控制复选框的全选和全不选-需求和分析

13-案例四：JS控制复选框的全选和全不选-代码实现

14-案例四：JS控制复选框的全选和全不选-总结DOM

15-案例五：JS控制二级联动的需求和分析

16-案例五：JS控制二级联动的代码实现

17-案例五：JS控制二级联动的总结内置对象

18-案例五：JS控制二级联动的总结全局函数

19-案例六：JS控制下拉列表左右选择-需求

20-案例六：JS控制下拉列表左右选择-分析和代码实现

1.4 使用JS控制表格的各行换色

1.4.1 需求

在网站的后台的表格页面中让表格显示出隔行换色的效果：

1.4.2 分析：

1.4.2.1 技术分析

【使用JS控制表格】

var tab1 = Document.getElementById(“tab1”);
var rows = tab1.rows.length;
for(){
	if(i % 2 == 0){

}
}

1.4.2.2 步骤分析：

步骤一：确定事件：onload事件
步骤二：获得表格元素
步骤三：获得表格的所有行的长度
步骤四：遍历表格的所有行
步骤五：使用下标对2取余
步骤六：设置奇数行和偶数行的颜色。

1.4.3 代码实现：

<script>
			window.onload = function(){
				// 获得表格元素：
				var tab1 = document.getElementById("tab1");
				// 获得表格的所有的行数：
				var len = tab1.rows.length;
				// 遍历所有的长度
				for(var i=0;i<len;i++){
					// 判断是奇数行还是偶数行：
					if(i % 2 == 0){
						tab1.rows[i].style.backgroundColor = "#33FF22";
					}else{
						tab1.rows[i].style.backgroundColor = "#883311";
					}
				}
			}
		</script>

1.4.4 总结：

表格隔行换色的时候，将最上一行也换掉了。第一行往往不需要进行换色的。

<table>
	<thead>
		<tr>
			<th></th>
		<tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		<tr>
	</tbody>
</table>

代码实现：
			window.onload = function(){
				// 获得表格元素：
				var tab1 = document.getElementById("tab1");
				// 查找表格中tbody中的所有的行数。
				var len = tab1.tBodies[0].rows.length;
				for(var i = 0 ;i<len ;i++){
					if(i % 2 == 0){
						tab1.tBodies[0].rows[i].style.backgroundColor="green";
					}else{
						tab1.tBodies[0].rows[i].style.backgroundColor="gold";
					}
				}
			}

1.5 使用JS控制复选框的全选和全不选的效果

1.5.1 需求的分析：

在后台管理页面中，往往会有批量删除数据的效果，就需要有复选框全选和全部选的效果。

1.5.2 分析：

1.5.2.1 步骤分析：

步骤一：确定事件：单击事件
步骤二：获得下面的所有的复选框
步骤三：如果上面的复选框被选中，将下面的所有的复选框选中状态变为checked=true.
步骤四：如果上面的复选框没被选中，将下面的所有的复选框选中状态变为checked=false.

1.5.3 代码实现：

function selectAll(){
				// alert("aaa");
				// 获得上面的复选框：
				var sAll = document.getElementById("selectAll");
				
				if(sAll.checked == true){
					// 上面的复选框被选中
					// 将下面的所有的复选框都被选中。
					var selectOnes = document.getElementsByName("selectOne");
					// 遍历数组中的每个元素，让每个元素都被选中：
					for(var i = 0;i<selectOnes.length;i++){
						selectOnes[i].checked = true;
					}
				}else{
					// 上面的复选框被选中
					// 将下面的所有的复选框都被选中。
					var selectOnes = document.getElementsByName("selectOne");
					// 遍历数组中的每个元素，让每个元素都被选中：
					for(var i = 0;i<selectOnes.length;i++){
						selectOnes[i].checked = false;
					}
				}
			}

1.5.4 总结：

1.5.4.1 DOM的操作：

DOM：Document Object Model 文档对象模型.

将HTML文档装载到内存,将HTML文档形成一个DOM的树形结构.

Document:文档对象.代表的是加载到内存中的整个的文档

方法：

document.getElementById(“”);
document.getElementsByName(“”);
document.getElementsByTagName(“”);
document.createElement(“”);

Element:元素对象.代表文档中的每个元素（标签）

<ul>
	<li>北京</li>
	<li>上海</li>
	<li>深圳</li>
</ul>

属性：

firstChild：获得其第一个孩子节点
lastChild：获得其最后一个子节点

方法：

appendChild();将节点添加到当前节点的最后.
insertBefore();将节点添加到某个元素之前.

Attribute:属性对象.代表元素上的属性.

Document,Element,Attribute统称为Node（节点）

1.6 JS控制二级联动：

1.6.1 需求：

在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出.

1.6.2 分析：

1.6.2.1 技术分析：

【DOM创建元素】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function addEl(){
				// 创建元素：
				var liEl = document.createElement("li");// <li></li>
				// 创建文本节点:
				var textEl = document.createTextNode("广州");// 广州
				// 将文本放入到li元素:
				liEl.appendChild(textEl);// <li>广州</li>
				// 获得ul元素:
				var ulEl = document.getElementById("ul1");
				// 将li放入到ul
				ulEl.appendChild(liEl);
			}
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li>北京</li>
			<li>上海</li>
			<li>深圳</li>
		</ul>
		
		<input type="button" value="点击" onclick="addEl()"/>
	</body>
</html>

【数组对象的使用】

创建数组：

数组的属性：

数组的方法：

1.6.2.2 步骤分析：

步骤一：确定事件：onchange.
步骤二：获得改变的省份值 .
步骤三：比较省份的值与数组中定义的值是否相等，如果相等获得这个省份对应的所有的市的数组.
步骤四：创建option元素，将数组中的值添加到option元素中。
步骤五：将option添加到第二个下拉列表中.

1.6.3 代码实现：

// 定义二维数组:
var cities = new Array(4);
cities[0] = new Array("长春市","吉林市","松原市","延边市");
cities[1] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[2] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[3] = new Array("南京市","苏州市","扬州市","无锡市");
			
function selectCity(val){
	// alert(val);
	var citySel = document.getElementById("city");
	// 清除原有的option:
	citySel.options.length = 0;
				
	// 遍历数组：
	for(var i=0;i<cities.length;i++){
		if(val == i){
		// 遍历数组：
		for(var j = 0 ;j<cities[i].length;j++){
			// alert(cities[i][j]);
			// 创建option元素：
			var opEl = document.createElement("option");
			// 创建文本元素：
			var textNo = document.createTextNode(cities[i][j]);
			// 将文本添加到option中．
			opEl.appendChild(textNo);
			// 将option添加到第二个下拉列表中
			citySel.appendChild(opEl);
			}
		}
	}
}

1.6.4 总结：

查看文档了解方法：

全局函数：

parseInt();		将字符串转出整型
parseFloat();	将字符串转成小数

encodeURI()
decodeURI()
encodeURIComponent()
decodeURIComponent()

eval()			:将一段字符串当成一个JS的代码来运行

1.7 JS控制下拉列表左右选择：

1.7.1 需求：

有两个列表，需要将左侧列表中的数据添加到右侧的列表中：

1.7.2 分析：

1.7.2.1 步骤分析：

单击事件：
编写函数：获得左侧的下拉列表.
遍历左侧列表中的所有的option元素.判断是否被选中。
如果被选中添加到右侧.
单击事件：
编写函数：获得左侧的下拉列表.
遍历左侧的列表中的所有的option.
全部添加到右侧.

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-09-07，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自 Java帮帮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度