HTML
1.网页页面内右击——显示源码 ，相同的代码在不同的浏览器上显示效果不一样。
2.HTML是超文本语言和标记语言：
超文本：就是指页面内可以包含图片、连接等非文字内容。
标记语言：就是使用标签的方法将需要的内容包括起来。如：<a>www….</a>
3.HTML不编译直接使用浏览器运行，以.html或 .htm后缀，由标签组成不区分大小写，开始标签结束标签组成，无结束标签以“/”结尾。
4.HTML结构包括：head 和body 、html
head:存放页面的重要信息,一般不再页面上显示
子标签:
title:标题
meta:用来存放页面重要信息
link:样式
style:样式
Body：存放要展示的信息。
html：为根标签。
<html>
<head>
<title> Hello html </title>
</head>
<body>
</body>
</html>
5.注释与Java一样不能嵌套：注释为<!-- --> 。
6.源码中的代码格式不会显示在页面中，只能使用标签来体现。
8.标签：若哪个属性自适应可用100%
1.标题：共六级 H1-h6：
<h1> </h1>
特点：依次变小，加粗字体，默认换行。
2.水平线：
<hr />：直接就这么用。
size：设置线的粗细 noshade：有无阴影 noshade
width：设置宽度 开标签的内容称之为属性：键=“值”
设置尺寸方案：
（1）值px：（40px）值加像素
（2）值 ：40
（3）使用百分比：50% （只有横向上使用）
3.字体：
<font > </font>
Color ：设置字体颜色 Alt+/或自己配色#000000每两位代表红绿蓝依次 共六位值。
Face： 字体
size： 字体大小（取值1-7）按照规范的取值设置
4.加粗 斜体：
<b> </b>同<strong></ strong> <i> </i> 可嵌套
5.换行：中间有空格
<br />
6.转义字符：
 ：空格 ©：? <：小于 >：大于
7.段落：
<p> </p> 特点：段落间自动加换行。
8.添加图片
<img src=”” alt=”” title=””>
属性有：
alt：图片无法显示时的替代文本。
title：鼠标移动到图片上显示的文字。
width：设置图片宽度
height：定义图片高度
路径： ../：代表上一级目录。
相对路径：同一片的路径是根据当前html文件的位置推导的，故为相对路径
9.列表：
有序列表：<ol> ——orderd list
<li></li>
</ol>
无序列表： <ul>
<li></li>
</ul>
type：ol——A、a、1…
ul——circle、disc、square
10.超链接：
<a href=” “ target=””> </a>
href：连接路径
target：页面控制
_black：开启新页面显示内容。
_self ：新页面覆盖就页面（默认）。
自定义：给部分页面起名，参数则用自定义名，则在此部分页面显示。
9.布局：
1.表格进行页面布局
<table> 创建表的快捷方式：tr*行数>td*列数 + tab
认为：任何数据显示都可以存储在表格中，表格由行与列组成。
<tr>：行
<td>：列
</td>
</tr>
</table>
table属性：
border：设置边框粗细
设置间距：cellpadding=”0px “ 元素与单元格之间的间距
cellspacing=”0px” 单元格之间的间距
width：表格的宽度
bgcolor：单元格的背景色
align：
td：设置当前单元格的对齐方式 tr：设置所有单元格的对齐方式
table：设置表格本身在body中的对齐方式，单元格不受影响
表格的跨行跨列：
跨列：<td colspan=”列数”> </td>
跨行：<td rowspan=”行数” ></td>
跨行又跨列：<td colspan=”列数” rowspan=”行数”></td>
2.框架布局 <frameset> 与<body>不共存
上下布局：<frameset rows=”30%,*” > rows=”
<frame/>
<frame/>
</frameset>
左右布局：<frameset cols=”30%,*”> cols=””
<frame/>
<frame/>
</frameset>
上下加左右：
<frameset rows=”30%,*” >
<frame noresize=”noresize”/>
<frameset cols=”20%,*”>
<frame noresize=” noresize”/>
<frame noresize=” noresize”/>
</frameset>
</frameset>
<frameset>属性：rows、cols属性取值：值1、值2、值3…..一值表分一块， 多值使用“，”分割。*：代表剩余量。
<frame>属性：src： 确定页面的路径
noresize：框架分割线能不能移动 noresize=：”noresize” 设置不可拖动
name： 框架页面的名字
*如何不同的frame显示相应的页面
添加属性：src=”页面路径”
*左侧的菜单栏单击时，如何将内容显示在右侧
A、右侧frame设置name属性
B、左侧页面路径的超链接的target=”右侧的frame的name值”
3.div+CSS
HTML表单&CSS
Web执行流程：浏览器将数据发到服务器 服务器处理数据 服务器将结果返回浏览器。
提交到服务器端数据格式：域名？键1=值&键2=值2&。。。。
表单涉及到要素：
*要发送到服务器的地址 <form>中使用action=“服务器URL”
*<input>输入项让客户 输入
*程序员要指定键 即输入项中输入name，name即输入的键。
*发送方式 默认method为GET即默认，POST则为不显示数据
name:
1.表单标签：
<form>：将数据提交到服务器，负责收集数据的标签必须放在表单标签体内
属性：
action： 请求路径，确定表单提交到服务器的地址。
method：请求方式，常用取值只有：GET、POST
GET： 默认值 提交的数据追加在请求路径后面
请求路径长度有限，故get请求的数据有限。
POST：提交的数据 不 追加在请求路径后面 请求的数据以流的形式传输
2.输入域标签 ：
<input type=>：获得用户输入的信息，type属性值不同，搜集方式不同
Type表单输入项的属性值：
text： 文本框，单行
password：密码框，以黑圆点显示
radio：单选框，放到同一个组，组的指定 即两个input的name值要一样 必须要有value值，否则传的为on默认选定：checked =“checked”/ true；
submit：提交按钮
checkbox：复选框 name 相同，也要有value值 否则传的为on
默认选定：checked =“checked”/true；
file：文件上传按钮，提供选择文件
hidden：隐藏字段，存储不需要在客户端显示但要发送给服务器的数据。很重要
reset：重置按钮。将表单恢复默认值。
button：普通按钮，常与JavaScript结合使用。
name： 元素名，如果需要表单数据提交到服务器，必须有name服务器通过此属性获取到提交的数据。
value： 设置input标签的默认值，submit和reset按钮显示数据，其他的均是提交数 据网址上显示的值，若未设置则为name值=on
size： 设置长度
checked： 单选框或复选框默认被选中。
readonly： 是否只读，不允许修改，数据依据可以传入服务器
disabled： 不可用，且不回显，即不发送到服务器
maxlength：最大长度
required: 此input标签为必填项。
3.下拉列表：
<select> :进行多选和单选，需使用标签<option>指定列表项
name：发送给服务器的名称
multiple：取值为multiple表示多选
<option>子标签：下拉列表中的一个选项
selected：勾选当前列表项
value：发送给服务器的选项值
4.文本域：
<textarea>：可输入多行
name：名字
rows：指定行数
cols：指定列数
CSS层叠样式表
1.HTML与CSS关系:
HTML：主要存储网页中的内容
CSS：主要对HTML内容进行装饰的
2.CSS一般结合HTML标签使用：常用标签div和span。
div：进行区域划分，独自占一行，自带换行。
span：不换行，区域刚好包含当前内容
3.注意：
CSS样式选择器 严格区分大小写，属性和属性值不区分大小写，多属性间“;”分割，若此属性值由多词组成引号引起。
4.HTML引入CSS style
1.行内样式：
* HTML中使用style属性，编写CSS代码
<a style=”color：#f00;font-size：30px;”>传智博客</a>
2.内部样式：内嵌式
*在HTML的<head>标签中使用 <style> font{ 参数} </style>
<style type=”text/css”>
font{
Background-color:#ddd;
}
</style>
3.外部样式：链入式。
将样式放在以.css为扩展名的外部文件中，HTML通过
<link rel=“stylesheet” href=“CSS文件路径”>。一个文件多次使用。
rel:属性规定当前文档与被链接文档之间的关系
*优先级：行内样式最高，离标签越近优先级越高
5.CSS选择器（内部样式） 选择CSS样式作用在哪些标签上
*id选择器：针对一个
#id名{属性1：属性值1；属性2：属性值；…..} id不能以数字开头。
*类选择器 针对一类
.类名{属性1：属性值1；属性2：属性值；…. }
*元素选择器
标记名{属性1：属性值1；属性2：属性值；…..}
h1{color:#f00;font-size:50px;}
<h1>传智博客</h1>
*属性选择器★ （派生的选择器）
要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
*层级(后代)选择器：给父标签的后代标签设置样式
父标签 后代标签{属性1：属性值1；属性2：属性值；…..}；
了解的选择器
锚伪类选择器 顺序固定
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
6. 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。
常见的块元素：<h1>、<div>、<ul>等
行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
常见的行内元素：<span>、<a> 等
6.CSS的样式参数 均在选择器的{}内 css样式一般会有“-”
字体
font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格
文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline
text-align:对齐文本
列表:
list-style-type:设置列表项的类型 例如:a 1 实心圆
list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");
背景:
background-color:设置背景颜色
background-image:设置图片作为背景 url
边框和尺寸：
border：宽度 样式 颜色 border:1px solid #f00
样式取值：solid 实线 none 无边 double 双线
width 、height：标签的宽度和高度
设置超链接的样式：
去除下划线：text-decoration
布局：
float：浮动
属性值：left right none（默认不浮动）
clear：清除浮动的影响
属性值：left right both
现象：有的浮动有的不浮动
页面分两部分天花板和地板，客户从上向下看，两部分重合。消除重叠：clear
转换:
块标签：以区域的方式出现。每块单独整行或多整行。
常见块元素：<h1> <div> <ul>
行内元素：不必新开始一行，
常见行级元素：<span> <a>
行内元素与块元素转换：display
选择器{display：属性值}
block：此元素将显示为块元素
none：此元素将被隐藏，也不占用页面空间
inline：此元素将显示为行内元素，（行内元素默认的display属性值）
修改样式
操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可
7.CSS的盒子模型：网页f12可看3D视图
即可以嵌套 可平级。CSS一些组件可以看做是盒子 body是大盒子 div是小盒子
padding：内边距，与内部盒子的距离 但置右和下可能无效
padding-top：上内边距
padding-left : 左内边距
border：边框
border-top-style：上边距样式
border-left-style：左边距样式
margin：外边距，即不同盒子间距离 但置右和下可能无效
margin-top：外上边距
margin-left : 外下边距
8.HTML+CSS--------------------没有动态效果的页面。
JavaScript
1. JavaScript开发交互式的web页面，轻量级的脚本语言。不需要编译，直接嵌入在HTML页面，由浏览器执行。
2. 编译型计算机语言 （效率高）
源码编译生成机器码，每次执行都执行机器码
解释型计算机语言
编写源码，每次执行都是执行源码
3.作用：
1. 添加页面动画效果，提供用户操作体验
2. 主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等
4.JS引入方式
内嵌式： <head>中，通过<script >
<script type=”text/javascript”>
Js代码
</script>
外联式：在HTML中，通过<script src=””>引入
<script src=”js代码地址” type= “text/javascript” charset=”utf-8”></script>
5.JS学习路线
基本语法-----ECMAScript：基本语法（语法，语句）
变量、运算符、流程控制、方法
对象：
BOM：浏览器对象
DOM：操作文档中的元素和内容。
1).变量
1. 命名规范：?
必须以字母或下划线开头，中间可数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作变量名，如：function
JavaScript严格区分大小写。
2.变量的声明：var 变量名; //JavaScript变量可不声明直接使用。默认值：undefined
3.变量的赋值：var 变量名 = 值; 是弱类型，即一个变量可存放不同类型的数据，只能 使用var（variable）定义变量。
2).数据类型：
基本数据类型：
整型-------整数
浮点-------小数
字符串-----“ abc”/’abc’
布尔--------true /false 和其他（与Java不同）
Null---------空 ，一个占位符。值 undefined是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
---undefined声明变量未初始化时，变量默认值为undefined。
alter(null==undefined)：为TRUE，值相等但含义不同。
引用数据类型: 引用类型通常叫做类（class），处理的是对象如（Windows）。
JavaScript是基于对象而不是面向对象。对象类型的默认值是null.
JavaScript提供众多预定义引用类型（内置对象）。
3).运算符： 与Java基本一致
算数运算符
赋值运算符
逻辑运算符
比较运算符：
===：全等，值和类型都相等。 ！==
== ： 忽略数据类型比较值 ！=
var num1=”5” var num2=5;
window.alert(num1==num2) true
window.alert(num1===num2) false
4).流程控制;
Java中if的条件必须是布尔值。而JS中多种 if语句内一定要有返回值的真假。
Undefined false
null false
Number(+0,-0或NaN) false 余为true
String 空串为 false
Object(如果为对象) true
特殊值：NaN (not a number)
5).方法的编写及调用 Java中的方法method js中的函数function
回调函数：函数我们写的，但是调用时机不受我们控制
Java 实现：
Public static int getSum(int num，int num2){
returen num1+num2;
}
调用：
Int sum = getSum(1,2);
JS 实现
Function 函数名 (参数1，参数2){
函数实现；
}
var demo=function(){}
调用
规范调用：与Java一样 var sum = getSum(1,2)
非规范调：只要方法名合法，参数列表可以不一样。不建议。 也可以直接写方法名不要“（）”
注意：JS不存在重载，如果方法名一样，那么后面的方法会覆盖掉前面的。
6.BOM对象：
*Window——窗体
alert——警告框
window.alert(“警告消息”) alert(false||"abc")
confirm——确认框——返回boolean值
var flag = confirm(“确认删除？”）;
alert(“客户选择：”+flag);
prompt——输入框——返回客户录入的文本
var v = prompt(“请您输入数据：”）;
alert(“客户输入的是：”+v);
innerHTML：向页面的某个元素中写内容，将原有的东西覆盖。
<script>
window.onload = function(){
var t1 =document.getElementById("t1");
t1.onmouseover = function(){
t3.value = "鼠标移入t1"
}
t1.onmouseout = function(){
t2.innerHTML = "鼠标移出了"
}
}
</script>
<body>
<div id="t2"></div>
<input type="text" id="t1" />
<input type="text" id="t3"/>
</body>
*location——单击事件，跳转到新的页面
<script>
function hehe(){
location.href="../轮播图/轮播图.html";
}
</script>
<input type="button" value="单击我" onclick="hehe()"/>
*History——浏览器有前进和返回功能，但使用前提是有历史记录，并在history中。
history.forward() = history.go(1)
history.back() = history.go(-1)
例：
页面一： <script>
function end(){
history.forward();
}
</script>
<body>
我是 start
<a href="end.html">跳转到end</a>
<input type="button" value="去end" onclick="end()"/>
</body>
页面二： <script>
function backto(){
history.back();
}
</script>
<body>
我是end
<input type="button" value="返回" onclick="backto()" />
</body>
7.DOM 对象 Document object model 文档对象。代表整个HTML文档
页面加载完实现：window.onload = function(){}
1).获取DOM对象
A. JS 内置对象document，代表了文档
B. 每一个标签(又称为元素)都可以看做是一个对象
C. 获取一个具体的标签对象
<div id=”d1”> hello word </div>
<script>
var d1 = document.getElementById(“id值”);
window.alert(d1);
</script>
*将script放到head中取不到d1（null）
原因：和页面加载顺序有关，从上向下加
*解决办法：
1.将script代码存储在要获取的元素的下面
2.body中 设置属性 onload=“函数”当Body页面加载完后执行函数。JS在head中，编写函数实现。HTML中出现了JS代码。
3.去除body的onload属性，在JS中添加代码window.onload = 函数名；函数名无括。 降低耦合性
4.匿名方法
<script>
window.onload = function(){
var d1 = document.getElementById(“id值”);
window.alert(d1);
}
</script>
2).获取标签对象
方式一：var d = document.getElementById(“id”) 根据Id返回标签对象数组
方式二：var ds = document.getElementsByTagName(“标签名”) 根据标签名返回多个对存入数组。
方式三：var ds = document.getElementsByClassName(“类名”)据类名，返回多个对象到数组
3).操作DOM对象
元素操作：createElement、appendChild
document.createElement(”标签名”) 创建元素节点。
document.createNodeText(”文本内容”) 创建文本节点。
setAttribute(name,value); 给元素设置属性名和属性值
ele.appendChild(子元素) 向标签体末尾添加新的子节点。
实例：
在页面加载后,动态给页面的div表中动态添加一个元素,比如超链接等
<!—HTML代码-->
<div id="divId"></div>
<script type="text/javascript">
//1 获得div对象(元素--标签)
var divObj = document.getElementById("divId");
//2 创建a元素
// * createElement 创建指定名称的元素
var aObj = document.createElement("a");
//2.1 创建文件
var nodeObj = document.createTextNode("xxx");
// * 将文本添加到a元素
aObj.appendChild(nodeObj);
//2.2 给a元素设置属性
// setAttribute(name,value) 给指定的元素设置属性，name属性名，value属性值
aObj.setAttribute("href","http://www.itheima.com");
//3 将新创建的a元素，添加到div元素中
// * appendChild 追加子元素
divObj.appendChild(aObj);
</script>
获取内容体： 对象名.innerHTML
获取属性 ： 对象名.属性名
操作属性 ： 对象.内容体/属性名
获取元素:
var obj=document.getElementById("id值");
获取元素的value属性
var val=document.getElementById("id值").value;
设置元素的value属性
document.getElementById("id值").value="sdfsdf";
获取元素的标签体
var ht=document.getElementById("id值").innerHTML;
设置元素的标签体
document.getElementById("id值").innerHTML="ssss";
d1.innerHTML = “ hello 内容体 ” d1.src = “../../img/image/4.jpg”
注意：
1.属性操作时，class对应的是className，因为class是关键字，比较特殊
获取：对象.className
设置：对象.className = “新值”
2.获取CSS属性
获取：对象名.style.属性
设置：对象名.style.属性 = 值
window.onload = function(){
var d1 = document.getElementById(“d1”);
alert(d1.innerHTML); div的文本
alert(d1.className); div的类名
alert(d1.style.color) div的内嵌style
var i1 = document.getElementById(“i1”);
alert(1.src);
alert(1.titel);
}
<div id = “d1” class = “test” style=”color:red;” > hello dom </div>
<img src = “../../img/image/2.jpg” id = “i1” title = “谢霆锋”>
3).事件：
*页面上的动作
客户对页面操作产生：单击按钮、焦点获得、焦点失去、鼠标移入移出、下拉列表选项选定、键盘按键事件。。。
*浏览器的动作：页面加载。
*添加事件的两种格式：
方式1：标签中添加属性onxxx，xxx一般具有自我描述性
方式2：获得标签对象，window.onxxx = function(){}
事件：
onload：某个页面或图像被完全加载
onsubmit：提交按钮被点击，返回值为true时才提交 form标签中，属性onsubmit=“return 函数()”
onclick：鼠标点击某个对象 其余为 属性
ondblack：鼠标双击某个对象
onblur ：元素失去焦点
onfocus ：元素获得焦点
onchange：用户改变域的内容
onkeydown：某个键盘的键被按下
onkeypress：某个键盘的键被按下或按住
onkeyup ：某个键盘的键被松开
onmousedown：某个鼠标按键被按下
onmouseup：某个鼠标键按键被松开
onmouseover：鼠标被移到某元素上
onmouseout：鼠标从某元素移开
onmousemove：鼠标被移动
4)事件案例
1）获取按下的是哪个按键：
var t1 = document.getElementById("t1");
t1.onkeydown = function(event){
t2.value = event.keyCode;
}
2）单击按钮事件
给按钮添加属性 onclick=“函数()” 在js中写函数体 单击按钮执行函数体
<script>
function hehe(){
alert("单击了按钮")
}
</script>
<input type="button" value="单击我" onclick="hehe()"/>
3）控制表单提交
格式： form标签中，属性onsubmit=“return 函数()”
Js中编写函数实现，如果函数返回true ,就正常提交，否则不提交。
<script>
function test(){
alert("按钮被单击了") }
window.onload = function(){
var d2 = document.getElementById("d2");
b2.onclick = function(){
alert("按钮2被单击了") }
}
</script>
<body>
<input type="button" value="按钮" onclick="test()" />
<input type="button" value="按钮2" id="d2"/>
5）焦点事件：光标在页面中的位置，页面至多只有一个焦点
获得焦点事件：onfocus
失去焦点事件：onblur
1）给标签添加属性onblur/ onfocus = “函数名（）”，编写函数的js实现
2）页面加载完，获取按钮对象，再对象.onblur / onfocus = function（）{}
<script>
window .onload = function (){
var t1 = document.getElementById("t1");
t1.onfocus = function(){
alert("t1获得焦点")
}
}
function b(){
alert("t2失去焦点")
}
</script>
<body>
<input type="text" id="t1" />
<input type="text" id="t2" onblur="b()" />
</body>
9.this关键字
与Java中一样，代表当前对象，谁调用这个函数代表谁。
例：window.onload = function(){
var t1 = document.getElementById("t1");
t1.onfocus = function(){
//alert(t1.value); 可实现，但不推荐。可能因作用域导致错误
alert(this.value);
}
}
<input type="text" id="t1" value="hh" />
10. JS正则匹配
编写正则：以/^ 开头 以$/结束 中间存储正则表达式 + *
校验：
* 数据.match(正则)
* 正则.test(数据)
var regist =/^ +$/;
if(zhanghao.value.match(regist)){
alert("账号不能为空格");
return false; //此项必须有
}
if(regist.test(zhanghao.value)){
alert("账号不能为空格");
return false; //此项必须有
}
13. JS数组 索引可以是任意值
一维数组：
创建：
var arr = new Array()
var arr = new Array(length) 未赋、越界值为undefined
var arr = new Array(“a’,”b’)
var arr = [“a”,”b”]
使用：数组名[索引] = 值
属性：length 亦可为 size() 获得长度
注意：JS未初始化默认值undefined
Js 不存在越界
容量可变，像ArrayList
数组内元素类型任意
二维数组： 常用于联动中、
var outbox = new Array();
outbox[0] = new Array(“a”,”b”,”c”);
outbox[1] = new Array(“A”,”B”,”C”,”D”);
alert(outbox[1].length);
步骤分析：
1 确认事件 onchange
2 事件触发函数，要编写自己的函数
3 创建2维数组
4 在函数内获取选中的省份
5 拿选中的省份和数组对比
6 创建option元素，创建城市文本，将城市添加到option <option>海淀区<option>
7 获得第二个下拉列表，然后将option放进来
代码实现：
<script>
var citys=new Array(4);
citys[0]=new Array("昌平区","海淀区","朝阳区","东城区","西城区");
citys[1]=new Array("郑州市","洛阳市","开封市","安阳市","信阳市");
citys[2]=new Array("石家庄市","邯郸市","邢台市","保定市","张家口市");
citys[3]=new Array("济南市","青岛市","烟台市","潍坊市","德州市");
function city(obj){
//获取到选择的省份
//获取第二个下拉列表
var rightSel=document.getElementById("rightSel");
rightSel.options.length=0;
// alert(obj.value);
//对二维数组循环遍历
for(var i=0;i<citys.length;i++){
//和数组做值得对比
if(obj.value==i){
for(var j=0;j<citys[i].length;j++){
// alert(citys[i][j]);
//创建option标签元素
var option=document.createElement("option"); //<option></option>
//创建城市文本
var texts=document.createTextNode(citys[i][j]);
//将城市文本添加到option里面
option.appendChild(texts);
//将option追加到第二个下拉列表
rightSel.appendChild(option);
}
}
}
}
</script>
11.计时器
创建：window.setInterval(参数1，参数2)
参数1：函数
参数2：时间间隔（毫秒为单位）
方式1：函数名 ， setInterval(show , 100);
方式2：函数字符串， setInterval("show()" , 100);
效果：隔参数2毫秒后，执行一次参数1，循环执行
底层：实际是开了一个新线程，循环执行参数1。
销毁计时器：
1.创建计时器时，返回一个该计时器id，唯一标记
2.window也提供了销毁计时器的实现
3.根据id销毁
window.clearInterval(id值);
例<script>
window.onload = function(){ //当页面加载完之后执行函数
var count = 1;
window.setInterval(function(){ 设置定时器 或者setInterval(）
var lb = document.getElementById("lunbotu");
count++;
if(count==4){
count=1;
}
lb.src = "../../day01/img/img/"+count+".jpg";
},3000
)
}
</script>
12.一次性定时器
创建：window.setTimeout(参数1，参数2);
参数1：函数
参数2：时间间隔（毫秒为单位）
效果：隔参数2毫秒后，执行参数1，执行完计时器结束。
底层：实际开了一个新线程，（不可此函数下句就为清除语句）休眠后执行一次参数1。
销毁计时器：
1.创建计时器时，返回一个该计时器id，唯一标记
2.window也提供了销毁计时器的实现
3.根据id销毁
window.clearTimeout( id值);
例：<script>
/*
* 思路：
* 页面加载完之后，创建一个一次性定时器，函数A。
* 函数A实现获取广告div，设置style中的display属性为block。
* 在创建一个一次性定时器，函数B。函数B将div的display设置为none
*/
window.onload = function(){
window.setTimeout(
function(){
var gg = document.getElementById("gg");
gg.style.display = "block";
window.setTimeout(function(){
var gg= document.getElementById("gg");
gg.style.display = "none";
},3000);
},2000);
}
</script>
14.全局函数常见操作：
1.字符串——数字
*window.parseInt（） 解析整数
*window.parseFloat（） 解析小数
与Java不同，不必纯数字。123px:尾部特殊字符自动忽略，px 123首部为特殊字符解析不出，12px3中间特殊符号，只解析特殊符号之前的数值。能解析的解析后， 直接使用数值。
2.eval函数
*应用场景
编一个页面，页面要产生动态特效，暴露一个接口让别人写js代码，提交的js代 码是字符串，使用eval函数解析字符串，变成可执行的js代码。
*window.eval(“var num = 1”) ; 等价于直接使用var num = 1
alert(num);
3.全局函数之编码解码
转换后数字之间用“%”隔开起标记作用
*window.encodeURI（待转路径url） 客户端实现 中文到数字
*window.decodeURI（url） 服务器端实现 编码到中文
15.表格隔行变色案例
思路：获取所有的行的对象——遍历行，索引奇数设为红色，偶数背景为绿色——遍历过程中，每行添加鼠标移入事件
知识点：
1.如何获取到多个标签对象
2.怎么设置背景色
设置当前行的classname，关联上面的CSS代码，设背景色
3.鼠标事件
<style> 选择使用类选择器原因：类名可以相同，而id名一般不同。
.jishu{
background-color: aquamarine;
}
.oushu{
background-color: blanchedalmond;
}
.yiru{
background-color: yellow;
}
</style>
<script>
window.onload = function(){
var trs = document.getElementsByTagName("tr");
var color
for(var i =1;i<trs.length;i++){
if(i % 2==0){
trs[i].className = "oushu";
}else{
trs[i].className = "jishu";
}
trs[i].onmouseover = function(){
color = this.className;
this.className = "yiru"; //必须用this，function超出了i的作用域
}
trs[i].onmouseout = function(){
this.className = color;
}
}
}
</script>
16.复选框全选、全不选和反选
<script>
window.onload = function(){
var all = document.getElementById("all");
var none = document.getElementById("none");
var change = document.getElementById("change");
all.onclick = function(){
var cs = document.getElementsByClassName("itemSelect");
for(var i =0;i<cs.length;i++){
cs[i].checked = true;
}
}
none.onclick = function(){
var cs = document.getElementsByClassName("itemSelect");
for(var i =0;i<cs.length;i++){
cs[i].checked = false;
}
}
change.onclick = function(){
var cs = document.getElementsByClassName("itemSelect");
for(var i =0;i<cs.length;i++){
cs[i].checked = !cs[i].checked;
}
}
}
</script>
根据自身取反：cs[i].checked = !cs[i].checked;
17.多级联动
window.onload = function(){
var province = document.getElementById("province");
province.onchange = function(){
var value = this.value;
var cs = cities[value];
var s2 = document.getElementById("city");
s2.innerHTML = "<option>请选择城市</option>";
for(var i = 0;i<cs.length;i++){
s2.innerHTML +="<option>"+cs[i]+"</option>"
}
}
}
版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）