Web开发的学习是建立在掌握了Java基础上的，通过学习Web前端、jQuery+AJAX 、MySql数据库、Oracle数据库、Java Web技术，实现网页的制作和功能的开发。本部分总结的是Web前端的知识，主要包括HTML制作网页、CSS设计样式、JavaScript添加网页动态特效、表单验证等。
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 onload=”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”).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+ [email protected]
\w+ @ \w+(\.\w+) {1,2} [email protected]
7、String对象与正则表达式
search(reg) 检索与正则表达式相匹配的值,返回查找位置的索引，否则返回-1
match(reg) 查找到一个或多个正则表达式的匹配，返回数组或null
replace(reg,str) 替换与正则表达式匹配的子串
split(reg) 把字符串分割为字符串数组