第3章 WEB03- JS篇【课件+代码】

今日任务

  • 使用JS完成页面定时弹出广告
  • 使用JS完成表单的校验
  • 使用JS完成表格的隔行换色
  • 使用JS完成复选框的全选效果
  • 使用JS完成省市联动效果

教学导航

教学目标掌握JS中的BOM对象掌握JS中的常用的事件掌握JS中的常用DOM操作了解JS中的内置对象
教学方法案例驱动法

1.1 上次课内容回顾:

CSS
1.CSS的概念:层叠样式表。用来修饰HTML的显示样式。
2.CSS的基本语法:选择器{属性1:”属性值”;属性2:”属性值”}
3.CSS的引入方式:
  3.1:行内样式:在元素标签上使用style属性。
  3.2:内部样式:在HTML的页面内部使用<style>标签控制
  3.3:外部样式:定义一个CSS文件,通过link标签将CSS文件引入
4.CSS的选择器:
  4.1基本选择器:
     4.1.1:元素选择器:span{}
     4.1.2:ID选择器:#d1{}
     4.1.3:类选择器:.s1{}
  4.2层次选择器:
     4.2.1:层次选择器:ul li{}
  4.3属性选择器:
     4.3.1:属性选择器:input[type=”text”]
  4.4伪类选择器:
     4.4.1:超链接:a:link a:visited a:hover a:active
5.CSS的属性:
  5.1字体:
	 Font-size:
	 Font-family:
  5.2背景:
	 Background:设置背景/背景图片
	 Background-color:背景色
6.CSS的盒子模型:
	 外边距:margin
	 边框:border
	 内边距:padding
7.CSS的悬浮和定位:
	 float:
	 清除悬浮:
		 clear:
	 position:

JavaScript:
1.JS的概述:运行在浏览器端的脚本语言。
2.JS的组成:ECMAScript,BOM,DOM
   a)ECMAScript:语法,变量,语句,对象
   b)BOM:浏览器对象
   c)DOM:操作文档对象
3.JS的语法:
	定义变量:统一使用var 弱变量类型.
	数据类型:
		原始类型:string,number,boolean,null,undefined
		引用类型:
	运算符:
		与Java一致. === 全等于
	语句:
		与Java一致. 

1.2 使用JS定时弹出广告

1.2.1 需求分析

在浏览网站的时候,通常会5秒左右在顶部显示一个广告。过了5秒钟将这个广告隐藏。在网站的首页上显示这个广告。

1.2.2 分析:

1.2.2.1 技术分析:

【JS的定时操作】

setInterval();
setTimeout();
clearInterval();
clearTimeout();

【CSS控制显示和隐藏的属性】

display:

  • block :显示的
  • none :隐藏的

1.2.2.2 步骤分析:

  • 步骤一:确定事件:onload.
  • 步骤二:在函数中设置定时的操作.5秒显示这个div.
  • 步骤三:清除原来的定时,重新设置一个定时操作.5秒以后隐藏掉.
  • 步骤四:设置5秒后隐藏的定时,可以清除.

1.2.3 代码实现

		<script>
			var time;
			function init(){
				// 设置定时操作:
				time = setInterval("showAd()",5000);
			}
			
			function showAd(){
				// 获得div元素
				var divAd = document.getElementById("divAd");
				divAd.style.display = "block";
				// 清除之前的定时操作:
				clearInterval(time);
				// 重新设置一个定时:5秒钟隐藏:
				time = setInterval("hideAd()",5000);
			}
			
			function hideAd(){
				// 获得div元素
				var divAd = document.getElementById("divAd");
				divAd.style.display="none";
				clearInterval(time);
			}
		</script>

1.2.4 总结

1.2.4.1 扩展内容

【JS的引入的方式】

  • 内部的JS

使用<script>标签

  • 外部的JS

创建一个.js的文件

使用<script src=”ad.js”></script>

【BOM中的对象】

第3章 WEB03- JS篇【课件+代码】
  • Window对象:浏览器最顶层的对象.
第3章 WEB03- JS篇【课件+代码】
  • Navigator:
第3章 WEB03- JS篇【课件+代码】
  • Screen
第3章 WEB03- JS篇【课件+代码】
  • History
第3章 WEB03- JS篇【课件+代码】
  • Location
第3章 WEB03- JS篇【课件+代码】

1.3 使用JS完成表单的校验

1.3.1 需求分析

之前已经完成了一个表单校验,弹出提示框的形式。用户的体验不是特别的好。现在当鼠标点到文本框的时候,在文本框的后面给我们一段提示.当光标离开的时候完成校验.将信息写到文本框的后面的位置而不是提示框的形式。

1.3.2 分析

1.3.2.1 技术分析

【JS中的事件】

之前使用的事件:
onclick:
onsubmit:
onload:

使用:
onfocus	:获得焦点
onblur	:失去焦点

【JS控制向HTML的某个元素中写入内容】

document.getElementById(“”).innerHTML = “”;

1.3.2.2 步骤分析

  • 确定事件:获得焦点和失去焦点
  • 定义函数,在函数中进行校验
  • 将校验的内容写入到文本框后面的<span>元素

1.3.3 代码实现:

		<script>
			function showTips(uid,info){
				// 控制后面的span元素:
				document.getElementById(uid+"span").innerHTML = "<font color='gray'>"+info+"</font>";
			}
			
			function checkUsername(uid,info){
				// 判断用户名是否为""
				var uValue = document.getElementById(uid).value;
				if(uValue == ""){
					document.getElementById(uid+"span").innerHTML = "<font color='red'>"+info+"</font>";
				}else{
					document.getElementById(uid+"span").innerHTML = "";
				}
			}
		</script>

1.3.4 总结

1.3.4.1 JS的事件的总结:

onchange	:下拉列表上
ondblclick	:双击
onkeydown	:键盘按下
onkeyup		:键盘抬起
onmouseover	:鼠标在上面
onmouseout	:鼠标离开
onmousemove	:鼠标移动

需求:表格鼠标放上显示一个颜色,鼠标离开样式没有了!
<script>
			function changeColor(tid,flag){
				if(flag == 'over'){
					var tid = document.getElementById(tid);
					tid.style.backgroundColor="gold";
				}else if(flag == 'out'){
					var tid = document.getElementById(tid);
					tid.style.backgroundColor="white";
				}
			}
		</script>

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 需求的分析

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

第3章 WEB03- JS篇【课件+代码】

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的树形结构.
第3章 WEB03- JS篇【课件+代码】

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>

【数组对象的使用】

创建数组:

第3章 WEB03- JS篇【课件+代码】

数组的属性:

第3章 WEB03- JS篇【课件+代码】

数组的方法:

第3章 WEB03- JS篇【课件+代码】

1.6.2.2 步骤分析

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

1.6.3 代码实现

第3章 WEB03- JS篇【课件+代码】
// 定义二维数组:
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 总结

第3章 WEB03- JS篇【课件+代码】

查看文档了解方法:

全局函数:

第3章 WEB03- JS篇【课件+代码】
parseInt();		将字符串转出整型
parseFloat();	将字符串转成小数

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

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

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

1.7.1 需求

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

第3章 WEB03- JS篇【课件+代码】

1.7.2 分析

1.7.2.1 步骤分析

  • 单击事件:
  • 编写函数:获得左侧的下拉列表.
  • 遍历左侧列表中的所有的option元素.判断是否被选中。
  • 如果被选中添加到右侧.
  • 单击事件:
  • 编写函数:获得左侧的下拉列表.
  • 遍历左侧的列表中的所有的option.
  • 全部添加到右侧.
第3章 WEB03- JS篇【课件+代码】

课程配套代码

已付费?登录刷新

原创文章,作者:小助手,如若转载,请注明出处:https://www.javahelp.com.cn/698.html

(0)
上一篇 2022年8月30日 下午12:13
下一篇 2022年8月30日 下午11:04

相关推荐

发表回复

登录后才能评论