HTML制作网页
一、HTML(超文本标记语言)
W3C标准（World Wide Web Consortium）
结构化标准语言（XHTML/XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
基本结构：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<html>
<head><title>标题</title></head>
<body>主体内容</body>
</html>
二、HTML标签
1、标签规范（XHTML标签规范）：
签名应小写
HTML标签应闭合
标签应正确嵌套
应添加文档类型声明<!DOCTYPE>
1、定义标签meta（用于定义文件信息）可设置字符编码格式，关键字，跳转网页 （看demo-1）
2、标题标签<h1>至<h6>
3、字体样式标签：<em> 斜体标签，<strong> 粗体标签
4、水平线标签<hr/> 换行标签<br/>（自闭合,没有结束标签）
5、段落标签<p> </p>
6、图像标签<img> 超链接标签<a>
7、其他： （空格标签） ©（版权符号@）
8、注释：<!–HTML注释–>
2、图像标签
<img src= alt= title= width= height= />
3、超链接标签
1、<a href=“url” target=“目标窗口位置”>链接文本图片</a>
href：表示链接路径
target：链接在哪个窗口打开，_self(当前页面打开)、_blank（新页面打开）
2、锚链接
从A页面的甲位置跳转到本页中的乙位置（同一页面）
从A页面的甲位置跳转到B页中的乙位置（两个页面）
创建步骤：
建跳转标记<a name=“marker”>乙位置</a>
创建跳转链接<a href=“#marker”>甲位置</a>
跳转到另一个页面在的#前面加上要跳转的页面路径
4、HTML列表
无序列表<ul>，用于导航、侧边栏新闻列表等
<ul>
<li>列表项内容1</li>
<li>列表项内容2</li>
<li>列表项内容3</li>
</ul>
注：默认<li>标签项前有实心小圆点，可更换为（type=“小方块，小圆圈”）
有序列表<ol>
<ol>
<li>列表项内容1</li>
<li>列表项内容2</li>
<li>列表项内容3</li>
</ol>
注：注：默认<li>标签项前有123，可更换为（type=“a，A，I”）
定义列表<dl> 无序，没有标记
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
注：没有顺序，没有默认标记
5、表单标签
1、<form>标签—表单提交
<form action=“表单提交地址” method=“提交方法”>
…适合文本框、按钮等表单元素…
</form>
注：
action属性：处理表单数据的目标地址
method属性：规定提交方式 可选值post/get
get方法提交参数在地址栏可见
post方法提交参数在地址栏不可见（密码）
2、<input>标签—文本框，按钮等。。
适用的表单元素有：文本框、复选框、文件选择框、按钮等
name属性：表单元素名称
type属性：类型、域
value属性：值
size属性：文本框显示宽度
maxlength属性：内容最大长度
checked属性：是否选中，仅与checkbox 和radio配合使用，选中为checked
3、下拉列表框 通过<select> <option>标签实现
4、多行文本框 通过<textare cols=”20” rows=”5”>标签实现
5、表单结构标签：<fieldset> 结构标题标签：<legend>
6、<label>标签 实现关联表单元素
<label for = “1”>名字:</label>
<input name =”name” id= “1” size= “20” >
或者<label>名字: <input name =”name” size= “20” ></label>
无需id关联
点击label标签 如：名字,鼠标聚焦文本框中
6、表格标签
1、表格基本语法：
<tr>表示 行 <td>表示 单元格
border 表示边框
bgcolor表示背景色 width 表示表格的框
cellpadding表示单元格中的内容和边框的距离
cellspacing表示单元格之间的距离
align表示水平对齐方式 valign 表示垂直对齐方式
表格高级标签
<caption> 标题
<thead> 页眉
表头标签<th>表示和<td>功能一样，以标题形式显示
<tbody>数据主体
<tfoot>页脚
3、表格的跨行与跨列
跨行<tr>标签的rowspan属性，值为数字，代表合并几行
跨列<td>标签的colspan属性，值为数字，代表合并几列
7、HTML框架结构（<iframe>标签）
1、作用：创建文档的内联框架，将独立页面放在框架中
2、属性：
src=（需引入的文档路径）
width/height（设定框架的宽与高）
scrolling（是否显示滚动条，auto|yes|no）
frameborder（是否要边框，1显示，0不显示）
name（内联框架的名称）
<iframe src=”” height=”” width=”“frameborder=”“name=”” scrolling/>
3、<div>标签和<span>标签
没有任何的默认样式渲染；相当于一个干净的容器
结构化HTML元素；DIV+CSS网页布局；提高网页加载速度
4、块标签和内联标签
块标签（常用）：
独占一行;可以定义宽度和高度
常用块标签：<div>、<p>、<ul>、<li>
内联标签：
一行排列显示;不能定义宽度和高度
常用内联标签：<span>、<a>、<label>、<img>
注：块元素和内联元素是可以转换的（在CSS里修改）
内联元素—>块元素display：block
块元素–>内联元素display：inline
CSS设计样式
一、CSS简介
Cascading style Sheet 级联样式表，表现HTML或XHTML文件样式的计算机语言（对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定）
作用：能控制页面的样式和布局；网页文件和样式文件相分离，提高开发效率
二、CSS语法
1、<style>标签
写在<head>标签之后，加上type=“text/css”属性
2、样式选择器
例如： h1｛
Color:red;
font-size:12px;
｝
3、常用选择器
（1）标签选择器：
把HTML标签作为标签选择器的名称；如<p>
（2）类选择器：<标签名 class=“类名称”>标签内容</标签名>
.类名称｛//可以单独设置一些文字的样式
属性:值;
｝
（3）ID选择器：<标签名 id=“ID名”>标签内容</标签名>
#ID名｛//ID名是唯一的，其他和类选择器一样
属性:值;
｝
4、复合选择器
（1）并集选择器（用 , 隔开）
多个选择器之间可以是多个不同或相同类型；
多个选择器之间必须用英文半角输入法逗号“,”隔开；
*{ 属性:值;
} 或者
p,#id,.class{ 属性:值;
}
（2）交集选择器（无空格逗号）—不常用
格式为：标签+类选择器 或 标签+ID选择器
选择器之间不能有空格；第一项必须是标签
h3.second{//满足h3标签和second类标签才应用
属性：值；
}
（3）后代选择器（用空格隔开）
选择器之间可以是多个不同或相同类型并有层级关系的
p a｛//满足p和a标签，只是a标签中的元素进行改变
属性：值；
｝
三、CSS的使用
（1）行内样式表：直接在HTML标签设置的样式
使用style属性引入CSS样式
<h1 style=”color:red;”>style属性的应用</h1>
<p style=”属性名：属性值；”>在p标签内应用</p>
（2）内部样式表（写在单独网页内）
<style type=“text/css”>
选择器｛
属性名：属性值：
｝
</style>
（3） 外部样式表（引用外部CSS样式文件）
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有链接式和导入式
语法：
链接式：常用（属于XHTML,优先加载CSS文件到页面）
<link type=“text/css” rel=“styleSheet”href=“css文件路径”/>
导入式：（属于css2.1，先加载HTML结构再加载CSS文件）
<style type=“text/css”>
@import url（“css文件路径”）
<style/>
样式优先级：
选择器：ID选择器>类选择器>标签选择器
样式表之间：行内式>内嵌式>外部式
四、CSS属性
1、文本与字体属性
例如：字体是 italic斜体 bold粗体 16PX像素的楷体
注：当line-height 和 height 的值一样时，文本垂直居中。
text-align:center;指文本水平居中。
容器居中方法：margin:0px auto;
文本首行缩进：text-indent:2em;
2、背景属性
background-color、background-image、background-position、background-repeat
3、列表属性
常用：list-style:none;
4、超链接伪类（先love后hate记忆）
a：link｛color:red｝ /* 未访问的链接*/
a：visited｛color:blue｝ /* 访问过后的链接*/
a：hover｛color:green｝ /* 当鼠标悬停在链接上*/
a：active｛color:yellow｝ /* 当鼠标按下链接后*/
注： a：hover必须被置于a：link 和a：visited之后
a：active 必须被置于a：hover之后
5、鼠标形状控制
cursor:move; cursor:pointer;
6、盒子模型（上右下左顺时针方向）
（1）边框border （top/right/bottom/left/ Opx是全清除）
（2）内边距padding（top/right/bottom/left/ Opx auto）
（3）外边距margin （top/right/bottom/left/ Opx auto）
margin：1px 2px 3px 4px
border:1px solid red (修饰属性width、style、color )
border-width:1px 2px 3px 4px
padding:5px 10px 15px 20px
7、浮动属性（float:值 ）
（1）取值：left左浮动；right右浮动；none 不浮动
（2）作用：
块元素同行排列显示，一般用于排版、分栏显示
都设置浮动属性后会脱离文档流：向指定的左或右边对齐
（3）注意：使用浮动后要及时清除，以免影响其后的网页元素
8、清除浮动（clear属性和overflow属性）
（1）clear属性取值：left；right；none；both
Overflow：定义了溢出元素内容区的元素的处理方式
属性取值：visible（默认）；auto；hidden；scroll(滚动条显示)
（2）必要性：
浮动后，脱离了文档流布占网页空间
浮动后的网页元素会影响同级元素
（3）表明容器框的哪边不挨着浮动框
清浮动：
产生条件：父元素未设置浮动，子元素设置浮动
显示效果：父元素高度得不到扩展，缩成一条，子元素从内容溢出
clear：both;（加一个空的<div>,clear:both）
overflow:hidden;（为父元素设置width，overflow:hidden;）
9、定位（position属性）
（1）relative（相对定位）
相对它原来的位置，通过指定偏移，到达新的位置
仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响
（2）absolute（绝对定位）
相对已设定的非static定位属性的父元素算偏移量。
设置绝对定位的元素与文档无关，会覆盖页面其他元素。
如果对象的父级没有设置定位属性，absolute元素将以body坐标偏移。
（3）fixed（相对浏览器固定定位）
（4）static（默认）
偏移量设置:
X轴（left、right属性）与Y轴（top、bottom属性）
可取值：像素或者百分比
<div style=”width:100px;height:100px;background:#F00;
position:relative”><span=”width:50px;height:50px;left:0px;bottom:opx;b
ackground:#0F0;position:absolute”></span></div>
子元素absolute 父元素一般relative
五、使用DIV+CSS布局页面
1、表格布局
优点：简单易懂、位置很规矩；
缺点：加载速度慢，结构固定不灵活，不利于维护和SEO
2、框架布局
在同一页面进行多页面加载，如<iframe>标签
3、DIV+CSS方式布局
HTML结构：<div>标签
CSS样式：float浮动和盒子模型
优点：1、<div>标签“干净”，网页更小，打开更快
2、结构清晰，便于维护，利于SEO
3、<div>标签更灵活，更好控制页面元素
4、样式与结构相分离 ，更好的结构重组
5、表现与内容相分离，利于分工协作
基本流程：总体把握→分块实现→完善细节→性能优化
JavaScript基础
一、JavaScript简介
1、JavaScript是一种描述语言，基于对象和事件驱动的脚本语言
特点：
脚本语言（一种轻量级的编程语言）
一种解释性语言（无需预编译）
被设计为向HTML页面添加交互行为
运行于客户端
ECMAScript是JavaScript的标准和基础，JavaScript和JAVA无任何关系！
2、JavaScript是由ECMAScript（标准、核心）、DOM（文档对象模型）、BOM（浏览器对象模型） 三部分组成
（1）ECMAScript
ECMAScript标准定义了脚本语言的属性、方法和对象。包括语法、类型、关键字、保留字、运算符、对象等
除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础
（2）DOM（文档对象模型）
HTML和XML的应用程序接口（API）
把整个页面规划为层级式的节点结构
（3）BOM（浏览器对象模型）
可对浏览器窗口进行访问和操作
3、JavaScript基本结构
<script type = “text/javascript”>
<!–
//JavaScript代码
//–>
</script>
（1）<!– –>部分是非必须的，为了规避老版本浏览器不能识别
（2）//是JavaScript的注释符号（/* */也是注释符号）
（3）type属性不推荐写成language=“javascript”
4、引用JavaScript三种方式
⑴直接在HTML标签中<body οnlοad=”alert(‘你好’);”>
⑵使用<script>标签
⑶通过src属性引入外部JS文件
示例：alert弹出框的三种方式
<script type=”text/javascript” src=”路径”></script>
二、常用的输入/输出/确认
alert（） //弹出只有一个确认按钮的提示框
例：alert（“提示信息”）；
prompt（）//弹出一个可以输入的提示框，有确认和取消按钮
例：prompt（“提示信息”，“输入框的默认信息”）；
confirm（“确认信息？”）；
//确定则返回true，取消则返回false
三、JavaScript的基础语法
1、JS的注释方法与 Java 一致（单行、多行和文档注释）
2、JavaScript变量（与java不一样）
（1）变量名对大小写敏感（Y和y是两个不同的变量）
（2）变量必须以字母或下划线或美元符＄开始，不能使用关键字作为变量名
（3）通过var语句来声明，无需指定数据类型（多个变量用逗号隔开）
（4）先定义后使用，一般”+”运算符用于把文本值或字符串变量连接起来，如果两个是数字则为数学运算加号。”=”可以给相同变量重复赋值，可以赋不同类型的值
3、JS的数据类型
Undefined：只有一个值undefined，未定义或定义未赋值
var v=undefined; typeof var1(未定义) var v;
Null：尚未存在的对象，与undefined值相等
Number： var num=23；//整数 var num =23.0; // 浮点数
Boolean： true 和flase
String：一组被引导的文本（单引号或双引号括起来）
4、typeof运算符 var1=2; alert(typeof var1);
typeof检测变量的返回值。
如果为字符串类型，返回值如下;
undefined；string；boolean；number；
object（对象或数组或Null类型） function（函数方法）
5、数据类型转换
（1）转换方法
parseInt（）：字符串转换为整数
parseFloat（）：字符串转换为浮点数
toString（）：返回字符串
（2）强制类型转换
Boolean（）：转换为逻辑值
结果为false的情况有：”“；0；undefined；null；NaN；false
Number（）：对象转换为数字
String（）：对象转换为字符串
注：在转换函数时，parseInt或parseFloat如果是由字符串转换为数值类型，字符串从前往后，第一位是数字，只转有数字的部分，返回值为对应的数值类型。若数字不是第一位，返回值为NaN（not a number）。而Number（）无论数字在前在后，都返回NaN
6、运算符（和java基本一样）
7、流程控制（和java语法一样）
if条件语句；条件运算符；switch多分分支语句；循环控制语句（循环中断break\continue\return）
注：for in 循环语句（类似于增强型for）
for（变量a in 对象obj）｛ //获得obj[a]; ｝
四、JavaScript函数和事件
1、定义：
一组可以随时随地运行的语句。有系统函数和自定义函数
（1）常用系统函数举例(相当于java中的方法)
parseInt（） 解析一个字符串并返回一个整数
parseFloat（） 解析一个字符串并返回一个浮点数
isNaN（） 检查某个值是否是数字，返回true|false
eval（） 计算JavaScript字符串，并把它作为脚本代码来执行
（2）自定义函数
function 函数名（参数列表）｛//函数代码块｝
var 函数名 = function（参数列表）｛//函数代码块｝
传入的参数是可选的，多个参数用 , 隔开，也可以无参
调用： 函数名（参数）; 在定义的函数后面调用
（3）匿名函数
（function()｛//用函数体( )替换fn ；
alert(12345);})();
等同于
var fn=function（）｛alert（12345）；｝
fn( )；
把fn用函数体代替掉，直接运行，我们称之为匿名函数。一般用于框架的封装
2、变量的作用域
（1）全局变量：任何地方都可以被调用，公共的（public）
（2）局部变量：只能在函数内部调用，私有的（private）
应尽量避免使用全局变量，以免团队开发变量冲突
3、函数的返回值
通过return关键字返回函数的值
4、事件：JavaScript侦测到的行为
事件通常与函数配合使用，当事件发生时去调用函数
鼠标事件、键盘事件、焦点事件、其他常用事件
鼠 标 事 件
onclick 单击鼠标左键元素触发
ondblclick 双击鼠标左键击元素触发
onmousedown 按鼠标按钮触发
onmouseup 释放鼠标按钮触发
onmousemove 鼠标指针在对象上移动触发
onmouseover 鼠标指针移动到对象上触发
onmouseout 鼠标指针移出对象触发
焦 点 事 件
onfocus 获得焦点触发
onblur 失去焦点触发
onchange 值改变且失去焦点触发
其 他 常 用 事 件
onload 某个页面或图像被完成加载时触发
onunload 用户退出页面时触发
onabort 图像加载被中断时触发
onerror 当加载文档或图像时发生某个错误时触发
onreset 重置按钮被点击时触发，事件写在form表单上
onresize 窗口或框架被调整尺寸时触发
onselect 文本被选定时触发
onsubmit 提交按钮被点击时触发，事件写在form表单上
键 盘 事 件
onkeydown 按下键盘触发
onkeypress 按压键盘触发
onkeyup 松开键盘触发
5、程序调试
语法错误和逻辑错误
解决办法：
①try…catch 语句
try｛
//在此运行代码
｝catch（err）｛
//在此处理错误
//err.message message包含错误信息
｝
②注释调试法
③输出调试法④
alert（）调试法
document.write（）调试法
console对象调试法（IE不支持） console.log（）
④调试工具: Firebug、浏览器自带开发窗口
五、BOM对象操作对象窗体
BOM(浏览器对象模型)使得JavaScript能与浏览器进行“对话”。
主要有Window对象、History对象；Location对象；Document对象
Window对象常用属性
Window对象：表示浏览器中打开的窗口.Window对象是全局对象，可直接调用其方法和属性；Window对象的一些方法和属性可省略不写
window.document等同于 document
window.alert()等同于 alert（）
属性有：
location 用于窗口或框架的 Location 对象
history 用户在浏览器窗口中访问过的 URL
screen 对 Screen 对象的只读引用
status 设置窗口状态栏的文本
document 对 Document 对象的只读引用
history属性就是History对象的引用
方法：
back（）：加载上一个浏览的文档
forward（）：加载下一个浏览的文档
go（n）：n为整数。跳转第n个浏览过的文档
n==0则刷新当前页面
n>0则向前跳转到第n个文档
n<0则向后跳转到第n个文档
location属性就是Location对象的引用
属性：
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的url，可用于设置跳转
hash 设置或返回从井号#开始的URL（锚）
search 设置或返回从问号?开始的URL（查询部分）
方法：
reload（） 重新加载当前的文档，刷新页面
replace（） 新的文档替换当前文档
assign() 加载新的文档,可以返回
document属性
每个载入浏览器的HTML文档都会成为Document对象。利用它可对HTML页面中的所有元素进行访问
常用属性：title 返回或设置当前文档的标题
常用方法：
write（） 向文档写HTML表达式或JavaScript代码
getElementById（）返回对拥有指定id的第一个对象的引用
getElementsByTagName（）返回带有指定标签名称的对象集合
getElementsByName（）返回带有指定名称的对象集合
Window对象方法
1、常用方法
prompt（）显示可提示用户输入的对话框
alert（） 显示带有一个提示信息和一个确定按钮的警示框
confirm（）显示一个带有提示信息、确定和取消按钮的对话框
open（） 打开一个新的浏览器窗口，加载给定的网页
close（） 关闭浏览器窗口
setTimeout()在指定的ms数后来调用函数或计算表达式。循环执行多次
setInterval()按照指定的周期（ms计）来调用函数或表达式。只执行一次
clearInterval( timer ) 方法可取消由 setInterval() 设置的 timeout
clearTimeout( timer ) 方法 可取消由 setTimeout() 方法设置的 timeout
2、具体介绍：
open()方法：window.open(“url”, “窗口名称”, “窗口属性”)
窗口属性：
六、DOM(文档对象模型)
1、DOM简介：
提供了添加、移动、改变或移除结构文档的方法和属性
2、分类：
Core DOM 一套标准的针对任何结构化文档的对象
XML DOM 一套标准的针对XML文档的对象
HTML DOM 一套标准的针对HTML文档的对象
Core DOM的节点
HTML文档中的每一个成分都是一个节点（Node）
（1）规定：
整个文档是一个文档节点；
每个HTML标签是一个元素节点；
包含在HTML元素中的文本是文本节点；
每一个HTML属性是一个属性节点；
注释属于注释节点；
（2）节点间的关系
节点彼此都有等级关系（父节点、子节点、兄弟节点（同级节点））
（3）使用getElement方法访问指定节点
getElementById（）返回对拥有指定id的第一个对象的引用
getElementsByTagName（）返回指定标签的对象的集合
getElementsByName（）返回带有指定名称的对象的集合
注：不是所有标签都有name属性
innerHTML 属性设置或返回节点的开始和结束标签之间的 HTML。
(4)使用Node接口定义的方法访问节点
注:低版本IE下会忽略节点之间生成的空白文本节点（比如换行字符），而谷歌和火狐不会忽略，因此需要兼容方式来获取
访问节点兼容处理
兼容写法 firefox||IE
获取第一个节点
oFirst=oParent.firstElementChild ||oParent.firstChild
IE浏览器会忽略节点之间生成的空白文本节点。所以不需要中间加Element
节点信息
每个节点都拥有包含节点某些信息的属性
nodeName（节点名称）
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
nodeValue（节点值）
对于文本节点，nodeValue属性包含文本
对于属性节点，nodeValue属性包含属性值
nodeType（节点类型）
元素1，属性2，文本3，注释8，文档9
创建和新增节点
createDocumentFragment()//创建文档碎片节点
createElement(tagname)//创建标签名tagname的元素
createTextNode(text)//创建包含文本text的文本节点
appendChild()//添加子元素
（7）删除和替换节点
RemoveChild(node)
replaceChild(newDode,oldNode)
4、HTML DOM ：
专门针对HTML文档的。HTML文档中的每个节点都是一个对象
HTML DOM包括：
Table 对象 Document 对象 Form 对象Image 对象
1、Table（TableRow TableCell）对象属性
属性 rows[] 获得所有行
通过cells[]得到所有的单元格
方法：insertRow()插入新行 deleteRow()删除一行
2、Style（currentStyle）对象position属性：
top\left\right\bottom\zIndex
七、网页特效–内置对象
1、内置对象
String用于在单独的变量名中存储一系列的值
Date用于操作日期和时间
Math用于执行常用的数学任务
Array用于支持对字符串的处理
2、String对象方法
3、Date对象
var myDate=new Date();
//获得小时、分钟、秒数
var today = new Date(); //获得当前时间
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
4、Math对象
var pi_value=Math.PI;
方法：
Math.ceil( Math.random()*100 ) ;返回的正数范围1-100
5、Array对象
①JavaScript 中的所有事物都是对象：数字、字符串、布尔、数组、日期，等等。
数组对象的作用是：使用单独的变量名来存储一系列的值。
②Array 对象用于在单个的变量中存储多个值
创建 Array对象的语法
var mycars=new Array(); // 创建空数组对象
var mycars=new Array(“Saab”,”Volvo”,”BMW”);
var mycars=[“Saab”,”Volvo”,”BMW”];
③属性和方法：
属性：length 设置或返回数组中元素的数目
concat() 连接两个或更多的数组，并返回结果。
toString() 把数组转换为字符串，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
reverse() 颠倒数组中元素的顺序。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
shift() 删除并返回数组的第一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除并返回数组的最后一个元素
splice() 删除元素，并向数组添加新元素。
//冒泡排序 js写法
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]<arr[j]) {
//大于是升序；小于是降序；进入判断进行一次顺序调换
var tem=arr[i];//保存起来
arr[i]=arr[j];
arr[j]=tem;
}
}
}
八、网页特效–JS访问样式
步骤1：使用getElement系列方法获取元素
步骤2：通过style、className属性改变样式
1、DOM元素.style.样式属性= “值”;
2、DOM元素.style.display= ” none “不可见 | ” block “可见;
("#id")[0].style.display = 'none'; 相当于(“#id”).css(‘display’,’none’);
3、DOM元素.className = “类名称”;
注意区别：例如：背景色
CSS：background-color：red;
JS:DOM.style.backgroundColor = ” red “;
九、表单验证
1、表单验证
在数据被送往服务器前 对HTML表单中的这些输入数据进行验证
作用：减轻服务器的压力
保证数据的可行性和安全性
2、基本步骤
1、提交触发表单的onsubmit事件
2、在onsubmit事件中进行验证 checkInput (js代码)
利用DOM方法获取需验证的表单元素的value值
根据String对象的方法验证简单的数据
利用正则表达式方法验证复杂的数据
3、表单元素通过验证后，才能提交表单。否则重复验证
3、表单验证JS代码基本结构
4、String对象属性和方法
5、文本框对象
6、正则表达式
一个描述字符模式的对象，由一些特殊的符号组成，其组成的字符模式用来匹配各种表达式
RegExp对象（regular expression）表示正则表达式，它是对字符串执行模式匹配的强大工具
如在字符串中对”is” 进行全局搜索：
var str=”Is this all there is?”;
var patt1=/is/g;或者var patt1= new RegExp(“is”,”g”)
var reg=/表达式/附加参数
i执行对大小写不敏感的匹配 m多行匹配 g全局匹配
7、RegExp对象
方括号
常用符号
重复字符串
匹配邮箱的表达式：/^ $/
\w+ @ \w+\.\w+ 123@irunker.com
\w+ @ \w+(\.\w+) {1,2} 123@sina.com.cn
7、String对象与正则表达式
search(reg) 检索与正则表达式相匹配的值,返回查找位置的索引，否则返回-1
match(reg) 查找到一个或多个正则表达式的匹配，返回数组或null
replace(reg,str) 替换与正则表达式匹配的子串
split(reg) 把字符串分割为字符串数组
