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

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一致. 

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

		<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>

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

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

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

		<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>

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>