《Web前端设计与开发-HTML+CSS+JavaScript+HTML5+jQuery》读书笔记

2021-01-17 07:35 635人阅读评论(0)

目录见文末

嗯，前端的笔记就做到这里啦，还差的很远，路漫漫其修远兮，要抽时间实验，以后做什么在想吧，她呀！还是先找一份工作重要吧。我想，我并不赞同《瓦尔登湖》中讲的那样，倘若只有自己，谁不愿意过那样的生活呢。打工去买车票是一个正常人，而行走去旅行那么异类的事，爸爸妈妈怎么办哎？好困哎，我要休息啦！！！

2018.10.14

一，HTML概述

1.HTML

HTML是一种描述性标记语言，描述网页内容的显示方式，以HTML语言为主编写的HTML文件是一种纯文本文件，以.html，.htm为后缀。基本组成为元素。

2.HTML常识

HyperText Markup Language。李爵士创立了HTML，离开公司后创办了一个组织——W3C委员会。 W3C根据浏览器的实际情况总结制定HTML规范文档。

HTML有很多版本，从HTML4.01到XHTML再到HTML5，版本类型由HTML文件头部的DOCTYPE声明，比如HTML5的声明为<!DOCTYPE html>。

这里注意我们现在常说的H5并不是指html5，H5是能运行在微信上的网页的统称，和实现技术无关。XHTML、HTML4.01、HTML5都可以。

在HTML5中，声明的DOCTYPE一定要大写，html可以小写。

3.语法

<标签>内容<标签>：标签通常都是成对出现，内容为一些文本文字或子标签；HTML元素指的是从开始标签到结束标签的所有代码。

4.HTML文档构成

文档类型申明（<!DOCTYPE版本类型>告诉浏览器用什么方式解析XTHML中HTML要小写）
- <html>元素：HTML以<html>标签开始，以</html>结束，文档的所有内容都要方到两个标签内。包含<title>,<meat><base>,<like>,<script>,<style>等。提供整个页面的基本信息。
网头部分（<head>标题，关键字，描述，编码方式等浏览器需要的基本信息</head>）
- <head>元素：页面头部信息（包含页面标题，元信息，CSS样式，JavaScript脚本等元素，），用于向浏览器提供整个页面的基本信息，不包含主体信息。一般不在浏览器中显示，标题元素<title>除外。
网页部分（<body>页面具体内容，文字，表格，图片，视频等</body>）HTML由<html><head><body>这三大元素构成。
- <body>元素：网页的正文，包括图片，表格，段落，音乐，视频，不是所有的<body>标签都是可见。

5.编写HTML注意事项：

大部分的标签都是由起始标签和结束标签构成，空标签是一种特殊的标签，不包含文本也不包含其他子标签，以“<”开始，以“/>”结束。标签可以嵌套使用。
HTML不区分大小写，XHTML区分大小哦，
HTML和XHTML中，标签可以具有一个或多个属性，属性与属性值成对出现，属性值可以使用双引号或单引号引。属性值区分大小写。
HTML中的空格，字符之间的一个或多个连续空格（制表符，换行，回车），只能显示一个（可以使用实体引用（&nbsp；）或者中文空格）。
HTML中的注释，。

6.HEAD元素

title元素：页面标题位于<title>标签内，标题可以用作默认快捷方式或收藏夹的名称，作为搜索引擎结果中的页面标题。页面设计要添加标题。
meta元素：用于向客户浏览器传递信息和命令，不是显示内容，一个<head>中可以包含一个或者多个<meta>标签。
- <meta>标签一般格式：<meta 属性名=“属性值”content= “name的描述或http-equiv的属性“/>.在 HTML 中，<meta> 标签没有结束标签。在 XHTML 中，<meta> 标签必须被正确地关闭。

meta标签主要分为两大类：页面进行设计+搜索引擎设置，常用属性特征描述表：

属性名	属性值	描述
name	keywords	定义页面关键词，使用content属性提供web的关键字，关键词之间用逗号隔开
	description	定义页面描述内容，使用content属性提供网页的描述内容，但不要过长，否者搜索引擎会以……省略
	robots	用来告诉搜索引擎页面是否允许索引与查询，content的参数有all，none，index，noindex，follow，nofollow，默认all
	author	标注网页作者
http-equiv	content-type	设定页面使用的字符集，例如<meta http-equiv="content-type"content="text/html";char="utf-8"/>
	refresh	自动刷新并转到新页面。使用content属性提供刷新或跳转的时间以及跳转的目标地址，
	set-cookie	设置页面缓存过期时间。如果网页过期，那么存盘的cookie将被删除。
	expires	用于设定网页的到期时间。一但web过期，必须从服务器上从新加载页面内容
content	text	内容文本。用于描述name或http-equiv的属性的相关内容

content参数意义：

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询，它和 "noindex, no follow" 起相同作用；

index：文件将被检索；（让robot/spider登录） f

ollow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)

nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)。

7，文本元素

a。标题标签：HTML提供了6级标题，<h1><h2><h3><h4><h5><h6>从大到小。一般显示<h1><h2><h3>,<h4>与默认文本一样大。<h5><h6>一般通过CSS定义。
b。文本修饰标签：
- <font>字体样式（大小，颜色，字体等）<font face ="隶书" size ="12" color+"blue">定义字体，大小，颜色；
- <b>加粗，
- <i>斜体，
- <s>删除线，
- <u>下划线，
- <sup>上标
- <sub>下标，
- <strong>加粗（重要文本），
- <big>文本变大（没有），
- <small>文本变小（小字体印刷体）括号内为HTML5的。
c。由于文本修饰符设置字体样式时，文本内容与样式嵌入到一起，后期代码维护不方便，在网页设计时，少用文本修饰，多采用CSS样式进行美化。
d。特殊字符（实体字符）一般&开头；结尾

常见实体引用：

双引号（”）	"	&号	&	空格
小于号(<)	<	大于号（>）	>	小于等于(<=)	≤
大于等于(>=)	≥	版权号©	©	商标符号(TM)	™
注册商标(圈R)	®	分数（1/4）	¼	分数(1/2)	½
左箭头（<---）	←	上箭头	↑	右箭头	→
下箭头	↓	左右箭头	&Harry;	左下箭头	&crarr;
左双箭头	⇐	上双箭头	&uArr;	右双箭头	⇒
下双箭头	&dArr;	∩（交集）	∩	∪（并集）	∪

8，文档元素结构

段落标签：<p>是HTML中特定的段落标签，可以对网页内容提供块级格式，浏览器解析<p>时，在下一段落前插入空白行
换行标签：<br />后面的内容从下一行开始显示。空标签，br与/之间有空格。
水平线标签：<hr />产生一条水平线，可以通过（size（高度），color（颜色），width（宽度），noshade（阴影），align（对齐方式）进行设定）

9，列表元素

在HTML页面中列表类型有：有序列表，无序列表，定义列表。

有序列表：前缀有数字或字母，
- 格式<ol type=“属性(A,a,1,i,Ⅰ)”start =“属性（数字）”><li>列表项</li></ol>。
无序列表：前缀有图形符号，
- 格式<ul type="属性(circle(圆),disc(点),square(方),none(没有))"><li>列表项<li></ul>。
定义列表：项目与描述成对显示
- <dl><dt>标题</dt><dd>描述<dd></dl>。<dl>标签中可以存放多个<dt><dd>标签，<dd>标签内容会后缩进一定空间。

10，div与span标签

<div>标签：表达一个逻辑区块（将某一特定区域用边框围起来，指定样式），属于块级元素。如果用<div>标签而不使用CSS样式，页面效果与<p>相同。且独占一行，通过<div>可实现页面布局。
- 语法：

<div style="块元素的样式(设置div元素的行内模式)" class = “类选择器名称(引用CSS的类选择器)”align = “对齐方式(取值为left，right，center或justify，多用CSS代替)”>内容部分</div>

<span>标签：实现行内块定义，<span>标签属于行内元素，用来选择特定文本，赋予特殊样式，当句子需要分组时，可以使用<span>标签。
- 语法：

<span style="块元素的样式(设置div元素的行内模式)"class = “类选择器名称(引用CSS的类选择器)”align =“对齐方式(取值为left，right，center或justify，多用CSS代替)”>内容部分</span>

11，URL（统一资源定位符Unifrom Resource Locator）

URL：用于Web资源所在的位置，又称网址或网页地址。(协议(http:)+主机地址(//www.itshixun.com)+文件路径(/web/index./html))共同过构成完整的URl。
协议：网页通常采用超文本传输协议HTTP，对应的网址基本使用http://前缀，电子商务的安全性要求较高的，多采用https协议(https://)文件上传下载时，多采用ftp://前缀。
主机地址（Host Address）：网站的域名，主机地址也可以采用IP地址（数字形式）；
文件路径：通常与网站的目录结构想对应，以/开头，以文件夹/文件名结束，
文件路径分为：绝对路径(完整的路径，在Internet中称URL)和相对路径。
相对路径：当页面链接到同一网站的其他资源时，采用相对路径会更加简洁，也便于后期维护，当浏览器访问Web资源时，需要完整的URL才能获得资源内容，当页面提供的是相对地址时，需要将相对URL转换为绝对的URL后在获取资源。相对路径仅适用链接相同网站的内容，不能用于链接其他域下的资源，且根目录方式在本地无法访问无法实现，只有站点上传到web服务器才能。
- 2.1相同目录：当访问资源与网页位于同一个目录下，可以直接访问：文件名，
- 2.2子目录：当访问子目录的资源时，相对路径：子目录名/文件名，每加一级需添加“目录名”+/,
- 2.3父目录：当访问引用父目录的资源时，可以使用“../文件名”表示上一级，用../../文件名表示上上一级，
- 2.4根目录：根目录一“/”开头，（/）表示根目录，可以用:/父目录/子目录/目录/文件名，

12，图像标签

a.使用<img />空标签向HTML文档中添加一副图像，<img src="url" alt =""…/>。

<img />标签常用的属性表

属性名	描述
src	图像的地址，可以是绝对URL，也可以是相对的URL
alt	图像的文本描述，当无法显示图片时，文本作为图像的替代；描述文本可以更好的让搜索引擎对页面搜索
height	指定图像高度，固定值or百分比
width	指定图像宽度，固定值or百分比
align	图像的对齐方式如top顶部，bottom底部，middle中间，lefi左边，right右边
border	指定图像的边框

13，超链接标签

超链接(HyperlinK)：将互联网上的的中资源相互连接，万维网。

语法：


  
   
    
     
    
    
     
      <a href (目标链接地址)="url" title（链接标题）=“”name(锚点名称) =“”target=" "(以何种方式打开链接目标) >链接内容
      </a>；
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      例：
      <a href="http://www.baidu.com">百度
      </ a>
      <br />;

常见的超链接有：文本链接，锚点链接，图形链接，图形热区链接，Email链接，JavaScript链接，空链接。

a。文本链接与锚点链接。

文本链接：点击文本进入链接，链接内容为文本内容（即<a></a>标签的内容），链接内容也可以是（站内/站外）链接，站外必须使用完整的绝对路径（即包含“http://”部分），站内随便。
锚点链接相当于书签（索引），用户访问锚点可以快速定位到所期望的小节。分为同一页面和跨页面锚点链接，使用<a>标签创建锚点标记。<a>标签必须附带name或id属性，之后尽量用id。创建超链接链接到锚点，标签的href是由“#”+“目标锚点名称”两部分构成。

目标锚点：<a id = "锚点名称">锚点位置</a>;例：<a id ="锚点名称">链接到当前锚点位置</a>
链接到锚点：<a herf ="#锚点名称">链接到当前锚点位置</ a>例：<a herf ="#锚点名称">链接到锚点位置</a>
在跨页面的锚点链接中，herf属性由“目标页面的绝对路径”+#+目标锚点名称三部分构成。例：<a herf ="绝对路径"#锚点名称>链接到目标页面的锚点位置</a>
属性href的值可以根据当前页面与目标页面的位置关系而定，路径可以是绝对路径也可以是相对路径。

b。图片链接与图片热区链接：

图片链接：为图片添加一个超链接，点击图片会进入相应的链接，语法：<a href ="目标链接地址"><图像标签></a>；
图片热区链接：是指在同一个图片中不同的部分链接到不同的目标位置，通过在图片中设置“热区”，为图片的特定部分创建超链接区域，然后在设置链接的目标位置。步骤如下：

通过<map>标签定义一个客户端图像映射（image-map），可以包含一个或多个图像的映射区域<area>,每个<area>区域拥有一个独立的链接。
将<img />标签usemap属性与<map>标签的name属性相关联。
语法：


  
   
    
     
    
    
     
      <map name ="图像映射名">
     
    
   
    
     
    
    
     
      <area shape="circle(属性)" coords(参数)="x,y,r" href ="目标链接地址"/>
     
    
   
    
     
    
    
     
      <area shape=“rect(属性)”coords(参数)=“x1,y1,x2,y2”href=“目标链接地址”/>
     
    
   
    
     
    
    
     
      <area shape=“poly(属性)”coords(参数)=“x1,y2,x2,y2,x3,y3,x4,y4……”hret=“目标链接地址”/>
     
    
   
    
     
    
    
     
      </map>
     
    
   
    
     
    
    
     
      <img src="images/图片名"usemap=“#图像映射名”broder=“0”/>

area属性表列
形状	Shape属性	Coords参数	描述
圆形	circle	x,y,r	点(x,y)是圆心坐标，r是圆的半径
矩形	rect	x1,y1,x2,y2	点Z(x1,y1)矩形左上角坐标，点(x2,y2)矩形的右下角坐标
多边形	poly	x1,y1,x2,y2,x3,y3,……	点(x1,y1)(x2,y2)(x3,y3)(x4,y4)……是多边形的各个点的坐标

c。其他超链接：

1，空链接：未指派的链接，附加行时使用。
- 语法;<a href=“#”>空链接</a>
2，Email链接：在页面中创建Email标签，
- 语法：<a href ="mailto:+邮箱地址">练字</a>
3，JavaScript链接：
- 语法：<a href="Javascript：alert('弹出页面显示内容')">文本内容</a>

d。超链接的target属性：

1，默认情况下下，链接会在当前活动窗口打开目标链接文档，目标文档会替换当前显示的页面内容，targer属性可以改变目标文档的显示窗口。

**target属性表**
值	描述
_blank	在新窗口中打开被链接文档
_self	默认值。在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
frameName	在指定的框架中打开被链接文档

语法：<a hret="地址" target=“值”> 在新窗口打开被链接文档</a>

二，表格与框架

1，表格的组成：

表格使用行和列的方式组织信息，表格元素由行，列，表头单元格，正文单元格，标题，表头行，正文行，表尾行等构成。
表格单元的创建： 语法：<table><tr><td>单元格内容</td><td>单元格内容</td>…………</tr>代表一行…………更多行<table>
：默认情况下，表格的边框是隐藏的。表格可嵌套。

表格的个组成部分均包含在<table>标签之内。
单元格是表格的基本元素，使用<td>标签表示。
行是表格的水平元素，使用<tr>标签表示
一行可以由一个或多个单元格构成，而一个表格可以由一行或多行。

2，表格的基本属性

一般情况，表格作为布局使用，不会在页面中显示出来，可一通过表格属性设置：

**表格常用的<table>属性**
属性	取值	描述
align	left(左)，center(中),right(右)	设置表格相对周围元素的对齐方式
bgcolor	rgb(x,x,x)，#xxxxxx,colorName	设置表格的背景颜色
border	像素	设置表格边框宽度
cellpadding	像素或百分比	设置单元格与其内容之间的距离
cellspacing	像素或百分比	设置单元格之间的距离
height	像素或百分比	设置表格高度
width	像素或百分比	设置表格宽度
rulse	none，groups，rows，cols，all	设置表格中的表格线的显示方式，默认all
frame	void(不显示边框)，above(显示顶部)，below(显示底部) ，hsides(顶部+底部)，vsides(left+right)，lhs(左侧)， rhs(右侧)，box，border(显示所有边框，默认)	设置表格外部边框的显示方式

3，单元格标签

单元格是表的基本属性，可以通过<td>或<th>(加粗居中)标签来创建单元格，<td>标签多用来包含数据中的数据部分，而<th>标签用来包含表格中的标题部分。

**单元格标签<td><th>的属性**
属性	描述
align	设置单元格内容的水平对齐方式：left，center，right，justtify
valign	设置单元格内容的垂直对齐方式：top，middle，bottom，baseline
rowapan	设置单元格跨越的行数
colspan	设置单元格跨越的列数
scope	定义将表头数据与单元数据相关联的方法col列的表头，row行的表头。
width	设置单元格的宽度
height	设置单元格的高度
bgcolor	设置单元格的背景颜色

4，行标签

行是表格的水平元素，可以包含多个或一个单元格，使用<tr></tr>进行行定界。

**行标签<tr>常用的属性**
属性	描述
align	设置单元格内容水平对齐方式：left，center，right，justify
valign	设置单元格内容垂直对齐方式：top，middle，bottom，baseline
bgcolor	设置单元格的背景颜色
bordercolcr	设置行内单元格的边框颜色(会被覆盖)
bordercolordark	设置行内单元格的左上边框颜色
bordercolorlight	设置行内单元格的右下边框的颜色

5，表格的行分组

表格还提供了标题，表头和表尾部分：

<thead>标签定义表头，用于创建表头的头部信息。
<tfoot>标签定义表尾，用于创建表格的脚注部分。
<tbody>标签定义表格主体，用于表示表格的主体部分；
<caption>标签定义表格标题，显示在整个表格的上方。

表格可以包含多个<tbody>标签，用于对主体部分数据进行分组，<thead><tfoot>只可以出现一次。对大型数据而言，尽量将<tfoot>放在<tbody>之前。有利于加快表格的显示速度。当打印一个较长的表格时，表头可表尾会被打印在包含表格数据的每一页中。

6，表格的列分组：

在html中<colgroup>标签，该标签可以将表格按列进行分组。建议通过css样式实现，<colgroup>标签由于没有内容部分，故写成单标签或双标签的形式均可。span没有值时，默认为一列，一个<colgroup/>为一个列分组，多个为多个列分组。

<colgroup>标签属性


style	设置颜色
align	设置单元格水平对齐方式：left，center，right，justify
valign	设置单元格内容垂直对齐方式：top，middle，bottle，baseline
span	规定该列组应该横跨的列数，默认是1
width	设定列组合的宽度

7，表格的嵌套：

内部表格<table>应该位于外层表格的<td></td>标签之间，嵌套表格的层次一般不超过3—4层。

8，框架

1。框架能够将浏览器窗口划分为多个独立的窗口，每个窗口包含一个独立HTML页面，整个浏览器窗口对应的框架集合称为框架集，

框架集的基本结构：使用<frameset 属性></frameset>语法来划分框架。


  
   
    
     
    
    
     
      <frameset rows="60,*,70" frameborder="yes" framespacing="8" bordercolor="#0033ff">
     
    
   
    
     
    
    
      
      <frame src="url"/> 
     
    
   
    
     
    
    
     
      <frame src="URl"/> 
     
    
   
    
     
    
    
     
      <frame src="url/> 
     
    
   
    
     
    
    
     
      </frameset> 
     
    
   
    
     
    
    
     
      <noframes><body></body>
     
    
   
    
     
    
    
     
      </noframes>//当浏览器不支持框架时会显示该部分。

一个<frameset>框架集可以包含多个<frame>框架窗口，具有rows和cols的属性。
rows属性用于框架包含的行数，以及各行高度占窗口的像素或比例参数个数两个以上时要用逗号隔开。
cols属性用于框架包含的行数，以及各行高度占窗口的像素或比例参数个数两个以上时要用逗号隔开。
cols和rows可以单独使用，也可以一起使用。使用混合度量尺度时注意优先级(像素单位>百分比>相对宽度>通配符)

<frameset>标签的属性
属性	描述
rows	设置框架集中包含框架的行数，以及对应的高度rows=“123,123，*”&&rows=“34%，64%，67%”
cols	设置框架集中包含框架的列数，以及对应的宽度clos=“1，6，3*”
frameborder	设置框架集的边框是否显示，取值为1，0或yes，no边框本身不能调整宽度
bordercolor	设置框架集的边框的颜色
framespacing	框架与框架的空白距离

2。框架的属性：

<frame src="url" name=""……>可以使用单标签<frame />,也可以使用双标签<framesrc></framesrc>

框架属性
属性	描述
name	设置框架的名称，在设置超链接时用作框架的标记
src	设置在框架中显示页面的URL,绝对路径/相对路径
frameborder	设置框架的边框是否显示，取值为0或1
marginheight	定义内容与框架的上下边缘高度，默认为1
marginwidth	定义内容与框架的左右边缘宽度，默认为1
scrolling	设置框架中是否显示滚动条，取值为yes，no，auto
noresize	设置框架不能调整大小，值只有noresize

4。内联框架：

嵌入到页面中的一个区域，通过<ifreme>标签引入另一个页面资源无需<frameset>,语法如下：

<iframe src="url" name="" width="" height=""...></iframe>

**内联框架<iframe>常用属性**
name	设置iframe的名称
align	设置iframe与周围文本的对齐方式，取值可以是left，right，top，middle，bottom
frameborder	设置iframe的边框是否显示，取0或1.
src	设置在iframe中显示页面的URL
marginheight	定义iframe的顶部与底部的边距
marginwidth	定义iframe的左侧和右侧的边距
height	设置iframe的高度
width	设置iframe的宽度
scrolling	设置iframe中是否有显示滚动条，取值yes，no，auto

4。框架之间的链接，利用设定的target属性选择打开链接的位置。

三，表单

1，表单概述：

From表单是一个重要组成部分，负责采集和提交用户输入的信息，表单主要分为表单标签和表单控件(表单域+按钮)，常见的表单域有文本框，密码框，多行文本框，单选按钮，复选框，下拉选择框等。在交互揭界面，用户在表单域录入数据后，可通过表单的特殊控件讲数据传递给服务器。服务器端处理表单的程序通常采用动态脚本语言（JSP，php等），表单不可嵌套。

2，表单标签：

<form ></form>包含表单元素的区域，可以包含一些表单控件，还可以包含其他的HTML标签(表格，段落，标题等)，一个页面可以拥有一个或多个表单标签，标签之间相互独立，不能嵌套，在向用户服务器发送数据时一次只能提交一个表单中的数据，要同时提交多个表单，则需要使用JavaScript的异步交互方式。

表单标签的属性
属性	描述
action	当提交表单时，指定服务器端程序来处理数据，属性值一般为程序的URL，说明向何处发送表单中的数据，多用于动态交互性网站
accept	服务器能够处理的内容类型列表，用逗号隔开，HTML5中不在支持
accept-charset	服务器可处理的表单数据字符集
enctype	表单数据内容类型，说明在发送表单数据之前如何对其进行编码(编码方式)，取值可以是application/x-www-form-urlencoded在发送前编码所有字符（默认） multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。text/plain空格转换为 "+" 加号，但不对特殊字符编码。
id	设置表单对象的唯一标识，方便后期的CSS样式表及JavaScript脚本对其引用
name	设置表单对象的名称
target	打开处理URL的目标位置(不建议使用)
method	规定向服务器端发送数据所采用的方式，取值可以是get，post
onsubmit	向服务器提交数据之前，执行其指定的JavaScript脚本程序
onreset	重置表单数据之前，执行其指定的JavaScript脚本程序

method属性；get方式将数据作为URL的一部分发送给服务器，
URL由地址部分和数据部分构成，两者之间用问号‘？’隔开，数据以“名称=值得方式成对出现，且数据之间通过“&”进行分割，
get方式请求数据可以被缓冲，能够保留在浏览器历史记录中，还能作为书签被收藏，但因为出现在URL中，安全性低，且URL地址栏有限，最多不能超过255个字符，所以get方式有长度限制。
post方式将数据隐藏在HTTP的数据流中进行传输，请求数据不会出现在地址栏中，安全性比get方式要高，对数据长度没有限制，
但是post方式请求数据不会被缓存，也不能在历史记录，书签了出现，单机后退或刷新按钮时，数据会被重复提交。

3，表单域

表单域多用于收集网站访问者的信息，一般位于<form></form>标签之间，表单域包括文本框，密码框，隐藏框，多行文本框，单选按钮，复选框，列表选择框和文本选择框等元素，除多行文本框<textarea>和列表选择框<select>外，大部分表单域使用<input>标签来创建。

**<input>标签的通用属性**
属性	描述
id	设置当前控件的唯一ID，界面设计时，在CSS和JavaScript中可以引用
name	设置当前控件的名称。向服务器发送数据时，服务器根据name属性获取对应表单域的值
value	设置表单域的初始值。网页加载过程中，默认显示该值
type	必须的，用来说明当前控件的类型，取值可以是text，pasword，radio，checkbox，file，hidden，button，submt,treset，image等
maxlength	设置输入到文本框的最大字符数，输入达到最大数后，用户按下更多键，也不会添加新的字符
size	设置文本输出控件的宽度，单位为字符

type的属性：

texe(定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符)，
pasword(密码字段。该字段中的字符被掩码。)，
radio(单选按钮)，
checkbox(复选框)，
file(输入字段和 "浏览"按钮，供文件上传)，
hidden(隐藏的输入字段)，
button(可点击按钮（多数情况下，用于通过 JavaScript 启动脚本)，
submit(提交按钮。提交按钮会把表单数据发送到服务器)，
reset(重置按钮。重置按钮会清除表单中的所有数据)，
image(图像形式的提交按钮)。

A.单行文本框：通过type属性的text指定，disabled=“disabled”用于指定文本框的禁用状态，并呈现灰色的，readonly=“readonly”用于指定文本框的只读状态。

B.密码框：与文本框类似，type的属性为pasword但显示的当前内容是以掩码的方式显示的，虽然密码框中显示的内容以掩码的方式显示，但是在数据传输中明文发送，需使用加密技术。

C.单选按钮：在一组数据中只能选择其中一个选项。在HTML中将<input>标签的type="radio"的方式创建一个单选项按钮。具有相同name属性值的单选按钮分为一组，value属性指定该项的值，同一组内值不应该相同(提交服务器的值)，checked="checked"属性用于指定该项的默认被选中，同一组中有多项checked属性时，最后一个为默认。

D.复选框：在一组数据中可以选择多项/一项，通过type属性的checkbox设定。当复选框中有多项数据时，浏览器会根据复选框的name属性进行分组，当没有value属性时，如果被选中则值为on反之为off，

E.文件选择框：用户通过表单上传文件时，需要使用文件选择框来选择上传文件，通过type属性的file属性值创建一个选择框，accept属性用于指定文件选择窗口的文件类型过滤，单机选择文件时，会在弹出的文件选择窗口中，根据accept指定的类型对文件自动进行过滤，在使用文件选择框时，form表单的enctype属性应设为multipart/form-data类型，method属性应设为post类型。

F.隐藏域：在HTML中，通过type="hidden"来创建一个隐藏域。name指明隐藏域的名称，value指明隐藏域的值。

隐藏域中的数据虽然不能在浏览器中直接显示，但可以通过查看源码的方式找到。隐藏数据可以通过CSS中的dispiay属性或visibility属性显示。

G，多行文本框：用来输入较长的内容的文本输入控件，通过<textarea>标签创建一个多行文本框<textarea></textarea>标签之间的内容会显示。

name属性指定多行文本框的名称，rows指定多行文本框的行数，cols指定多行文本框的宽度，单位字符，wrap属性指定文本内容大于文本宽度时的显示方式：off(默认值auto)，virtual(实现文本区内的自定换行，以给善对用户的显示，在传输服务器时，在按下enter键的地方换行，其他没有),physical(实现文本区内的自动换行，并以这种形式传递给服务器)。可以采用富文本框RTE来实现。

H，列表选择框：列表选择框允许用户选择一项或多项，通过<select>和<option>标签实现。一个列表中可以包含多个列表项<option>,列表项要放在<select></select>之间。

**标签<select>属性**
name	设置列表的名称
size	列表中可见选项的数目
multiple	设置列表是否可以选择多个选项，可以使用multiple或multiple="multiple"形式；允许选择时，需要按下Crtl键选择多项。
disabled	设置列表是否被禁用，可以使用disabled或disabled="disabled"形式

**标签<option>的属性列表**
value	设置该项的值，如果选中该项，该项的值就将发送给服务器
selected	设置当页面加载时，该项是否被选中。可以使用selected或selected="selected"形式
disabled	该项在首次加载时被禁用，可以使用disabled或disabled="disabled"形式

I,对于具有boolean值的属性(selected,multiple,readonly,disabled),只写属性而不指定属性值时，表示该属性值为true；指定该属性值时，默认为false。在HTML5中允许，在XHTML中要求严格，属性必须成对出现。

G,在列表选择框中还可以将列表项分为多组，HTML中提供了<optgroup>标签，标签中的label属性用于指定每个分组的名称。且分组名不能被选择。disabled属性用于设置该分组名是否被禁用。

K,按钮控件：表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，触发客户端脚本程序，

按钮分为：提交按钮，重置按钮，图片按钮，和普通按钮，通过<input>标签或<button>标签创建按钮，

type属性决定按钮的类型，取值为submit，reset，button或image。
name属性用于指定按钮名称，
src属性是可选的，当type属性为image时，用来指定图片的URL地址。
value属性用于指定按钮上的显示的文字。

提交按钮：submit表示一个能够提交表单的按钮；
重置按钮：reset表示创建一个能够将表单重置为初始化状态的按钮，
普通按钮：button表示创建一个普通按钮，当用户单机按钮时，可以触发JavaSctipt脚本的按钮。
图片按钮：image表示创建一个图片按钮，单击也可以提交表单。

在HTML表单中，还可以使用<button></button>标签创建一个按钮，标签之间的内容都是按钮的内容，包含任何可以接受的文本(图片、视频等)，

O,表单分组：

常见的表单分组标签有<fieldset><legend>,前者可以看做表单的一个子容器，将所包含的内容以边框环绕方式显示，而后者则是为<fieldset>边框添加相关的标题;

四，CSS语言基础

一，CSS概述：

排版时，内容与样式的混合设计方式将导致页面臃肿，难于维护，不利于搜索引擎。CSS(层叠样式表Cascading Style Sheets)将页面内容与样式彻底分离。

2，CSS发展：CSS~CSS4.CSS3采用模块化结构。

3，CSS基本语法结构

CSS基本语法结构：样式是CSS 的基本单元，每个样式包含两部分内容(选择器+声明)语法：选择器{声明；声明……}

选择器(Selector):选择符，用于指明网页中元素应用此样式规则，浏览器解析该元素时，根据选择器指定的样式来显示特效。
声明(Declaration):规则，每个声明有属性和属性值两部分构成，以；结束，可以包含一个或者多个，最后一个声明后面的英文分号可以省略。声明必须在{}内。例：div {color ：bluer；font-size：12px}，一般属性值之间要用逗号隔开，

二，CSS的使用：内嵌样式，内部样式，和外部样式。

1，内嵌样式(行内模式)：将CSS样式嵌入到HTML中，例：<p style="color:red; backgroung:yellow ">内嵌样式</p>

2,内部样式表(): 将CSS样式分离到<style>标签中声明，仅对当页有效，<style>标签位于<herd>标签内部。

CSS中的注释采用：/*注释内容*/，

例：<style type="text/css">h1{color:001212;border:dashed 1px;}</style>

3，外部样式表：将CSS样式以独立的文件进行存放，在页面中引入该文件，用户浏览网页时，CSS样式文件会被暂时缓存，之后会优先使用缓存中的CSS文件。分为链接外部样式表和导入外部样式表。

外部链接样式表：在HTML中<link>标签(可以多次出现)用于文档与外部资源关联，常用于链接网页样式表，语法：<link type="text/css" rel="stylesheet" herd="url"/>，链接外部样式表需要创建CSS样式表文件，CSS样式文件中在CSS样式的顶部+@charset“unf-8”用于指定样式表使用的字符集，该关键字只允许出现一次。在<link>标签中把url替换为CSS样式文件名。

导入外部样式表：指在页面的内部样式表中导入一个外部样式表，语法：@import “样式文件的引用地址”；或者@import url("样式文件的引用地址")；在HTML中的<style>标签中@import语句需要位于内部样式之前。

链接与导入的区别：1。隶属关系不同：<link>标签属于HTML标签，而@import是CSS提供的载入方式，<link>标签还可以链接其他标签(RSS)，@import只能载入CSS。2。加载时间和顺序不同：使用<link>标签时先加载CSS样式，在编译，而@import相反。先呈现HTML后渲染。3。兼容性不同；@import只在IE5以上识别。4。DOM模型控制样式：使用Javascript控制DOM改变样式时，只能用<link>,@import不受控制。

优先考虑<link>链接方式。<link>标签的属性

charset	设置或返回目标 URL 的字符编码。(html5不支持)：char_encoding
href	规定被链接文档的位置:url
herflang	规定被链接文档中文本语言：language_code
media	规定被链接文档将被显示在什么设备上：media_query
rel	规定当前文档与被链接文档之间的关系。:stylessheet,tag,sidebar,prev,icon,next,help,author,licence,alternate,licence,pingback,prefetch,search
sizes	规定被链接资源的尺寸，仅适用于rel=“iocn”。：heightxwidth，any(html5新)
target	链接资源的打开位置，：_blank新,_self默认同,_top整,_parent父,frame_name指定框架(html5不支持)
type	规定被链接文档的mine类型。：mine_type

4，样式表的优先级：多重样式是指外部样式，内部样式和内嵌样式同时应用于页面中的某一元素，优先级采用就近原则，由高到低顺序：内嵌，内部，外部，浏览器缺省默认。当外部样式放到内部样式的后面时，优先级顺序为：内嵌>外部>内部>浏览器缺省默认。习惯上将外部标签放到内部标签之前。

三，CSS选择器(基本选择器，组合选择器，属性选择器)

1，基本选择器：

通用选择器(*{}:匹配文档中所有类型)，

标签选择器(标签名{}:用于对html中的特定标签设置样式。)，

类选择器(.类名{}:同一样式的元素定义为一类)，

ID选择器(#ID名{}:ID唯一，与类选择器基本相同)。

页面元素的样式是可以叠加，覆盖的。选择器之间的的优先级为：ID选择器>类选择器>标签选择器>通用选择器。

2，组合选择器：

多元素选择器(选择器1,选择器2……{}:即选择器1与2拥有同样的声明)

后代选择器(选择器1 选择器2 选择器3……{}:即选择器1的所有后代选择器(嵌套的标签)都是一样的声明，即选择器2等为选择器1的所有后代时的声明修饰，无论选择器2嵌套多深)，

子元素选择器(选择器1 > 选择器2 > 选择器……{}:即选择器2为选择器1直接后代时声明修饰选择器2。声明始终修饰最内层的选择器，间接后代不适用 )

相邻兄弟选择器(选择器1 + 选择器2 +选择器3……{}:即紧接某元素后的元素(同一代的相邻选择器)被声明修饰，声明始终修饰加号最后一个选择器)

普通选择器(选择器1 ~ 选择器2 ~ 选择器3 ……{}:同一代的所有选择器均可以被声明修饰)等组合选择器。

子元素选择器，相邻选择器，普通选择器若有多个选择器，始终修饰最后一个，且以倒数第二个为选择器1；

在HTML中子元素可以继承父元素的某些样式。当子元素与符元素定义的样式重复时，则会覆盖父元素的样式。

3，属性选择器：

属性选择器(根据元素的属性来选取元素)包括：存在选择器，相等选择器，包含选择器，连接字符选择器，前缀选择器，子串选择器，后缀选择器。attribute属性

CSS 属性选择器列表
选择器类型	语法	实例	描述
存在选择器	[attribute]	p[id]	任何id属性的p标签
相等选择器	[attribute=value]	p[name="teaName"]	name属性为teaname的p标签
包含选择器	[attribute~=value]	p[name~="stu"]	name属性中包含‘ stu ’的p标签，stu左右为空格。
连接字符选择器	[attribute \|=value]	p[lang \|="zh"]	匹配属性等于"zh"或以"zh-"开头的所有元素
前缀字符串	[attribute^=value]	p[title^="zh"]	选择title属性值以“zh”开头的所有元素。
子字符串	[attribute*=value]	*p[title=“ch”]**	选择title属性值包含“ch”字符串的所有元素
后缀选择器	[attribute$=value]	p[title$="th"]	选择title属性值以“th”为结尾的所有元素

属性选择器的优先级是由进及远。

四，CSS样式属性

文本属性：

**文本属性列表**
功能	属性名	描述
缩进文本	text-indent	设置行的缩进大小，值可以为正值或负值，单位：em/px/%
水平对齐	text-align	设置文本的水平对齐方式，取值：left(左)，right(右)，center(中间)，justify(两端)
垂直对齐	vertical-align	设置文本的垂直对齐方式，取值：bottom(底部)，top(顶)，middle(中)，baseline(基线)
字间距	word-spacing	设置字(单词)之间的标准间距，默认normal(或0)单位：em/px/%
字母间隔	letter-spacing	设置字符或字母之间的间隔
字符转换	text-transform	设置段落中字母的大小写,取值none(无),uppercase(大写),lowercase(小写),capitalize(首字母大写)
文本修饰	text-decoration	设置段落中需要强调的文字,取值 none,uppercase(下划线),overline(上划线),line-through(删除线),blink(闪烁)
空白字符	white-space	设置源文档中的多余的空白，取值normal(忽略全部),pre(正常显示),nowrap(文本不换行，除非遇到<br />)

**字体属性列表**
功能	属性名	描述
文本颜色	color	设置文本的颜色。例如red,rgb(0,0,0),#ff0000等格式
文本类型	font-family	设置文本的字体。可以取值宋体，隶书以及Serif( ),Verdana()等
字体风格	font-style	设置字体样式。取值normal(正常),italic(斜体),obique(倾斜),通常情况下，italic和oblique文本看一样
字体变形	font-variant	设定小型大写字母。取值normal(正常),small-caps(小型大写字母)
字体加粗	font-weight	设置字体的粗细。取值可以是bolder(特粗体,900),bold(粗体,700),normal(正常,400),lighter(细体)或100到900之间的等级。
字体大小	font-size	设置文本的大小。取值可以是绝对值或者相对值，其中绝对值从小到大一次为：xx-small,x-small,small,medium(默认),large,x-large,xx-large:单位可以是pt(磅)或者em，也可以采用%
行间距	line-height	设置文本的行高。即两行文本基线之间的距离
字体简写	font	属性的简写可以用于一次设置元素字体的两个或更多方面，书写顺序为：font-style，font-variant，font-weight，font-size/line-height，font-family

背景属性：

背景属性列表
背景颜色	background-color	设置背景颜色
背景图片	background-image	设置背景图像。background-image:url(图像地址)；没有图像，其值为none
背景重复	background-repeat	设置背景平铺的方式，取值为no-repeat(不平铺),repeat-x(横向平铺),repeat-y(纵向平铺),repeat(x/y双向平铺)
背景定位	background-position	设置图像在背景中的位置。取值为top，bottom，left，right，center或具体值(例如10px)，百分比(例如80%)
背景关联	background-attachment	设置背景图像是否随页面内容一起滚动，取值为scroll(滚动，默认)，fixed(固定)
背景尺寸	background-size	CSS3中新增的属性，用来设置背景图片的尺寸，可以使用像素或百分比设置图片的尺寸。length(尺寸)\|percentage(父元素百分比)\|cover(覆盖背景)\|contain(覆盖全部)
填充区域	background-origin	CSS3新增的属性，规定background-position属性相对于什么位置来定位，取值为border-box(边框盒)，padding-box(内边距框)，conntent-box(内容框)
绘制区域	background-clip	CSS新增，规定背景的绘制区域，取值border-box(背景被裁剪到边框盒),padding-box(背景被裁剪到内边距框)，content-box(背景被裁剪到内容框)
背景简写	background	background：color(背景颜色) position(背景定位) size(背景尺寸) repeat(背景重复) origin(填充区域) clip(绘制区域) attachment(背景关联) image(背景图片)

多背景图片样式定义时，对应属性逗号隔开。

表格属性：

**表格属性列表**
边框	border	设置表格边框的宽度
折叠边框	border-collapse	设置是否将表格边框折叠为单一边框。取值为separate(双边框，默认)，collapse(单边框)
宽度	width	设置表格宽度，px/%
高度	height	设置表格高度。px/%
水平对齐	text-align	设置水平对齐方式
垂直对齐	vertical-align	垂直对齐方式
内边距	padding	设置内容与边框的距离，例：padding：3px 7px 6px 7px(上/右/下/左),(上/右左/下),(上下/左右),(所有)
单元格间距	border-spacing	设置相邻单元格的边框间的间距，双边框模式适用
标题位置	caption-side	设置表格标题的位置，top或bottom

列表属性

**列表相关属性**
列表类型	list-style-type	设置列表的图形符号，属性为：none(无)，disc(默认，实圆),circle(空圆),square(实方),decimal(阿数),lower-roman(小罗数),upper-roman(大罗数)，lower-alpha(小英),upper-alpha(大英)
列表项图像	list-style-image	将图形符号设定为指定的图像，url()
符号位置	list-style-position	设置列表图形符号的位置，值：inside(文本内)，outside(默认，文本外)
列表简写	list-style	设置所有的列表属性：list-style：type(类型) position(位置) image(图像)

伪类与伪元素

伪类与伪元素是预先定义的，独立于文档元素的，能后被浏览器自动识别，处于特殊状态的元素称为伪类，伪元素指元素中特变的一部分。

伪类：以“：”开始，在冒号前后不能出现空白。

常用的伪类
：active	向被激活的元素添加样式
：focus	向拥有键盘输入焦点的元素添加样式
：hover	当鼠标悬浮在元素上方时，向元素添加样式。
：link	向未被访问的链接添加样式，目前仅适用于超链接。图片不支持
：visitted	向已被访问的链接添加言样式，同上。
：readonly	向只读元素添加样式。表单控件中使用
：checked	向被选中的元素添加样式。同上
：disabled	向被禁用的元素添加样式。同上
：enabled	向可用的元素添加样式。同上

例：a:link{font-size:12px;color:black;text-decoration:none;}或：checked{outline:solid 2px #323434;}

伪类：伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树中并不存在与之对应的部分。

伪元素列表
：first-line	向文本的首行添加特殊样式
：first-letter	向文本的第一个字母或汉子添加特殊样式
：before	在元素之前添加内容.：before{content：url()}
：after	在元素之后添加内容.：after{content: url()}

例：.类名:after{content:url();}

分类属性

1，cursor属性：用于指定鼠标类型，

cursor属性值列表
auto	光标的形状取决于悬停对象，文本是大写I，超链接为箭头
crosshair	光标呈现十字形状
pointer	光标为手形
move	移动选择效果十字箭头
text	大写I
wait	光标为圆圈
help	光标为问好或气球
ne-resize	光标为右斜箭头
se-resize	光标为左斜箭头
s-resize	光标为竖直箭头
w-resize	光标为左右箭头

display属性

通过display属性可以将页面元素隐藏或显示出来，也可以将元素强制改为块级元素或内联元素。

display常用的属性值
none	将元素设为隐藏状态，
block	将元素显示为块级元素，此元素前后会带有换行符
inline	默认，此元素会被显示为内联元素，元素前后没有换行符

块内的行内元素，span，p，img都无法使用display属性。

Visibility属性：

用来隐藏页面中的元素。当不希望对象在隐藏的时还占用空间使用，属性值：visible(默认值：元素可见)或hidden(不可见)。

一般页面是由页面流构成的，页面元素在页面流中的位置是由元素在文档中的位置决定的。块级元素从上到下排列(每个块级元素单独成行)，而内联元素将从左到右排列，元素在页面中的位置会随外层容器的改变而给变。

CSS提供三种定位机制：普通流，定位(position)，浮动(float)。

position属性：

可以将元素从页面流中偏移或分离出来，然后设定其具体的位置(top,bottom,right,left)，属性值如下；

position属性值列表
static	正常流(默认值)，元素在页面流中正常出现，并作为页面流的一部分
relative	相对定位。相对于其正常(原有)位置进行定位，并保持其未定位的形状及所占的空间
absolute	绝对定位。相对于浏览器窗口进行定位，将元素框重页面流中完全删除，重新定位，当拖拽页面滚动条时，该元素随其一起滚动。
fixed	固定定位。相对于浏览器窗口进行定位，将元素框从页面流中完全删除后，重新定位，当拖拽页面滚动时，该元素不会随之滚动，

当position的属性值为relative，absolute或fixed时，可以使用元素的偏移属性进行重新定位，当属性为static时,会忽略偏移属性以及z-index等相关属性。使用绝对定位相对定位时，会出现元素重叠，可以使用z-index属性设置元素之间的叠放顺序，取值为auto或数值时，数值越大越上层。在页面坐标中存在X右Y下Z外，

float属性；

float属性用于将元素从正常的页面流中浮动出来，离开其正常位置，浮动到指定的边界。当元素浮动到边界时，其他的元素将会在该元素的另一侧进行环绕。当要取消浮动所产生的影响时，使用clear属性进行清除，

float与clear的属性
left	元素浮动的左边界	清除左侧浮动产生的影响
right	元素浮动的右边界	清除右侧浮动产生的影响
none	默认值，不浮动	默认值，允许浮动元素出现在两侧
both		清除两侧浮动的影响

五，CSS页面布局

盒子模型：

在页面布局中，将页面元素有效的组织在一起，形成一套完整的，行之有效的原则和规范，称为盒子模型。即把页面中的所有元素看做是占据页面空间的盒子，通过盒子的嵌套，叠加，或并列最终形成页面。盒子模型由内容(content),边框(border),内边距(padding),外边距(margin)构成。

内容区(content):是盒子模型的中心，

包含了盒子的主要信息内容。内容区拥有width，height和overflow三个属性：width和height属性分别指定盒子内容区的高度和宽度。overflow属性：用于处理内容区的信息。

**overflow属性取值列表**
visible	默认值，溢出内容不会被修剪，会呈现在元素框之外
hidden	溢出内容将不可见
scroll	溢出内容被修剪，可以通过滚动条查看隐藏部分
auto	由浏览器决定

边框(border):外边距和内边距夹的部分。

**边框属性列表**
border-top-width/style/color	设置元素的上边框的宽度/样式/颜色
border-top	上边框的简写形式：例：border-top:2px double #ffoooo
border-right-width/style/color	设置元素的右边框的宽度/样式/颜色
border-right	右边框的简写形式：例：border-right:thick double #ffoooo
border-bottom-width-style-color	设置元素的下边框的宽度/样式/颜色
border-bottom	下边框的简写形式：例：border-bottom:thick double #ffoooo
border-left-width-style-color	设置元素的左边框的宽度/样式/颜色
border-left	左边框的简写形式：例：border-bottom:thick double #ffoooo
border-width/style/color	设置所有边框宽度/样式/颜色
border	边框的简写，例：border:thick double #ffoooo
border-top-left/right-radius	设置元素左/右上圆角边框
border-bottom-left/right-radius	设置元素左/右下圆角边框
border-radins	圆角边框的简写形式，用于设置四个border-*-radius属性，CSS3中新增。
box-shadow	向边框添加一个或多个阴影，CSS3新增


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>border属性
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
             
      h3 {
     
    
   
    
     
    
    
                 
      /* 设置边框样式 */
     
    
   
    
     
    
    
                 
      border-style: solid dashed;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      div {
     
    
   
    
     
    
    
                 
      /* 设置顶部边框样式 */
     
    
   
    
     
    
    
                 
      border-top-style: solid;
     
    
   
    
     
    
    
                 
      /* 设置下边框的样式 */
     
    
   
    
     
    
    
                 
      border-bottom-style: solid;
     
    
   
    
     
    
    
                 
      /* 设置左边框的样式 */
     
    
   
    
     
    
    
                 
      border-left-style: dashed;
     
    
   
    
     
    
    
                 
      /* 设置右边框的样式 */
     
    
   
    
     
    
    
                 
      border-right-style: dashed;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <h3>边框与背景
      </h3>
     
    
   
    
     
    
    
         
      <div>CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

边框宽度(width)：

边框宽度border-width的取值：thin(细边框),medium(中等边框),thick(粗边框)。边框宽度参数遵循TRBL原则顺时针(四个参数)，上-左右-下(三个参数),上下-左右(两个参数),全部(一个参数)

边框样式：border-style；

**边框样式取值**
none	无边框
hidden	隐藏边框
dotted	定义点状边框，大多为实线
dashed	定义虚线，大多为实线
solid	定义实线
doubld	定义双线，双线的宽度等于border-width的值
groove	定义3d凹槽边框，效果取决于border-color的值，以下都是
ridge	定义3D菱形边框
inset	定义3D凹边
outset	定义3D凸边


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>border属性
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
             
      h3 {
     
    
   
    
     
    
    
                 
      border-style: solid dashed;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      div {
     
    
   
    
     
    
    
                 
      border-top-style: solid;
     
    
   
    
     
    
    
                 
      border-bottom-style: solid;
     
    
   
    
     
    
    
                 
      border-left-style: dashed;
     
    
   
    
     
    
    
                 
      border-right-style: dashed;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      p {
     
    
   
    
     
    
    
                 
      border-style: outset;
     
    
   
    
     
    
    
                 
      border-color: gray;
     
    
   
    
     
    
    
                 
      border-width: 
      8px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      span {
     
    
   
    
     
    
    
                 
      border-style: inset;
     
    
   
    
     
    
    
                 
      border-color: gray;
     
    
   
    
     
    
    
                 
      border-width: 
      8px;
     
    
   
    
     
    
    
                 
      /* 块级元素,显示方式前后有空格 */
     
    
   
    
     
    
    
                 
      display: block;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <h3>边框与背景
      </h3>
     
    
   
    
     
    
    
         
      <div>CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
         
      <p>样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
      </p>
     
    
   
    
     
    
    
         
      <span>CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
      </span>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

圆角边框(radius)：

在CSS3中提供圆角边框属性，通过border-top-left-radius,border-top-right-radius,border-dottom-right-radius，border-bottom-left-radius对四个角分别设置。使用border-radius统一设置。一个圆角边框有两个参数，HR(水平半径)和VR(垂直半径)。

当水平半径与垂直半径等时，只有一个参数(border-radius:10px)全部，当有两个参数时(border-radius:10px 20px)对角相同(\/),当有三个参数时(%),当有四个参数时(TRBL)。

当水平半径与垂直半径不相等时(水平/垂直)：1/1(全部,全部),2/2(\,/),3/2(%,\/),2/4(\/,TRBL).

边框阴影(box-shadow)：可以为元素添加一个或多个阴影。属性由2~6个参数构成，语法：box-shasow：h-shadow v-shadow[blur] [spraed] [color] [inset];

box-shadow属性
h-shadow	必须，指定水平阴影的位置，允许为负
v-shadow	必须，指定垂直阴影的位置，允许为负
blur	可选，指定模糊距离
spread	可选，指定阴影尺寸
color	可选，指定阴影颜色
inset	可选，将外部阴影变为内部阴影


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>圆角边框border-radius属性
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
             
      div{
     
    
   
    
     
    
    
                 
      /* 设置div边框 */
     
    
   
    
     
    
    
                 
      height: 
      100px;
     
    
   
    
     
    
    
                 
      width: 
      100px;
     
    
   
    
     
    
    
                 
      /* 设置边框样式 */
     
    
   
    
     
    
    
                 
      border-style: solid;
     
    
   
    
     
    
    
                 
      /* 设置边框宽度 */
     
    
   
    
     
    
    
                 
      border-width: 
      4px;
     
    
   
    
     
    
    
                 
      /* 设置定位方式 */
     
    
   
    
     
    
    
                 
      position: absolute;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .firstDiv {
     
    
   
    
     
    
    
                 
      /* 设置背景颜色 */
     
    
   
    
     
    
    
                 
      background-color: 
      #CCC;
     
    
   
    
     
    
    
                 
      /* 设置定位位置,相对与页面 */
     
    
   
    
     
    
    
                 
      top: 
      50px;
     
    
   
    
     
    
    
                 
      left: 
      20px;
     
    
   
    
     
    
    
                 
      /* 设置圆角边框 */
     
    
   
    
     
    
    
                 
      border-radius: 
      10px 
      20px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .secondDiv {
     
    
   
    
     
    
    
                 
      /* 设置背景颜色 */
     
    
   
    
     
    
    
                 
      background-color: 
      #999;
     
    
   
    
     
    
    
                 
      /* 页面位置 */
     
    
   
    
     
    
    
                 
      top: 
      50px;
     
    
   
    
     
    
    
                 
      left: 
      160px;
     
    
   
    
     
    
    
                 
      /* 设置圆角边框属性 */
     
    
   
    
     
    
    
                 
      border-radius: 
      10px 
      20px 
      30px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .thirdDiv {
     
    
   
    
     
    
    
                 
      background-color: 
      #CCC;
     
    
   
    
     
    
    
                 
      /* 设置页面位置 */
     
    
   
    
     
    
    
                 
      top: 
      50px;
     
    
   
    
     
    
    
                 
      left: 
      300px;
     
    
   
    
     
    
    
                 
      /* 设置圆角边框位置 */
     
    
   
    
     
    
    
                 
      border-radius: 
      10px 
      20px / 
      30px 
      40px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .fourthDiv {
     
    
   
    
     
    
    
                 
      background-color: 
      #999;
     
    
   
    
     
    
    
                 
      top: 
      50px;
     
    
   
    
     
    
    
                 
      left: 
      440px;
     
    
   
    
     
    
    
                 
      /* 设置圆角边框 */
     
    
   
    
     
    
    
                 
      border-radius: 
      10px 
      20px 
      30px / 
      50px 
      60px;
     
    
   
    
     
    
    
                 
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <h3>CSS3圆角边框
      </h3>
     
    
   
    
     
    
    
         
      <div class="firstDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="secondDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="thirdDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="fourthDiv">
      </div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>边框阴影border-shadow属性
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
             
      body {
     
    
   
    
     
    
    
                 
      /*background-color:#E9E9E9;*/
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      div {
     
    
   
    
     
    
    
                 
      border-style: solid;
     
    
   
    
     
    
    
                 
      border-width: 
      4px;
     
    
   
    
     
    
    
                 
      position: absolute;
     
    
   
    
     
    
    
                 
      left: 
      100px;
     
    
   
    
     
    
    
                 
      top: 
      50px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .imageDiv {
     
    
   
    
     
    
    
                 
      width: 
      294px;
     
    
   
    
     
    
    
                 
      /* 设置内边距，具体后面进行讲解 */
     
    
   
    
     
    
    
                 
      padding: 
      10px 
      10px 
      20px 
      10px;
     
    
   
    
     
    
    
                 
      border: 
      1px solid 
      #BFBFBF;
     
    
   
    
     
    
    
                 
      background-color: white;
     
    
   
    
     
    
    
                 
      /* 添加边框阴影box-shadow */
     
    
   
    
     
    
    
                 
      /*左、下、模糊距离、*/
     
    
   
    
     
    
    
                 
      /* 设置边框阴影 */
     
    
   
    
     
    
    
                 
      box-shadow: 
      10px 
      6px 
      10px 
      5px 
      #AAAAAA;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <h3>CSS3边框阴影
      </h3>
     
    
   
    
     
    
    
         
      <div class="imageDiv">
     
    
   
    
     
    
    
             
      <img src="images/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
     
    
   
    
     
    
    
             
      <p>花名：郁金香——Ballade Dream
      </p>
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

图像边框(border-image):

CSS3 中新增border-image属性，图像边框相关属性；

border-image属性
border-image-source	边框的图像的路径，可以是none(没有边框图像)或使用url("")函数指定图像地址
border-image-slice	图像边框向内偏移，该属性可以是1~4个整数或百分数，表示从四个方面对边框图片进行切割，确定边框样式，TRBL原则，默认中间不填，加fill填，角不会变化，例：border-image-slice：10 20 30 40 (fill);
border-image-width	图像边框的宽度，参数可以为1~4，遵循TRBL
border-inage-repeat	设置图像边框是否应平铺覆盖(repeat),取整覆盖(round)或拉伸覆盖(stretch)，参数1个全部，参数2个(上下/左右)
border-image	简写形式border-image：URL("图像路径") 图像分割方式(slice)/图像边框宽度(width)图像平铺方式(repeat) 例：border-image：url("图片地址") 40/40px stretch;


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>图像边框border-image
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
             
      /* 类选择器 */
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .baseDiv {
     
    
   
    
     
    
    
                 
      /* 浮动方式为左浮动 */
     
    
   
    
     
    
    
                 
      float: left;
     
    
   
    
     
    
    
                 
      /* 到左边的距离为20px */
     
    
   
    
     
    
    
                 
      margin-left: 
      20px;
     
    
   
    
     
    
    
                 
      border: 
      40px solid 
      #CCC;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .firstDiv {
     
    
   
    
     
    
    
                 
      /* 宽度 */
     
    
   
    
     
    
    
                 
      width: 
      200px;
     
    
   
    
     
    
    
                 
      /* 高度 */
     
    
   
    
     
    
    
                 
      height: 
      200px;
     
    
   
    
     
    
    
                 
      /* 左浮动 */
     
    
   
    
     
    
    
                 
      float: left;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .secondDiv {
     
    
   
    
     
    
    
                 
      width: 
      120px;
     
    
   
    
     
    
    
                 
      height: 
      120px;
     
    
   
    
     
    
    
                 
      /*定义边框图片 */
     
    
   
    
     
    
    
                 
      border-image: 
      url(
      "images/borderImage2.jpg") 
      40;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .thirdDiv {
     
    
   
    
     
    
    
                 
      width: 
      120px;
     
    
   
    
     
    
    
                 
      height: 
      120px;
     
    
   
    
     
    
    
                 
      /*定义边框图片 */
     
    
   
    
     
    
    
                 
      border-image: 
      url(
      "images/borderImage2.jpg") 
      40/
      40px 
      35px 
      30px 
      25px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .fourthDiv {
     
    
   
    
     
    
    
                 
      width: 
      120px;
     
    
   
    
     
    
    
                 
      height: 
      120px;
     
    
   
    
     
    
    
                 
      border-image: 
      url(
      "images/borderImage2.jpg") 
      40 
      35 
      30 
      25/
      40px 
      35px 
      30px 
      25px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .fifthDiv {
     
    
   
    
     
    
    
                 
      width: 
      210px;
     
    
   
    
     
    
    
                 
      height: 
      200px;
     
    
   
    
     
    
    
                 
      /* 清除两侧浮动影响 */
     
    
   
    
     
    
    
                 
      clear: both;
     
    
   
    
     
    
    
                 
      /* 左浮动 */
     
    
   
    
     
    
    
                 
      float: left;
     
    
   
    
     
    
    
                 
      /* 边框样式 */
     
    
   
    
     
    
    
                 
      border: 
      40px solid 
      #CCC;
     
    
   
    
     
    
    
                 
      border-image: 
      url(
      "images/borderImage2.jpg") 
      40/
      40px repeat;
     
    
   
    
     
    
    
                 
      /* 设置边框到顶部的距离 */
     
    
   
    
     
    
    
                 
      margin-top: 
      20px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .sixthDiv {
     
    
   
    
     
    
    
                 
      width: 
      210px;
     
    
   
    
     
    
    
                 
      height: 
      200px;
     
    
   
    
     
    
    
                 
      /* 设置边框到顶部的距离 */
     
    
   
    
     
    
    
                 
      margin-top: 
      20px;
     
    
   
    
     
    
    
                 
      /*设置边框的的背景图 */
     
    
   
    
     
    
    
                 
      border-image: 
      url(
      "images/borderImage2.jpg") 
      40/
      40px round;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      .senventhDiv {
     
    
   
    
     
    
    
                 
      width: 
      200px;
     
    
   
    
     
    
    
                 
      height: 
      200px;
     
    
   
    
     
    
    
                 
      margin-top: 
      20px;
     
    
   
    
     
    
    
                 
      border-image: 
      url(
      "images/borderImage2.jpg") 
      40/
      40px stretch;
     
    
   
    
     
    
    
                 
      /*border-image:url("images/borderImage2.jpg") 40 fill/40px stretch; */
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <h3>图像边框border-image
      </h3>
     
    
   
    
     
    
    
         
      <div class="firstDiv">
      <img src="images/borderImage2.jpg" width="200" />
      </div>
     
    
   
    
     
    
    
         
      <div class="baseDiv secondDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="baseDiv thirdDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="baseDiv fourthDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="fifthDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="baseDiv sixthDiv">
      </div>
     
    
   
    
     
    
    
         
      <div class="baseDiv senventhDiv">
      </div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

repeat：以中心位置为中心，等比例平铺。round：灵活显示全部图片。stretch:拉伸；

在class属性中，要引用两个类选择器，则类选择器之间用空格隔开。

内边距(padding):指内容区与边框之间的距离，可以分开或统一设定(与宽度相同)。padding-top/right/borrom/left(设置元素上右下左)的内边距，简写padding：可以有1~4个按照TRBL原则。

外边距(margin)：指元素与元素之间的距离，即围绕在元素边框之外的空白区域。设定方式与内边距相同，margin-top/right/bottom/left。

外边距合并：当两个垂直外边距相遇时，将形成一个外边距的高度等于合并前的两个外边距中较大的，

包含元素的外边距合并：当没有内边距的元素包含在一个没有内边距和边框的父元素里时，外边距会合并。

空元素的外边距合并：空元素只包含外边距而无边框和填充时，上下边距会合并。

DIV与CSS布局：

一个标准的Web页面由结构，外观和行为构成。

页面结构布局对于与页面的信息进行整理与分类，核心目标是实现结构与外观相分离通常涉及HTML，XHTML和HTML5等标签，页面外观是对结构化的内容进行修饰，通常采用CSS样式修饰。页面行为是指页面元素进行的交互操作，其中常用的技术有JavaScript，JQuery等。

常见的页面布局有表格布局，框架布局，DIV+CSS布局。表格布局代码臃肿，标签层次较多，页面不利于搜索引擎抓取，框架布局在搜索引擎检索时不完整，打印不方便。目前比较流行的是DIV+CSS布局，通过<div>标签整体进行划分，然后逐块CSS定位，最后在完整各个块中的局部布局，

五，JavaScript语言基础

JavaScript是一种脚本语言，可以直接嵌入HTML页面中，目前JavaScript由ECMAScript，DOM和BOM三者组成，JavaScript和JScript在ECMAScript方面是相同的。但在操作浏览器对象（DOM和BOM）等方面又各有各自独特的方法。

JavaScript特点及规范：

解释型——JavaScript是一种解释型语言，与编译性语言不同，JavaScript脚本不需要编译，可以直接被浏览器解释并执行。

嵌套在HTML中——JavaScript可以嵌套在HTML代码中，通常位于<script></script>标签之间，在文档加载或页面控制的事件触发时执行。

弱数据类型——在JavaScript中，定义变量时无须指定变量的类型，浏览器会根据变量的取值情况确定变量类型，变量的类型会随着值的改变而改变。

跨平台——JavaScript与操作系统无关，有支持JavaScript的浏览器即可。

基于对象——JavaScript是一种基于对象的语言，提供内置对象，用户可以根据需要来创建对象，通过调用对象的方法和属性来实现页面的某些特效。JavaScript不是一门纯面向对象的语言，语法灵活。

基于事件驱动——事件驱动是指在页面中执行某种操作时所产生的动作。浏览器根据用户的操作进行响应，并执行相应的JavaScript脚本。

JavaScript规范

浏览器解析JavaScript脚本时，会忽略标识符与运算符之间的多余的空白字符；
每条语句单独占一行，并以英文分号结束。
代码要有缩进，以增加代码的层差感。

JavaScript使用形式

在页面中使用JavaScript的三种形式：行内JavaScript脚本，内部JavaScript脚本，外部JavaScript脚本。

行内JavaScript脚本：<img src="" οnclick="alret('XXXXX')"/>点击图片触发JavaScript脚本。

内部JavaScript脚本：将JavaScript脚本提取出来统一放到<script></script>标签中，称为内部的JavaScript脚本。<script>标签既可以位于<hred>标签也可以位于<body>内。<script type="text/javascript">

//脚本内容</script>

外部JavaScript脚本：将JavaScript与HTML代码彻底分离，类似于CSS文件，在<script>标签中导入。JavaScript文件的后缀为.js，<script type="text/javascript" src="Js文件名"></script>

基本语法

标识符命名规则：

与Java的基本相同。不能与javaScript中的关键字相同。推崇使用小写形式与骆驼命名法(骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母)

关键字(Reserved Words)：

关键字是指JavaScript中预定义的，有特变意义的标识符，

JavaScript关键字
abstract	arguments	boolean	break	case	catch	byte
char	calss	const	continue	debugger	default	delete
do	double	else	enum	eval	export	extends
false	final	finally	float	for	function	goto
if	implements	import	in	instanceof	int	interface
let	long	native	new	null	package	private
protented	public	return	short	static	super	switch
synchronized	this	throw	throws	transient	true	try
typeof	ver	void	volatile	while	with	yield

数据类型：

在JavaScript中，变量的类型可以改变，但某一时刻的类型是确定的，常见的数据类型有String，Boolean，Array，Number，Undefinded等类型。

**JavaScript常用类型**
String	字符串是由有‘’\|\|“”括起来的0~n个字符
Boolean	布尔类型包括true与false
Null	表名某个变量值为空
Undefined	当声明的变量为初始化时，默认值为undfined
Array	一系列变量或者函数的集合，可以存放类型相同或不同的数据的集合，JavaScript数组的length属性是可变的，
Number	JavaScript中数值类型可以是32位的整数，或64位的浮点数，整数可以是十/八/十六进制
Function	JavaScript函数是一种特殊的对象数据类型，可以被存储在变量，数组或对象
Obiect	通过属性和方法定义的软件对象：对象中的命名变量称为属性，对象中的函数称为方法，常见的对象string,Date,Math和Array等

变量的定义：var 变量1[变量2……]；在JavaScript中可以不用定义直接使用。

变量类型：与Java不同JavaScript中的变量是弱数据类型，在声明变量时不需要指明变量的数据类型，类型由所赋值确定，动态改变，通过typeof运算符或typeof()函数可以获取当前数据类型，例：typeof X；typeof(X);

变量的作用域：

全局变量：未定义的变量直接赋值时，浏览器会将变量定义为全局变量。而未定义变量直接使用会报错。

局部变量：与Java一样。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>变量的赋值
      </title>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      //定义变量时进行赋值
     
    
   
    
     
    
    
             
      var goodName = 
      "护手霜";
     
    
   
    
     
    
    
             
      //定义变量后，进行赋值
     
    
   
    
     
    
    
             
      var prodcutAddress;
     
    
   
    
     
    
    
     
              prodcutAddress = 
      "青岛";
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      //多变量同时定义，并赋值
     
    
   
    
     
    
    
             
      var tPrice = jdPrice = ddPrice = 
      88;
     
    
   
    
     
    
    
             
      //将表达式的值赋给变量
     
    
   
    
     
    
    
             
      var price = tPrice * 
      0.8;
     
    
   
    
     
    
    
             
      document.write(goodName);
     
    
   
    
     
    
    
             
      document.write(tPrice)
     
    
   
    
     
    
    
             
      window.alert(prodcutAddress);
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

注释与Java一样。

赋值，算数，逻辑，比较运算符，三元运算符与Java一样。比较运算符多(!==严格不等于(值类型不相同为真，反之),===严格等于(值，类型相同为真，反之))与==的区别：==支持自动类型转换，忽略数据类型转换。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>算术运算符
      </title>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     	
      // 向文档中添加信息,
     
    
   
    
     
    
    
             
      document.write(
      "<h3>下面演示算术运算符的用法：</h3>");
     
    
   
    
     
    
    
             
      document.write(
      "9+4=" + (
      9 + 
      4) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(
      "9-4=" + (
      9 - 
      4) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(
      "9*4=" + (
      9 * 
      4) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(
      "9/4=" + (
      9 / 
      4) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(
      "9%4=" + (
      9 % 
      4) + 
      ";<br/>");
     
    
   
    
     
    
    
     		
      //Javascript支持链式操作
     
    
   
    
     
    
    
             
      var a = b = c = d = 
      9;
     
    
   
    
     
    
    
             
      document.write(a + 
      "++结果是：" + (a++) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(
      "++" + b + 
      "结果是：" + (++b) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(c + 
      "--结果是：" + (c--) + 
      ";<br/>");
     
    
   
    
     
    
    
             
      document.write(
      "--" + d + 
      "结果是：" + (--d) + 
      ";<br/>");
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

流程控制：

分支结构，if条件语句与switch语句(default(default子句可以放到switch语句的开始位置和末尾)，

循环结构：while循环，do……while循环，for循环，for in循环(for in循环是JavaScript提供的特殊的循环，可以对字符串，数组，对象集合，对象属性等进行遍历 for(i in Object){}i表示索引)

转移语句：btrak ,continue,return。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>switch语句
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      var authority=
      "管理员";
     
    
   
    
     
    
    
     		
      document.write(
      "<h3>"+authority+
      "的权限如下：</h3>");
     
    
   
    
     
    
    
             
      switch(authority){
     
    
   
    
     
    
    
     			
      case 
      "管理员":
     
    
   
    
     
    
    
     				
      document.write(
      "用户管理<br/>商品管理<br/>商品类型管理<br/>系统管理<br/>个人信息<br/>退出系统");
     
    
   
    
     
    
    
     				
      break;
     
    
   
    
     
    
    
     			
      case 
      "店主":
     
    
   
    
     
    
    
     				
      document.write(
      "商品管理<br/>商品类型管理<br/>个人信息<br/>退出系统");
     
    
   
    
     
    
    
     				
      break;
     
    
   
    
     
    
    
     			
      case 
      "普通会员":
     
    
   
    
     
    
    
     				
      document.write(
      "个人信息<br/>退出系统");
     
    
   
    
     
    
    
     				
      break;
     
    
   
    
     
    
    
     			
      default:
     
    
   
    
     
    
    
     				
      document.write(
      "漫步时尚广场");
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

支持三元运算法:


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>if条件语句
      </title>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      // 三元运算符
     
    
   
    
     
    
    
             
      document.write(
      11 > 
      '11' ? 
      "数字11大于字符'11'" : 
      "数字11不大于字符'11'");
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

with语句：通过with语句简化，例：<script type="text/javascript">with(document){write("<table border='1'>");}</script>


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>break和continue的用法
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
             
      /* 对图片标签进行修饰 */
     
    
   
    
     
    
    
             
     
    
   
    
     
    
    
             
      img {
     
    
   
    
     
    
    
                 
      /* 设置宽度 */
     
    
   
    
     
    
    
                 
      width: 
      80px;
     
    
   
    
     
    
    
                 
      /* 摄者高度 */
     
    
   
    
     
    
    
                 
      height: 
      80px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      // 以循环的方式将所有图片循环输出
     
    
   
    
     
    
    
             
      for (
      var i = 
      1; i < 
      9; i++) {
     
    
   
    
     
    
    
                 
      document.write(
      "<img src='images/face" + i + 
      ".jpg' />");
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
      document.write(
      "<br/>");
     
    
   
    
     
    
    
             
      for (
      var i = 
      1; i < 
      9; i++) {
     
    
   
    
     
    
    
                 
      if (i % 
      3 == 
      0) {
     
    
   
    
     
    
    
                     
      document.write(
      "<img src='images/noPic.jpg' />");
     
    
   
    
     
    
    
                     
      continue;
     
    
   
    
     
    
    
     
                  }
     
    
   
    
     
    
    
                 
      if (i % 
      8 == 
      0) {
     
    
   
    
     
    
    
                     
      break;
     
    
   
    
     
    
    
     
                  }
     
    
   
    
     
    
    
                 
      document.write(
      "<img src='images/face" + i + 
      ".jpg' />");
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

函数：

一组延迟动作集的定义，可以通过事件触发或在其他脚本进行调用。在JavaScript中，通过函数对脚本有效的组织，使脚本更加结构化，模块化。

**预定义函数**
parseInt()	将字符串转换成整形，存在非法值时停止转换，都是非法值时返回NaN，小数点后截断
parseFloat()	将字符串转换为浮点型，不是数字返回NaN
isNaN()	测试是否是一个数字。布尔型,是返回false，否则返回true
idFinite()	测试是否是一个无穷，如果是，返回一个false，布尔值
escape()	将字符串转换为Unicode码
unescape()	解码由escape函数编码的字符
eval()	计算表达式的结果，若是脚本，则执行相应脚本
alert()	显示一个提醒对话框，包括一个OK按钮
confirm()	显示一个确认对话框，包括OK(返回true)和Cancel(false)按钮
prompt()	显示一个输入对话框，提示等待用户输入

自定义函数：在JavaScript为弱数据类型语言，自定义函数时不需要声明函数的参数类型返回类型，javaScript目前支持的自定义方式有命名函数，匿名函数，对象函数和自调用函数。

命名函数的定义：函数由函数定义和函数调用两部分组成。在同一个<script></script>标签中，JavaScript允许函数的调用在函数定义之前，不同的<script>标签中只能放到定义之后。

语法：funtion<定义函数关键字> funName<函数名>（[parameters]<型参数逗号隔开>）{

statementes;<函数体>[return expression];<返回值，没有时返回undefined>}


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>自定义函数1-统计输入数值的各位数字之和
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
       
     
    
   
    
     
    
    
     		
      //获取键盘输入（无参函数的定义）
     
    
   
    
     
    
    
            
      function input(){
     
    
   
    
     
    
    
     		   
      return prompt(
      "请输入一个整数，然后统计改数的各位数字之和。");
     
    
   
    
     
    
    
     
      	   }
     
    
   
    
     
    
    
     	   
      //统计各位数字之和（有参函数的定义）
     
    
   
    
     
    
    
     	   
      function count(data){
     
    
   
    
     
    
    
     		   
      var sum=
      0;
     
    
   
    
     
    
    
     		   
      for(
      var i 
      in data){
     
    
   
    
     
    
    
     
      			 sum=sum+
      parseInt(data[i]);   
     
    
   
    
     
    
    
     
      		   }
     
    
   
    
     
    
    
     		   
      return sum;
     
    
   
    
     
    
    
     
      	   }
     
    
   
    
     
    
    
     	   
     
    
   
    
     
    
    
     		
      /*
     
    
   
    
     
    
    
     
       //函数的调用
     
    
   
    
     
    
    
     
       var data=input();
     
    
   
    
     
    
    
     
       var sum=count(data);
     
    
   
    
     
    
    
     
       alert(data+"中的各位数字之和为："+sum);
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
         
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //函数的调用
     
    
   
    
     
    
    
     	   
      var data=input();
     
    
   
    
     
    
    
     	   
      var sum=count(data);
     
    
   
    
     
    
    
     
      	   alert(data+
      "中的各位数字之和为："+sum);
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
        
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

匿名函数的定义：前端经常使用，通过表达式来定义函数，定义格式与命名函数基本相同，没有函数名称，函数以分号结束，需要使用变量接受，方便后面函数调用；

语法：var 变量=function ([parameters]){statementes;[retunr expression];};


  
   
    
     
    
    
     
      <script type=
      "text/javascript">
     
    
   
    
     
    
    
     	
      // 匿名函数
     
    
   
    
     
    
    
             
      var f = 
      function(user) {
     
    
   
    
     
    
    
     
                  alert(
      "欢迎" + user + 
      "来到漫步时尚广场");
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
      var test = f;
     
    
   
    
     
    
    
     
              f(
      "admin");
     
    
   
    
     
    
    
     
              test(
      "admin");
     
    
   
    
     
    
    
     
          </script>

对象函数的定义：JavaScript提供Function类，用于定义函数。

语法：var funcName =new Function([parameters]<参数为字符串时逗号隔开>,statements;<字符串格式，也是函数的执行体，语句以分号隔开>);


  
   
    
     
    
    
     
      <script type=
      "text/javascript">
     
    
   
    
     
    
    
     	
      // 匿名函数参数和语句一字符串的形式串联起来，执行的时候直接传参
     
    
   
    
     
    
    
             
      var showInfo = 
      new 
      Function(
      "name", 
      "age", 
      "authority", 
      "address",
     
    
   
    
     
    
    
                 
      "alert('数据处理中……');" +
     
    
   
    
     
    
    
                 
      "return( '姓名：'+name+'，年龄：'+age+'，权限：'+authority+'，地址：'+address);");
     
    
   
    
     
    
    
     
              alert(showInfo(
      "guoqy", 
      30, 
      "管理员", 
      "青岛"));
     
    
   
    
     
    
    
     
          </script>

自调用函数：函数本身不会自动执行，只有调用时才会被执行，定义与调用一并实现。将函数的定义用小括号括主，说明是一个函数表达式，函数表达式后面紧跟一对小括号，表示自动调用。

语法：(function ([parameters]<型参可选>){statementes; [return 表达式];})([params]<实参，调用时传入数据>);函数可以时候使用外部变量


  
   
    
     
    
    
     
      <script type=
      "text/javascript">
     
    
   
    
     
    
    
     	
     
    
   
    
     
    
    
             
      var user = 
      "guoqy";
     
    
   
    
     
    
    
     
              (
      function(user) {
     
    
   
    
     
    
    
     
                  alert(
      "欢迎" + user + 
      "来到漫步时尚广场");
     
    
   
    
     
    
    
     
              })(user);
     
    
   
    
     
    
    
     
          </script>

JavaScript对象

JavaScript是一种基于对象的语言。对象是一种特殊的数据类型，有变量和函数共用构成，其中变量称为对象的属性，函数称为对象的方法，对象分为内置对象和自定义对象；

内置对象：

Array数组对象：

使用单独的变量名存储有序的数据集合，可以将不同的数据类型的数据存放在一个数组中，创建数组对象，


  
   
    
     
    
    
     
      new 
      Array（）
      //使用无参构造函数创建数组，返回一个空数组，数组长度为0 ；
     
    
   
    
     
    
    
     
      new 
      Array（size）
      //使用一个参数的构造函数时，返回一个长度为size的数组，数组中元素默认为undefined；new Array（多个参数）//使用参数指定的初值来初始化数组，长度为参数个数。
     
    
   
    
     
    
    
     
      var 数组名 = [多个参数];
      //简写形式创建数组；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>Array对象常用的方法
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //使用构造方法创建数组对象
     
    
   
    
     
    
    
     		
      var goodsTypes=
      new 
      Array();
     
    
   
    
     
    
    
     		
      // 给对象赋值
     
    
   
    
     
    
    
     
      		goodsTypes[
      0]=
      "男装";
     
    
   
    
     
    
    
     
      		goodsTypes[
      1]=
      "女装";
     
    
   
    
     
    
    
     		
      // 初始化的时候直接赋值
     
    
   
    
     
    
    
     		
      var foodTypes=
      new 
      Array(
      "川菜",
      "鲁菜",
      "粤菜");
     
    
   
    
     
    
    
     		
      // 指定初始内存的数组
     
    
   
    
     
    
    
     		
      var movieTypes=
      new 
      Array(
      8);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      //使用简写形式创建数组对象
     
    
   
    
     
    
    
     		
      var foods=[
      "兰州拉面",
      "潍坊火烧",
      "北京烤鸭",
      "德州扒鸡"];
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      //数组属性的使用
     
    
   
    
     
    
    
     		
      var movies=
      new 
      Array(
      "分歧者2:绝地反击",
      "疯狂的麦克斯：狂暴之路",
      "复仇者联盟2:奥创纪元",
      "飓风营救4");
     
    
   
    
     
    
    
     		
      // constructor 返回对创建此对象的数组函数的引用
     
    
   
    
     
    
    
     		
      if(movies.constructor==
      String){
     
    
   
    
     
    
    
     
      			alert(
      "movies是个字符串对象");
     
    
   
    
     
    
    
     
      		}
      else 
      if(movies.constructor==
      Array){
     
    
   
    
     
    
    
     
      			alert(
      "movies是个数组对象，数组中元素的个数是："+movies.length+
      "\n------------------------\n"+movies.constructor);
     
    
   
    
     
    
    
     
      		}
      else 
      if(movies.constructor==
      Date){
     
    
   
    
     
    
    
     
      			alert(
      "movies是个日期对象");
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // 构造一个长度为20 的数组
     
    
   
    
     
    
    
     		
      var a=
      new 
      Array(
      20);
     
    
   
    
     
    
    
     
      		alert(a.length);
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

Array对象的属性包括constructor(返回创建对象的构造函数的引用(String/Array等))，length(数组长度)，prototype(为对象添加属性方法)

数组对象的常用方法

concat()	连接两个或多个数组，返回合并后数组，原数组不变move.concat(asd);	reverse()	反转数组
join(“ ”)	返回数组中所有元素的连接字符串，用指定符号连接	slice()	从已有的数组中返回选定元素
push()	向数据末尾添加一个或多个元素，返回新长度	sort()	对数组元素排序
pop()	删除并返回数组中的最后一个元素，	splice()	向数组中添加或删除一个多个元素，返回删除元素.类似于元素的替换
shift()	删除并返回数组中的第一个元素	UNshift()	开头添加一个或多个元素，返回新长度

ArrayObject.concat(param1,param2,……paramX):

//至少一个参数，值或者数组对象，逗号隔开，返回合并数组，原数组不变，

ArrayObject.join(separator)；

//参数separrtor为分隔符，默认逗号，返回字符串，separator将元素连接;

ArrayObject.push(newElement1,newElement2,……newElementX)

//至少一个参数，不创建新数组，返回新长度，

ArrayObject.slice(start,[end])

//start必须表示开始位置，end表示结束，默认结尾，允许负值，-1表示最后一个。

ArrayObject.sort([sortby]);

//参数为排序函数，可选，默认字符编码大小排序，没有返回值。

ArrayObject.splice(index,howmany,[item1,……item2])

//index(必须，删除元素开始位置，可负)，howmany(必须，删除数量，0表不删除)，当删除返回删除元素，item1(可选，添加或替换的新元素，没有返回值)；


  
   
    
     
    
    
     
       <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>数组对象的用法
      </title>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      var movies = 
      new 
      Array(
      "绝地反击", 
      "狂暴之路", 
      "奥创纪元", 
      "飓风营救");
     
    
   
    
     
    
    
             
      var newMovie = 
      "何以笙箫默";
     
    
   
    
     
    
    
             
      // 将数组合并
     
    
   
    
     
    
    
             
      var hotMovies = movies.concat(newMovie);
     
    
   
    
     
    
    
             
      //调用函数
     
    
   
    
     
    
    
     
              showMovies(movies, 
      "原来影片");
     
    
   
    
     
    
    
     
              showMoviesByJoin(hotMovies, 
      "热映影片");
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      //手动将数组显示出来
     
    
   
    
     
    
    
             
      function showMovies(movies, description) {
     
    
   
    
     
    
    
                 
      document.write(description + 
      "：<hr/>\t");
     
    
   
    
     
    
    
                 
      for (
      var i = 
      0; i < movies.length; i++) {
     
    
   
    
     
    
    
                     
      document.write(movies[i]);
     
    
   
    
     
    
    
                     
      if (i != movies.length - 
      1) {
     
    
   
    
     
    
    
                         
      document.write(
      "、");
     
    
   
    
     
    
    
     
                      }
     
    
   
    
     
    
    
     
                  }
     
    
   
    
     
    
    
                 
      document.write(
      "<hr/>");
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
      //使用join方法将数组显示出来
     
    
   
    
     
    
    
             
      function showMoviesByJoin(movies, description) {
     
    
   
    
     
    
    
                 
      document.write(description + 
      "：<hr/>\t");
     
    
   
    
     
    
    
                 
      //join将字符串以指定的字符串连接
     
    
   
    
     
    
    
                 
      document.write(movies.join(
      "_"));
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
         
      <br/> **************************
      <br/>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      var foods = 
      new 
      Array();
     
    
   
    
     
    
    
     
              foods[
      0] = 
      "兰州拉面";
     
    
   
    
     
    
    
     
              foods[
      1] = 
      "肉夹馍";
     
    
   
    
     
    
    
             
      // 向数组中添加元素
     
    
   
    
     
    
    
     
              foods.push(
      "潍坊火烧");
     
    
   
    
     
    
    
             
      //向数组末尾添加元素， 返回添加元素后的长度
     
    
   
    
     
    
    
             
      var length = foods.push(
      "泰山火烧");
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>当前数组的长度：" + length);
     
    
   
    
     
    
    
             
      // 使用哦join方法连接字符串
     
    
   
    
     
    
    
     
              showFoodsByJoin(foods);
     
    
   
    
     
    
    
             
      // 删除并返回数组中最后个元素
     
    
   
    
     
    
    
             
      var lastFood = foods.pop();
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>最后一个美食为：" + lastFood);
     
    
   
    
     
    
    
             
      // 删除并返回数组中第一个元素
     
    
   
    
     
    
    
             
      var firstFood = foods.shift();
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>第一个美食为：" + firstFood);
     
    
   
    
     
    
    
     
              showFoodsByJoin(foods);
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
              foods.push(
      "周黑鸭");
     
    
   
    
     
    
    
     
              foods.push(
      "流亭猪蹄");
     
    
   
    
     
    
    
     
              foods.push(
      "德州扒鸡");
     
    
   
    
     
    
    
     
              showFoodsByJoin(foods);
     
    
   
    
     
    
    
     
              foods.unshift(
      "淄博烧饼");
     
    
   
    
     
    
    
     
              showFoodsByJoin(foods);
     
    
   
    
     
    
    
             
      //元素的替换，从第二个开始，替换2个，替换为北京烤鸭
     
    
   
    
     
    
    
     
              foods.splice(
      2, 
      2, 
      "北京烤鸭");
     
    
   
    
     
    
    
     
              showFoodsByJoin(foods);
     
    
   
    
     
    
    
             
      //删除第1个和第四个
     
    
   
    
     
    
    
             
      var betterFood = foods.slice(
      1, 
      4);
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>获赞的美食：" + betterFood);
     
    
   
    
     
    
    
             
      // 数组的反转
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>获赞的美食反向显示：" + betterFood.reverse());
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      var prices = [
      35, 
      82, 
      10, 
      16, 
      55];
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>排序前的数组：" + prices);
     
    
   
    
     
    
    
             
      // 数组的排序
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>默认的排序方式：" + prices.sort());
     
    
   
    
     
    
    
             
      // 指定比较器的数组的排序
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>指定排序方式的排序：" + prices.sort(sortNumber));
     
    
   
    
     
    
    
             
      //排序函数，比较器
     
    
   
    
     
    
    
             
      function sortNumber(a, b) {
     
    
   
    
     
    
    
                 
      return b - a;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      //使用join方法将数组显示出来
     
    
   
    
     
    
    
             
      function showFoodsByJoin(foods) {
     
    
   
    
     
    
    
                 
      document.write(
      "<hr/>中国美食：\t");
     
    
   
    
     
    
    
                 
      document.write(foods.join(
      "，"));
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

二维数组：没有二维和多维的概念，一维数组存放元素为一维数组实现，

创建二维数组：var as =new Array() as[0] =new Array(‘值’)……;||var as = [[],[],[]……]；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>二维数组的模拟
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var title=
      new 
      Array(
      "电影类型",
      "电影名称",
      "票价");
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      var movies=
      new 
      Array();
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		movies[
      0]=
      new 
      Array(
      "科幻",
      "《2012》",
      80);
     
    
   
    
     
    
    
     
      		movies[
      1]=
      new 
      Array(
      "爱情",
      "《何以笙箫默》",
      60);
     
    
   
    
     
    
    
     
      		movies[
      2]=
      new 
      Array(
      "喜剧",
      "《超能陆战队》",
      100);
     
    
   
    
     
    
    
     
      		movies[
      3]=
      new 
      Array(
      "战争",
      "《我是战士》",
      95);
     
    
   
    
     
    
    
     		
      //var movies=[["科幻","《2012》",80],["爱情","《何以笙箫默》",60],["喜剧","《超能陆战队》",100],["战争","《我是战士》",95]];
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      document.write(
      "<table border='1'>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     		
      for(
      var i=
      0;i<title.length;i++){
     
    
   
    
     
    
    
     			
      document.write(
      "<th>"+title[i]+
      "</th>");	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      for(
      var i=
      0;i<movies.length;i++){
     
    
   
    
     
    
    
     			
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      for(
      var j=
      0;j<movies[i].length;j++){
     
    
   
    
     
    
    
     				
      document.write(
      "<td>"+movies[i][j]+
      "</td>");	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     
      		}		
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     
      /* var array=new Array();
     
    
   
    
     
    
    
     
       array[0]=new Array("科幻","《2012》",80);
     
    
   
    
     
    
    
     
       array[1]=["爱情","《何以笙箫默》",60];
     
    
   
    
     
    
    
     
       array[2]="从1992年到2012年这二十年是本次太阳纪的最后一个周期，又被叫做“地球更新期”，其间一切都将面临净化和更新，然后人类就将进入新纪元";
     
    
   
    
     
    
    
     
       array[3]=88;*/
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

String字符串对象：

用于对文本字符串进行进行处理，设置文本的字体大小，字体颜色，上标和下标的操作。

字符串对象的创建：字面量类型(var name = " ")和new类型(var name=new String(""))

字符串类型是一个基本的数据类型，字符串对象是将字符串封装成一个对象。变量.toString（）//转换为字符串

使用字面量方式创建的字符串的类型为string，而通过new方式创建的返回String对象，仅使用构造方法没有new也是string。

可以使用typeof()函数或者typeof运算符查看字符串类型，String是构造函数，string为基本类型。string没有提供prototype原型对象，而String对象具有prototype原型对象，通过浏览器的端点试调可以查看。使用typeof()函数查看类型时，String返回function，String对象返回Object，string返回string。使用==比较时，string类型判断其中值是否相等，而String对象判断是否属于同一对象的引用。String对象一直有效，string在执行后销毁。

字符串对象的常用方法
anchor(name)	创建一个锚点元素(具有id或name特性而不是href特征的<a >标签)
bold()	用于将字符串加粗
charAt(index)	返回指定位置的字符
fontcolor(color)	用于指定字符串的字体颜色
fontsize(size)	用于指定字符串的显示尺寸，size为1~7的数字
indexOf(searchValue,[fromIndex])	返回searchValue在字符串中首次出现的位置，没有返回-1
slice(start,[end])	抽取重start到end的所有字符，允许负数
lastindexOf(searchValue,[fromIndex])	重后向前返回searchValue在字符串中首次出现的位置
substring(start,[stop])	截取start到stop-1的符串，不接受负数，
subsrt(start,[length])	同上
split(separator，[howmany])	把字符串分割为字符数组,(separator为字符串或者正则表达式，howmany]指定返回长度
sub()	如果位于<sub>标签中，用于把字符串显示为下标，
sup()	如果位于<sup>标签中，用于把字符串显示为上标，
toLowerCase()	用于把字符串转换为小写
toUpperCase()	转换为大写
search(regExp)	用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
replace(regExp/subStr,replacement)	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
march(searchValue/ergExp)	在字符串内检索指定的值，或找到一个或多个正则表达式的匹配


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>String常用的方法
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var name=
      "漫步时尚广场";
     
    
   
    
     
    
    
     		
      var result=
      "";
     
    
   
    
     
    
    
     		
      for(
      var i=
      0;i<name.length;i++){
     
    
   
    
     
    
    
     			
      // 返回指定索引的字符串
     
    
   
    
     
    
    
     			
      var str=name.charAt(i);
     
    
   
    
     
    
    
     			
      if(i%
      2==
      1){
     
    
   
    
     
    
    
     			
      // 将字符串加粗
     
    
   
    
     
    
    
     
      				str=str.bold();				
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      // 显示指定字符串的尺寸。
     
    
   
    
     
    
    
     
      			str=str.fontsize((i%
      7)+
      1);
     
    
   
    
     
    
    
     			
      if(i%
      3==
      0){
     
    
   
    
     
    
    
     				
      // 指定字符串的颜色
     
    
   
    
     
    
    
     
      				str=str.fontcolor(
      "red");
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      if(i%
      4==
      0){
     
    
   
    
     
    
    
     				
      //创建一个锚点
     
    
   
    
     
    
    
     
      				str=str.anchor(
      "anchor1");	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			result=result+str;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      document.write(
      "处理前的字符串："+name+
      "<br/>");
     
    
   
    
     
    
    
     		
      document.write(
      "处理后的字符串："+result+
      "<br/><hr/>");
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var movieContent=
      new 
      String(
      "大学时代的赵默笙，对法学系大才子何以琛，一段纯纯的校园爱情悄悄滋...");
     
    
   
    
     
    
    
     		
      var resultContent=
      "";
     
    
   
    
     
    
    
     		
      for(
      var i=
      0;i<movieContent.length;i++){
     
    
   
    
     
    
    
     			
      var str=movieContent.charAt(i);
     
    
   
    
     
    
    
     			
      if(i%
      4==
      1){
     
    
   
    
     
    
    
     				
      // 用于把字符串显示为上标
     
    
   
    
     
    
    
     
      				str=str.sup();
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      if(i%
      6==
      0){
     
    
   
    
     
    
    
     				
      // 用于把字符串显示为下标
     
    
   
    
     
    
    
     
      				str=str.sub();
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			resultContent=resultContent+str;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      document.write(
      "处理前的字符串："+movieContent+
      "<br/>");
     
    
   
    
     
    
    
     		
      document.write(
      "处理后的字符串："+resultContent+
      "<br/><hr/>");
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var movieName=
      "《何以笙箫默》之何以琛";
     
    
   
    
     
    
    
     		
      // 字符串的替换，将正则表达式替换为指定的字符串
     
    
   
    
     
    
    
     		
      document.write(
      "替换后的字符串："+movieName.replace(
      /何以琛/,
      "赵默笙"));		
     
    
   
    
     
    
    
     		
      document.write(
      "<br/><hr/>");
     
    
   
    
     
    
    
     		
      var songWords=
      "Two roads diverged in a yellow wood;I'd go back and rechoose if I could...";
     
    
   
    
     
    
    
     		
      // 以空格将字符串分割为字符数组。
     
    
   
    
     
    
    
     		
      var words=songWords.split(
      " ");
     
    
   
    
     
    
    
     		
      var wordsResult=
      "";
     
    
   
    
     
    
    
     		
      for(
      var i=
      0;i<words.length;i++){
     
    
   
    
     
    
    
     			
      if(i%
      2==
      0){
     
    
   
    
     
    
    
     				
      // 转换为大写
     
    
   
    
     
    
    
     
      				words[i]=words[i].toUpperCase();	
     
    
   
    
     
    
    
     
      			}
      else{
     
    
   
    
     
    
    
     				
      // 转换为小写
     
    
   
    
     
    
    
     
      				words[i]=words[i].toLowerCase();	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			wordsResult+=words[i]+
      " ";
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      document.write(wordsResult);
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

转义字符与其他类似；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>String字符串的截取
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var name=
      "漫步时尚广场";
     
    
   
    
     
    
    
     		
      var address=
      '中国·青岛·高新区';
     
    
   
    
     
    
    
     
      		alert(
      "name的类型是:"+
      typeof(name)+
      "\naddress的类型是:"+
      typeof(address));
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var movieName=
      new 
      String(
      "《何以笙箫默》之赵默笙");
     
    
   
    
     
    
    
     		
      var director=
      String(
      "刘俊杰");
     
    
   
    
     
    
    
     
      		alert(
      "movieName的类型是:"+
      typeof(movieName)+
      "\ndirector的类型是:"+
      typeof(director));
     
    
   
    
     
    
    
     		
      //返回指定字符在字符串中出现的位置
     
    
   
    
     
    
    
     		
      var index=movieName.indexOf(
      "箫");
     
    
   
    
     
    
    
     		
      //后向前返回searchValue在字符串中首次出现的位置
     
    
   
    
     
    
    
     		
      var lastIndex=movieName.lastIndexOf(
      "笙",
      4);
     
    
   
    
     
    
    
     		
      if(index!=
      -1){
     
    
   
    
     
    
    
     
      			alert(
      "'箫'在字符串'"+movieName+
      "'的位置是："+index);	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      if(lastIndex!=
      -1){
     
    
   
    
     
    
    
     
      			alert(
      "'箫'在字符串'"+movieName+
      "'的位置是："+lastIndex);	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // 截取start到stop-1的符串，不接受负数， 
     
    
   
    
     
    
    
     		
      var subName=movieName.substring(
      1,movieName.length
      -5);
     
    
   
    
     
    
    
     		
      //var subName=movieName.substring(movieName.length-5,1);
     
    
   
    
     
    
    
     		
      var familyName=director.slice(
      0,
      1);
     
    
   
    
     
    
    
     
      		alert(
      "影片名称为："+subName+
      "\n导演贵姓："+familyName);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

Data日期对象：

Javascript通过日期对象来操作日期和时间，通过日期对象的构造函数创建一个系统当前时间或指定的日期对象。

使用无参构造函数创建日期对象，返回系统当前时间的日期对象： new Date();

new Date（millisenconds）；参数表示毫秒数 new Date(month dd,yyyy hh:mm:ss);month表示英文月份

new Date（yyyy,MM,dd）;年月日 new Date(yyyy,MM,dd,hh,:mm:ss);年月日时分秒

getDate()	返回一个月中的某一天	getDay()	返回一周中的某一天
getMonth()	返回月份	getFullYear()	返回4位数字的年份//getFullYear(year,month,day),第一个必须，剩下可选
getHours()	返回Date对象的小时	getMinutes()	返回Date对象的分钟
getSeconds()	返回Date对象的秒数	getTime()	返回初始时间和到现在的毫秒数
setDate()	设置Date对象中的日期	setMonth()	设置Date对象中的月份
setFullYear()	设置Date对象中的年份	setHours()	设置Date对象的小时//setHours(hour,min,sec,millsec),第一必选，其他可选。
setMinutes()	设置Date对象中的分钟	setSeconds()	设置Date对象中的秒数
setTime()	以毫秒设置Date的对象		Math

范围大部分从0开始，到实际日期-1；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>日期对象的构造方法
      </title>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     	
      // 返回当前时间
     
    
   
    
     
    
    
             
      var myDate1 = 
      new 
      Date();
     
    
   
    
     
    
    
     		
      // 由指定的数值构造
     
    
   
    
     
    
    
             
      var myDate2 = 
      new 
      Date(
      1218253167595);
     
    
   
    
     
    
    
             
      var myDate3 = 
      new 
      Date(
      2015, 
      9, 
      2);
     
    
   
    
     
    
    
             
      var myDate4 = 
      new 
      Date(
      2015, 
      9, 
      2, 
      12, 
      08, 
      16);
     
    
   
    
     
    
    
             
      // 由字符串解析
     
    
   
    
     
    
    
             
      var myDate5 = 
      new 
      Date(
      "9/25/2015 9:25:38");
     
    
   
    
     
    
    
             
      var myDate6 = 
      new 
      Date(
      "April 25,2048");
     
    
   
    
     
    
    
             
      var myDate7 = 
      new 
      Date(
      "Apr 25,2048 17:32:16");
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
              showTime(myDate1);
     
    
   
    
     
    
    
     
              showTime(myDate2);
     
    
   
    
     
    
    
     
              showTime(myDate3);
     
    
   
    
     
    
    
     
              showTime(myDate4);
     
    
   
    
     
    
    
     
              showTime(myDate5);
     
    
   
    
     
    
    
     
              showTime(myDate6);
     
    
   
    
     
    
    
     
              showTime(myDate7);
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      //显示时间
     
    
   
    
     
    
    
             
      function showTime(myDate) {
     
    
   
    
     
    
    
                 
      var dateStr = 
      "";
     
    
   
    
     
    
    
                 
      var year = myDate.getFullYear();
     
    
   
    
     
    
    
     			
      // 月需要加1
     
    
   
    
     
    
    
                 
      var month = myDate.getMonth() + 
      1;
     
    
   
    
     
    
    
                 
      var date = myDate.getDate();
     
    
   
    
     
    
    
                 
      var hour = myDate.getHours();
     
    
   
    
     
    
    
                 
      var minute = myDate.getMinutes();
     
    
   
    
     
    
    
                 
      var second = myDate.getSeconds();
     
    
   
    
     
    
    
     
                  dateStr = dateStr + year + 
      "年" + month + 
      "月" + date + 
      "日 " + hour + 
      ":" + minute + 
      ":" + second + 
      "<br/>";
     
    
   
    
     
    
    
                 
      document.write(dateStr);
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>日期对象的常用方法
      </title>
     
    
   
    
     
    
    
          
      <style type="text/css">
      
     
    
   
    
     
    
    
     		
      img{
     
    
   
    
     
    
    
     			
      width:
      30px;
     
    
   
    
     
    
    
     			
      height:
      40px;	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </style>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //图片前缀
     
    
   
    
     
    
    
     		
      var filePrefix=
      "<img src='images/num_";
     
    
   
    
     
    
    
     		
      //图片后缀
     
    
   
    
     
    
    
     		
      var fileSuffix=
      ".jpg' />";
     
    
   
    
     
    
    
     		
      //创建一个系统时间
     
    
   
    
     
    
    
     		
      var myDate=
      new 
      Date();
     
    
   
    
     
    
    
     
      		showTime(myDate);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		myDate.setFullYear(
      2036,
      7,
      9);
     
    
   
    
     
    
    
     
      		myDate.setHours(
      11,
      23,
      46);
     
    
   
    
     
    
    
     
      		showTime(myDate);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		myDate.setDate(myDate.getDate()+
      5);		
     
    
   
    
     
    
    
     
      		showTime(myDate);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      //显示时间
     
    
   
    
     
    
    
     		
      function showTime(myDate){	
     
    
   
    
     
    
    
     			
      var dateStr=
      "";
     
    
   
    
     
    
    
     			
      var year=myDate.getFullYear();
     
    
   
    
     
    
    
     			
      var month=myDate.getMonth()+
      1;
     
    
   
    
     
    
    
     			
      var date=myDate.getDate();
     
    
   
    
     
    
    
     			
      var hour=myDate.getHours();
     
    
   
    
     
    
    
     			
      var minute=myDate.getMinutes();
     
    
   
    
     
    
    
     			
      var second=myDate.getSeconds();
     
    
   
    
     
    
    
     			
     
    
   
    
     
    
    
     
      			dateStr=dateStr+num2Image(year)+
      "<img src='images/year.jpg'/>"
     
    
   
    
     
    
    
     
      					+num2Image(fixTime(month))+
      "<img src='images/month.jpg'/>"
     
    
   
    
     
    
    
     
      					+num2Image(fixTime(date))+
      "<img src='images/date.jpg'/>"
     
    
   
    
     
    
    
     
      					+num2Image(fixTime(hour))+
      "<img src='images/hour.jpg'/>"
     
    
   
    
     
    
    
     
      					+num2Image(fixTime(minute))+
      "<img src='images/minute.jpg'/>"
     
    
   
    
     
    
    
     
      					+num2Image(fixTime(second))+
      "<img src='images/second.jpg'/><br/>";
     
    
   
    
     
    
    
     			
     
    
   
    
     
    
    
     			
      document.write(dateStr);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //将数字通过图片显示出来
     
    
   
    
     
    
    
     		
      function num2Image(num){
     
    
   
    
     
    
    
     			
      var str=num.toString();
     
    
   
    
     
    
    
     			
      var result=
      "";
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<str.length;i++){
     
    
   
    
     
    
    
     				
      var c=str.charAt(i);
     
    
   
    
     
    
    
     
      				result=result+filePrefix+c+fileSuffix;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return result;			
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //修正时间，1~9时自动在前面添加0进行修正
     
    
   
    
     
    
    
     		
      function fixTime(time){
     
    
   
    
     
    
    
     			
      if(time<
      10){
     
    
   
    
     
    
    
     				
      return 
      "0"+time;	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return time;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

Math数学对象：没有构造方法，可以直接使用；

Math常用属性
E	返回算数常量e，
IN2	返回2的自然对数，约2.718
LN10	返回10的自然对数，约2.302
LOG2E	返回以2为底的e的对数，约1.442
LOG10E	返回以10为底的e的对数，约0.434
PI	返回圆周率约3.1415926
SORT2	返回2 的平方根约1.414
SQRT1_2	返回2的平方根的倒数，约0.7071


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>数学对象的常用属性
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      document.write(
      "<br/>Math.PI="+
      Math.PI);
     
    
   
    
     
    
    
             
      document.write(
      "<br/>Math.E="+
      Math.E);
     
    
   
    
     
    
    
             
      document.write(
      "<br/>Math.LN2="+
      Math.LN2);
     
    
   
    
     
    
    
             
      document.write(
      "<br/>Math.LN10="+
      Math.LN10);
     
    
   
    
     
    
    
             
      document.write(
      "<br/>Math.LOG2E="+
      Math.LOG2E);
     
    
   
    
     
    
    
             
      document.write(
      "<br/>Math.LOG10E="+
      Math.LOG10E);
     
    
   
    
     
    
    
         
     
    
   
    
     
    
    
             
      document.write(
      "<br/>半径为4的圆的面积："+circularArea(
      4));
     
    
   
    
     
    
    
             
      document.write(
      "<br/>半径为8、高为10的圆柱的体积："+cylinderCapacity(
      8,
      10));
     
    
   
    
     
    
    
             
      function circularArea(radius){
     
    
   
    
     
    
    
                 
      return 
      Math.PI*radius*radius;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
      function cylinderCapacity(radius,height){
     
    
   
    
     
    
    
                 
      return 
      Math.PI*radius*radius*height;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

Math的常用方法

Math的常用方法
ads(x)	绝对值	ceil(x)	向上取整	floor(x)	向下取整
round(x)	四舍五入	exp(x)	e的指数	log(x)	数字的自然对数
max(x)	最大值	min(x)	最小值	pow(x，y)	x的y次
sqrt(x)	平方根	random()	0~1随机数	(a)sin/cos/tan(x)	计算(反)正弦余弦正切


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>数学对象的常用方法
      </title>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      var num = 
      10;
     
    
   
    
     
    
    
             
      document.write(
      "随机生成" + num + 
      "个整数：");
     
    
   
    
     
    
    
             
      var array = [];
     
    
   
    
     
    
    
             
      var maxNum = 
      0;
     
    
   
    
     
    
    
             
      var minNum = 
      0;
     
    
   
    
     
    
    
             
      for (
      var i = 
      0; i < num; i++) {
     
    
   
    
     
    
    
                 
      // 用于生成随机数
     
    
   
    
     
    
    
                 
      var tmp = 
      Math.random() * 
      100
     
    
   
    
     
    
    
                     
      // 向下取整
     
    
   
    
     
    
    
     
                  array[i] = 
      Math.floor(tmp);
     
    
   
    
     
    
    
                 
      document.write(array[i] + 
      "\t");
     
    
   
    
     
    
    
                 
      if (i == 
      0) {
     
    
   
    
     
    
    
     
                      maxNum = array[
      0];
     
    
   
    
     
    
    
     
                      minNum = array[
      0];
     
    
   
    
     
    
    
     
                  } 
      else {
     
    
   
    
     
    
    
     
                      maxNum = 
      Math.max(maxNum, array[i]);
     
    
   
    
     
    
    
     
                      minNum = 
      Math.min(minNum, array[i]);
     
    
   
    
     
    
    
     
                  }
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
             
      document.write(
      "<br/>随机数中的最大数为：" + maxNum);
     
    
   
    
     
    
    
             
      document.write(
      "<br/>随机数中的最小数为：" + minNum);
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>");
     
    
   
    
     
    
    
             
      var randomNum = 
      60 + 
      Math.random() * 
      40;
     
    
   
    
     
    
    
             
      document.write(
      "随机生成一个60~100之间的数：" + randomNum);
     
    
   
    
     
    
    
     		
      //四舍五入
     
    
   
    
     
    
    
             
      document.write(
      "<br/>round()四舍五入的结果：" + 
      Math.round(randomNum));
     
    
   
    
     
    
    
     		
      // 向上取整
     
    
   
    
     
    
    
             
      document.write(
      "<br/>ceil()上取整的结果：" + 
      Math.ceil(randomNum));
     
    
   
    
     
    
    
     		
      // 向下取整
     
    
   
    
     
    
    
             
      document.write(
      "<br/>floor()下取整的结果：" + 
      Math.floor(randomNum));
     
    
   
    
     
    
    
             
      document.write(
      "<hr/>");
     
    
   
    
     
    
    
     		
      // 2的3次方
     
    
   
    
     
    
    
             
      document.write(
      "2的3次幂：" + 
      Math.pow(
      2, 
      3));
     
    
   
    
     
    
    
     		
      // 16 的平方根
     
    
   
    
     
    
    
             
      document.write(
      "<br/>16的平方根：" + 
      Math.sqrt(
      16));
     
    
   
    
     
    
    
     	    
      // 求正炫值
     
    
   
    
     
    
    
             
      document.write(
      "<br/>90<sup>o</sup>的正弦值是：" + 
      Math.sin(
      90 * 
      Math.PI / 
      180));
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

RregExp正则表达式对象

正则表达式是一种字符串匹配模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。Javascript提供RegExp对象完成正则表达式的匹配功能。

RegExp对象(正则表达式)的创建：

直接量方法：var = /pattern/attributes;例：var reg = /^\d*$/;匹配数字，没有返回空

构造函数的方法:var regExp=new RegExp("pattern","attributes");例:var regExp = new RegExp("^\\d*$"); \需要转义。

pattern表示要匹配的字符串或表达式(可以包括元字符，括号表达式以及量词，可以混合使用)，attributes表示操作属性，取值为g(全局匹配)、i(忽略大小写)、m(多行匹配，^匹配开头$匹配结尾)。

常见的元字符，括号表达式，量词
元字符	描述	表达式	描述	量词	描述
.	单个字符，除了换行,行结束符	[abc]	括号内的任意字符	n+	任何含至少一的n的字符串
\w	下划线任何单词，等价于[A-Za-z0-9_]	[^abc]	除了括号内的任意字符	n*	任何含0个或多个n的字符串
\W	任何非单词字符，等价于[^A-Za-z0-9_]	[0-9]	0-9的任意数字	n?	任何含一个或0个n的字符串
\d	查找数字	[a-z]	a-z的任意字符	n{x}	含x个n的序列的字符串
\D	非数字字符	[A-Z]	A-Z的任意字符	n{x,y}	含x或y个n的序列的字符串
\s	空白字符	[A-z]	A-z的任意字符	n{x,}	含至少x个n的序列的字符串
\S	非空白字符	(boy\|girl)	括号内的一项	n$	含任何结尾为n的字符串
\n	换行符	[a\|b\|c]	括号内的任意一个字符	^n	含任何开头为n的字符串
\r	回车符			? =n	其后紧跟字符串n的字符串
\xxx	八进制规格字符			?!n	没有紧跟字符串n的字符串
\xdd	十六进制规格字符

例；创建匹配电话号码的RegExp对象：

var srt = new RegExp("1[3|4|5|8][0-9]");\\手机 var srt = /^((\d{3}-d{8})|(\d{4}-\d{7}))$/; //电话

RegExp对象的方法

compile：编译正则表达式；编译后执行速度回提高，rgExp.compile(pattern, [flags])；

exec():检索字符串中正则表达式的匹配情况。匹配成功返回内容和所在位置。var result = RegExpObject.exec(string);result表示匹配的字符串，result.index表示位置。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>String字符串的截取
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var name=
      "漫步时尚广场";
     
    
   
    
     
    
    
     		
      var address=
      '中国·青岛·高新区';
     
    
   
    
     
    
    
     
      		alert(
      "name的类型是:"+
      typeof(name)+
      "\naddress的类型是:"+
      typeof(address));
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var movieName=
      new 
      String(
      "《何以笙箫默》之赵默笙");
     
    
   
    
     
    
    
     		
      var director=
      String(
      "刘俊杰");
     
    
   
    
     
    
    
     
      		alert(
      "movieName的类型是:"+
      typeof(movieName)+
      "\ndirector的类型是:"+
      typeof(director));
     
    
   
    
     
    
    
     		
      //返回指定字符在字符串中出现的位置
     
    
   
    
     
    
    
     		
      var index=movieName.indexOf(
      "箫");
     
    
   
    
     
    
    
     		
      //后向前返回searchValue在字符串中首次出现的位置
     
    
   
    
     
    
    
     		
      var lastIndex=movieName.lastIndexOf(
      "笙",
      4);
     
    
   
    
     
    
    
     		
      if(index!=
      -1){
     
    
   
    
     
    
    
     
      			alert(
      "'箫'在字符串'"+movieName+
      "'的位置是："+index);	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      if(lastIndex!=
      -1){
     
    
   
    
     
    
    
     
      			alert(
      "'箫'在字符串'"+movieName+
      "'的位置是："+lastIndex);	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // 截取start到stop-1的符串，不接受负数， 
     
    
   
    
     
    
    
     		
      var subName=movieName.substring(
      1,movieName.length
      -5);
     
    
   
    
     
    
    
     		
      //var subName=movieName.substring(movieName.length-5,1);
     
    
   
    
     
    
    
     		
      var familyName=director.slice(
      0,
      1);
     
    
   
    
     
    
    
     
      		alert(
      "影片名称为："+subName+
      "\n导演贵姓："+familyName);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

test():匹配成功返回true，否者返回false。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>正则表达式对象的用法
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var telephone=
      "0532-1234567";
     
    
   
    
     
    
    
     		
      //var telephone="0532-1234-5671234";
     
    
   
    
     
    
    
     		
      var moblie=
      "13789896666";
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      if(telephoneValidate(telephone)){
     
    
   
    
     
    
    
     			
      document.write(telephone+
      "座机号有效"+
      "<br/>");
     
    
   
    
     
    
    
     
      		}
      else{
     
    
   
    
     
    
    
     			
      document.write(telephone+
      "座机号无效"+
      "<br/>");
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      if(mobileValidate(moblie)){
     
    
   
    
     
    
    
     			
      document.write(moblie+
      "手机号有效"+
      "<br/>");
     
    
   
    
     
    
    
     
      		}
      else{
     
    
   
    
     
    
    
     			
      document.write(moblie+
      "手机号无效"+
      "<br/>");
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var num=
      "123a";
     
    
   
    
     
    
    
     		
      // 是否是数字
     
    
   
    
     
    
    
     		
      document.write(num+
      "："+(isDigit(num)?
      "是纯数字":
      "非纯数字")+
      "<br/><hr/>");		
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var content=
      "Qingdao, located in the southEast part of Shandong Province, is a beautiful SEASIDE city with clear air and enchanting SEA view. ";
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		contentValidate(content);
     
    
   
    
     
    
    
     	
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      //内容匹配查找
     
    
   
    
     
    
    
     		
      function contentValidate(content){
     
    
   
    
     
    
    
     			
      document.write(content+
      "<br/>");
     
    
   
    
     
    
    
     			
      var contentReg=
      new 
      RegExp(
      "Ea",
      "gi");
     
    
   
    
     
    
    
     			
      var i=
      1;
     
    
   
    
     
    
    
     			
      while((result=contentReg.exec(content))!=
      null){
     
    
   
    
     
    
    
     				
      document.write(
      "第"+i+
      "次匹配"+result+
      ",位置在"+result.index+
      "~"+contentReg.lastIndex+
      "<br/>");
     
    
   
    
     
    
    
     
      				i++;	
     
    
   
    
     
    
    
     
      			}			
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //座机号验证
     
    
   
    
     
    
    
     		
      function telephoneValidate(telephone){
     
    
   
    
     
    
    
     			
      var telephoneReg=
      /^((\d{3}-\d{8})|(\d{4}-\d{7}))$/; 
     
    
   
    
     
    
    
     			
      return telephoneReg.test(telephone);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //手机号码验证
     
    
   
    
     
    
    
     		
      function mobileValidate(mobile){
     
    
   
    
     
    
    
     			
      var mobileReg=
      new 
      RegExp(
      "1[3|4|5|8][0-9]{9}");
     
    
   
    
     
    
    
     			
      return mobileReg.test(mobile);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //判断字符串中是否是纯数字
     
    
   
    
     
    
    
     		
      function isDigit(str){
     
    
   
    
     
    
    
     			
      //var digitReg=/^\d*$/; 
     
    
   
    
     
    
    
     			
      var digitReg=
      new 
      RegExp(
      "^\\d*$");  
      // \在引号中需要转义 
     
    
   
    
     
    
    
     			
      return digitReg.test(str);  
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

String与RegExp：在String对象中有三种方法以RegExp对象为参数。

search(regExp)	检索与正则表达式相匹配的子字符串
replace(regExp/subStr,replacement)	替换一个与正则表达式匹配的子串
march(searchValue/ergExp)	在字符串内检索指定的值，或找到一个或多个正则表达式的匹配信息


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>字符串中使用正则表达式
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var replaceTxt=
      "\"七七事变\"78周年纪念日,两岸分别举行了一系列纪念活动，严惩分裂、破坏国家安全分子。"
     
    
   
    
     
    
    
     
      		replaceContent(replaceTxt);		
     
    
   
    
     
    
    
     		
      document.write(
      "<hr/>");
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var searchTxt=
      "\"地铁是铁路运输的一种形式，以地下运行为主的城市轨道交通系统\"";
     
    
   
    
     
    
    
     
      		searchContent(searchTxt);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var splitTxt=
      "baby、gril boy,man>woman";
     
    
   
    
     
    
    
     		
      document.write(
      "<hr/>乘坐人员包括：<br/>");
     
    
   
    
     
    
    
     
      		splitContent(splitTxt);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var matchTxt=
      "醉鬼三张在KTV娱乐，张三在看电影，张小三在斗地主，小张三在踢足球，张府老三练太极。";
     
    
   
    
     
    
    
     		
      document.write(
      "<hr/>"+matchTxt+
      "<br/>");
     
    
   
    
     
    
    
     
      		matchContent(matchTxt,
      true);
     
    
   
    
     
    
    
     		
      document.write(
      "<br/>");
     
    
   
    
     
    
    
     
      		matchContent(matchTxt);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      //字符串替换
     
    
   
    
     
    
    
     		
      function replaceContent(replaceTxt){	
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     			
      var replaceReg=
      /台独|分裂|破坏/g;	
     
    
   
    
     
    
    
     			
      var markStr=
      "**".fontcolor(
      "blue").bold();
     
    
   
    
     
    
    
     			
      var result=replaceTxt.replace(replaceReg,markStr);	
     
    
   
    
     
    
    
     			
      document.write(result);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //字符串替换
     
    
   
    
     
    
    
     		
      function searchContent(searchTxt){
     
    
   
    
     
    
    
     			
      var searchReg=
      /地铁|公交|轮渡|空运/;
     
    
   
    
     
    
    
     			
      // 检索于正则表达式相匹配的对象。
     
    
   
    
     
    
    
     			
      var result=searchTxt.search(searchReg);
     
    
   
    
     
    
    
     			
     
    
   
    
     
    
    
     
      			searchTxt=searchTxt.fontcolor(
      "#ee0000").big(
      5);
     
    
   
    
     
    
    
     			
      if(result!=
      -1){
     
    
   
    
     
    
    
     				
      document.write(searchTxt+
      "中涉及到了交通运输方面的信息。");	
     
    
   
    
     
    
    
     
      			}
      else{
     
    
   
    
     
    
    
     				
      document.write(searchTxt+
      "中没有涉及到交通运输方面的信息。");	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //字符串分割
     
    
   
    
     
    
    
     		
      function splitContent(splitTxt){
     
    
   
    
     
    
    
     			
      var splitReg=
      /,|_|、| |>/;
     
    
   
    
     
    
    
     			
      // 根据指定的表达式进行匹配
     
    
   
    
     
    
    
     			
      var array=splitTxt.split(splitReg);
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<array.length;i++){
     
    
   
    
     
    
    
     				
      document.write(array[i]+
      "<br/>");	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //字符串匹配
     
    
   
    
     
    
    
     		
      function matchContent(matchTxt,position){
     
    
   
    
     
    
    
     			
      //RegExp中没有使用g时，返回数组中有数组index（即匹配文本的起始地址）
     
    
   
    
     
    
    
     			
      var matchReg=
      "";
     
    
   
    
     
    
    
     			
      if(position){
     
    
   
    
     
    
    
     				
      //第一个或第二个字为"张"，"张"后面是"三"，"张"与"三"之间可以最多一个汉字
     
    
   
    
     
    
    
     
      				matchReg=
      new 
      RegExp(
      "[\u4e00-\u9fa5]?张[\u4e00-\u9fa5]?三");	
     
    
   
    
     
    
    
     				
      var array=matchTxt.match(matchReg);
     
    
   
    
     
    
    
     				
      for(
      var i=
      0;i<array.length;i++){
     
    
   
    
     
    
    
     					
      document.write(
      "第"+(i+
      1)+
      "次匹配&quot;"+array[i]+
      "&quot;，位置在"+array.index+
      "。");
     
    
   
    
     
    
    
     
      				}	
     
    
   
    
     
    
    
     
      			}
      else{
     
    
   
    
     
    
    
     
      				matchReg=
      new 
      RegExp(
      "[\u4e00-\u9fa5]?张[\u4e00-\u9fa5]?三",
      "g");
     
    
   
    
     
    
    
     				
      var array=matchTxt.match(matchReg);
     
    
   
    
     
    
    
     				
      for(
      var i=
      0;i<array.length;i++){
     
    
   
    
     
    
    
     					
      document.write(
      "第"+(i+
      1)+
      "次匹配&quot;"+array[i]+
      "&quot;，");
     
    
   
    
     
    
    
     
      				}	
     
    
   
    
     
    
    
     
      			}		
     
    
   
    
     
    
    
     
      		}	
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

自定义对象：

在JavaScript中，用户可以自定义对象，定义的对象的方式有5种：(方法后要有；)

原始方式，：var 对象名 = new Object(); 对象名.属性名 = value; 对象名 .方法名 = functionname | function(){};事先的函数或匿名函数；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>自定义对象-原始方式
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     	
      // 自定对象，原始方式
     
    
   
    
     
    
    
     		
      var goods=
      new 
      Object();
     
    
   
    
     
    
    
     
      		goods.name=
      "男士白领衬衣";
     
    
   
    
     
    
    
     
      		goods.type=
      "男装";
     
    
   
    
     
    
    
     
      		goods.price=
      "580";
     
    
   
    
     
    
    
     
      		goods.color=
      "white";
     
    
   
    
     
    
    
     
      		goods.showInfo=
      function(){
     
    
   
    
     
    
    
     
      			alert(
      "商品名称："+goods.name+
      "\n商品类型："+goods.type+
      "\n商品价格："+goods.price+
      "\n商品颜色："+goods.color);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     
      		goods.showColor=showColor;
     
    
   
    
     
    
    
     		
      function showColor(){
     
    
   
    
     
    
    
     
      			alert(
      "商品颜色："+goods.color);	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		goods.showInfo();
     
    
   
    
     
    
    
     
      		goods.showColor();
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

构造函数函数方式，：function 对象名(构造参数1，……){this.属性名 = value;this.方法名 = functionname | function(){…}}


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>自定义对象-构造函数方式
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //创建构造函数
     
    
   
    
     
    
    
     		
      function Goods(name,type,price,color){
     
    
   
    
     
    
    
     			
      this.name=name;
     
    
   
    
     
    
    
     			
      this.type=type;
     
    
   
    
     
    
    
     			
      this.price=price;
     
    
   
    
     
    
    
     			
      this.color=color;
     
    
   
    
     
    
    
     			
      this.showInfo=
      function(){
     
    
   
    
     
    
    
     
      				alert(
      "商品名称："+
      this.name+
      "\n商品类型："+
      this.type+
      "\n商品价格："+
      this.price+
      "\n商品颜色："+
      this.color);
     
    
   
    
     
    
    
     
      			};
     
    
   
    
     
    
    
     			
      this.showColor=showColor;
     
    
   
    
     
    
    
     			
      function showColor(){
     
    
   
    
     
    
    
     
      				alert(
      "商品颜色："+
      this.color);	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		}	
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      //创建对象实例
     
    
   
    
     
    
    
     		
      var goods1=
      new Goods(
      "男士衬衣",
      "男装",
      200,
      "白色");
     
    
   
    
     
    
    
     		
      var goods2=
      new Goods(
      "女士花裙",
      "女装",
      700,
      "红色");
     
    
   
    
     
    
    
     		
      //方法的调用
     
    
   
    
     
    
    
     
      		goods1.showInfo();
     
    
   
    
     
    
    
     
      		goods2.showColor();
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
         
     
    
   
    
     
    
    
     
      <!-- function ClassName([param1][,param2]...){
     
    
   
    
     
    
    
     
       this.propertyName=value;
     
    
   
    
     
    
    
     
       this.methodName=functionName | function (){...}
     
    
   
    
     
    
    
     
       }-->
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

原型方式，：object.prototype.属性名 = value；object.prototype.方法名 = functionname | function(){};为自定义和内置对象添加属性方法。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>自定义对象-原型方式
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //创建构造函数
     
    
   
    
     
    
    
     		
      function Goods(){
     
    
   
    
     
    
    
     
      		}	
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		Goods.prototype.name=
      "耐克运动鞋";
     
    
   
    
     
    
    
     
      		Goods.prototype.type=
      "鞋类";
     
    
   
    
     
    
    
     
      		Goods.prototype.price=
      1200;
     
    
   
    
     
    
    
     
      		Goods.prototype.color=
      "白色";
     
    
   
    
     
    
    
     
      		Goods.prototype.showInfo=
      function(){
     
    
   
    
     
    
    
     
      			alert(
      "商品名称："+
      this.name+
      "\n商品类型："+
      this.type+
      "\n商品价格："+
      this.price+
      "\n商品颜色："+
      this.color);
     
    
   
    
     
    
    
     
      		};
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      var goods=
      new Goods();
     
    
   
    
     
    
    
     		
      //方法的调用
     
    
   
    
     
    
    
     		
      //goods.showInfo();
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      //为Date对象添加日期格式化方法
     
    
   
    
     
    
    
     		
      Date.prototype.showTime=
      function(){
     
    
   
    
     
    
    
     			
      var dateStr=
      "";
     
    
   
    
     
    
    
     			
      var year=
      this.getFullYear();
     
    
   
    
     
    
    
     			
      var month=
      this.getMonth()+
      1;
     
    
   
    
     
    
    
     			
      var date=
      this.getDate();
     
    
   
    
     
    
    
     			
      var hour=
      this.getHours();
     
    
   
    
     
    
    
     			
      var minute=
      this.getMinutes();
     
    
   
    
     
    
    
     			
      var second=
      this.getSeconds();
     
    
   
    
     
    
    
     
      			dateStr=dateStr+year+
      "年"+month+
      "月"+date+
      "日 "+hour+
      ":"+minute+
      ":"+second+
      "<br/>";
     
    
   
    
     
    
    
     			
      return dateStr;
     
    
   
    
     
    
    
     
      		};
     
    
   
    
     
    
    
     		
      //为Array对象添统计某个元素数量的方法
     
    
   
    
     
    
    
     		
      Array.prototype.count=
      function(param){
     
    
   
    
     
    
    
     			
      var num=
      0;
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<
      this.length;i++){
     
    
   
    
     
    
    
     				
      if(
      this[i]==param){
     
    
   
    
     
    
    
     
      					num++;	
     
    
   
    
     
    
    
     
      				}
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return num;
     
    
   
    
     
    
    
     
      		};
     
    
   
    
     
    
    
     		
      //为Array对象添查找某个元素的方法
     
    
   
    
     
    
    
     		
      Array.prototype.search=
      function(param){
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<
      this.length;i++){
     
    
   
    
     
    
    
     				
      if(
      this[i]==param){
     
    
   
    
     
    
    
     					
      return 
      true;
     
    
   
    
     
    
    
     
      				}
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return 
      false;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //日期对象测试
     
    
   
    
     
    
    
     		
      var date=
      new 
      Date();
     
    
   
    
     
    
    
     		
      document.write(date.showTime());
     
    
   
    
     
    
    
     		
      //数组对象测试
     
    
   
    
     
    
    
     		
      var array=[
      3,
      6,
      8,
      30,
      3,
      7,
      6,
      3];
     
    
   
    
     
    
    
     		
      var countParam=
      6;
     
    
   
    
     
    
    
     		
      var searchParam=
      9;
     
    
   
    
     
    
    
     		
      document.write(
      "数组["+array+
      "]中包含元素'"+countParam+
      "'的个数："+array.count(countParam)+
      "<br/>");
     
    
   
    
     
    
    
     		
      document.write(
      "数组["+array+
      "]中"+(array.search(searchParam)?
      "":
      "不")+
      "包含元素"+searchParam);		
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
         
     
    
   
    
     
    
    
     
      <!-- function ClassName([param1][,param2]...){
     
    
   
    
     
    
    
     
       this.propertyName=value;
     
    
   
    
     
    
    
     
       this.methodName=functionName | function (){...}
     
    
   
    
     
    
    
     
       }-->
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

混合方式，：构造函数和原型方法结合；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>自定义对象-混合方式
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //创建构造函数
     
    
   
    
     
    
    
     		
      function Goods(name,type,price,color){
     
    
   
    
     
    
    
     			
      this.name=name;
     
    
   
    
     
    
    
     			
      this.type=type;
     
    
   
    
     
    
    
     			
      this.price=price;
     
    
   
    
     
    
    
     			
      this.color=color;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // 定义对象的方法
     
    
   
    
     
    
    
     
      		Goods.prototype.showInfo=
      function(){
     
    
   
    
     
    
    
     
      				alert(
      "商品名称："+
      this.name+
      "\n商品类型："+
      this.type+
      "\n商品价格："+
      this.price+
      "\n商品颜色："+
      this.color);
     
    
   
    
     
    
    
     
      		};
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      //创建对象实例
     
    
   
    
     
    
    
     		
      var goods1=
      new Goods(
      "男士衬衣",
      "男装",
      200,
      "白色");
     
    
   
    
     
    
    
     		
      var goods2=
      new Goods(
      "女士花裙",
      "女装",
      700,
      "红色");
     
    
   
    
     
    
    
     		
      //方法的调用
     
    
   
    
     
    
    
     
      		goods1.showInfo();
     
    
   
    
     
    
    
     
      		goods2.showInfo();
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

JSON(JavaScript Object Notation)方式。：

是一种基于ECMAScript的轻量级数据交换格式，采用完全独立于语言的文本格式，以{}的形式出现，属性与属性值成对。

var 对象名 = {属性名：属性值，方法名：function(){}}；

在数据传输过程中，JSON数据往往以字符串的形式进行传输，在页面中要通过JavaScript中eval()或Function对象的方式将字符串解析为JavaScript对象。var movie = eval("+JSON字符串+");alert(typeof(eval("({})"))); var movie = (new Function("","return","JSON字符串"))；


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>自定义对象-JSON方式
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //创建对象实例
     
    
   
    
     
    
    
     		
      var goods={
     
    
   
    
     
    
    
     			
      name:
      "男士衬衣",
     
    
   
    
     
    
    
     			
      type:
      "男装",
     
    
   
    
     
    
    
     			
      price:
      200,
     
    
   
    
     
    
    
     			
      color:
      "白色",
     
    
   
    
     
    
    
     			
      showInfo:
      function(){
     
    
   
    
     
    
    
     
      				alert(
      "商品名称："+
      this.name+
      "\n商品类型："+
      this.type+
      "\n商品价格："+
      this.price+
      "\n商品颜色："+
      this.color);	
     
    
   
    
     
    
    
     
      			},
     
    
   
    
     
    
    
     			
      showColor:
      function(){
     
    
   
    
     
    
    
     
      				alert(
      "商品颜色："+
      this.color);
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		};
     
    
   
    
     
    
    
     		
      //方法的调用
     
    
   
    
     
    
    
     
      		goods.showInfo();
     
    
   
    
     
    
    
     		
      document.write(goods.name);
     
    
   
    
     
    
    
     		
      //创建json对象
     
    
   
    
     
    
    
     		
      var customer={
     
    
   
    
     
    
    
     			
      name:
      "guoqy",
     
    
   
    
     
    
    
     			
      type:
      "admin",
     
    
   
    
     
    
    
     			
      // json对象可以包含json对象
     
    
   
    
     
    
    
     			
      address:{
     
    
   
    
     
    
    
     				
      province:
      "山东",
     
    
   
    
     
    
    
     				
      city:
      "青岛"	
     
    
   
    
     
    
    
     
      			},
     
    
   
    
     
    
    
     			
      // 可以包含数组
     
    
   
    
     
    
    
     			
      enjoy:[
      "购物",
      "科幻",
      "喜剧",
      "足球"],
     
    
   
    
     
    
    
     			
      order:[
     
    
   
    
     
    
    
     
      				{
     
    
   
    
     
    
    
     					
      name:
      "男士衬衣",
     
    
   
    
     
    
    
     					
      quantity:
      3
     
    
   
    
     
    
    
     
      				},
     
    
   
    
     
    
    
     
      				{
     
    
   
    
     
    
    
     					
      name:
      "耐克运动鞋",
     
    
   
    
     
    
    
     					
      quantity:
      2
     
    
   
    
     
    
    
     
      				}			
     
    
   
    
     
    
    
     
      			]
     
    
   
    
     
    
    
     
      		};
     
    
   
    
     
    
    
     		
      document.write(
      "用户名："+customer.name+
      "，权限："+customer.type+
      "，地区："
     
    
   
    
     
    
    
     
      		+customer.address.province+customer.address.city+
      "，爱好："+customer.enjoy);
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
      // 
     
    
   
    
     
    
    
     		
      var movieStr=
      '{'
     
    
   
    
     
    
    
     
      				+
      'name:"小时代",'
     
    
   
    
     
    
    
     
      				+
      'type:"爱情",'
     
    
   
    
     
    
    
     
      				+
      'price:80,'
     
    
   
    
     
    
    
     
      				+
      'showInfo:function(){'
     
    
   
    
     
    
    
     
      					+
      'document.write("影片名称："+this.name+",影片类型："+this.type+",票价："+this.price);'
     
    
   
    
     
    
    
     
      				+
      '}'
     
    
   
    
     
    
    
     
      			+
      '}';
     
    
   
    
     
    
    
     		
      //1.eval()方式 // 必须要加（）使用。
     
    
   
    
     
    
    
     		
      var movie1=
      eval(
      "("+movieStr+
      ")");
     
    
   
    
     
    
    
     
      		movie1.showInfo();
     
    
   
    
     
    
    
     		
      //2.Function对象方式
     
    
   
    
     
    
    
     		
      var movie2=(
      new 
      Function(
      "",
      "return "+movieStr))();
     
    
   
    
     
    
    
     
      		movie2.showInfo();
     
    
   
    
     
    
    
     		
      //与以下写法等价
     
    
   
    
     
    
    
     		
      var movieFunction=
      new 
      Function(
      "",
      "return "+movieStr);
     
    
   
    
     
    
    
     		
      var movie3=movieFunction();
     
    
   
    
     
    
    
     
      		movie3.showInfo();
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     		
     
    
   
    
     
    
    
     
      		alert(
      typeof(
      eval(
      "({})")));
     
    
   
    
     
    
    
     
      		alert(
      typeof(
      eval(
      "{}")));
     
    
   
    
     
    
    
     	
      </script> 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <!--{
     
    
   
    
     
    
    
     
       //对象的属性部分
     
    
   
    
     
    
    
     
       propertyName:value,
     
    
   
    
     
    
    
     
       //对象的方法部分
     
    
   
    
     
    
    
     
       methodName:function(){...}
     
    
   
    
     
    
    
     
      };-->
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

BOM与DOM编程

BOM模型(Browser Object Model ,浏览器对象模型)

定义JavaScript操作浏览器的接口，提供与浏览器窗口交互的功能，用于描述浏览器中对象与对象之间的层次关系的模型，提供了独立以页面内容并能够与浏览器窗口进行交互的对象结构。

				window
screen	history	loction	navigator	document	frames
				link	form	div	..	..

window对象

是BOM 的顶层对象，其他对象都是该对象的子对象，浏览器会为每一个页面自动创建window，document，location，navigator和history对象；

window对象是BOM模型中的最高一层，通过window 对象的属性和方法来实现对浏览器窗口的操作，

**window对象的属性**
closed	只读，返回窗口是否已被关闭
defaultStatus	可返回或设置窗口状态栏中的缺省内容，定义浏览器状态栏默认显示的内容
inerWidth	只读，窗口的文档显示区的宽度(单位为像素)IE不支持，可用document.documentElement或doc.body的clientHeight属性替代
name	当前窗口的名称
opener	可返回对创建该窗口的window对象的引用，只有表示顶层窗口的window对象的opener属性有效，框架无效
parent	如果当前窗口有父窗口，表示当前窗口的父窗口对象
self	只读，对窗口自身的引用
top	当前窗口的最顶层窗口对象
status	可返回或设置窗口状态栏中显示的内容，临时给变状态栏内容

在JavaScript中window对象为全局对象，在使用窗口的属性和方法时，允许以全局变量或系统函数的方式使用哦，

window对象的常用方法
alert()	显示带有一段消息和一个确认按钮的对话框
prompt()	显示可提示用户输入的对话框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
close()	关闭浏览器窗口
open(url,name,features,replace)	打开一个新的浏览器窗口或查找一个已命名的窗口,
createPopup()	创建一个pop-up窗口
focus()	可把键盘焦点给一个窗口
blur()	可把键盘焦点从顶层窗口移开
moveBy(x,y)	可相对当前窗口的坐标移动到指定的像素
moveTo(x,y)	可把窗口的左上角移动到一个指定的坐标(x,y),但不能移出屏幕
resizeTo(w,h)	把窗口大小调整到指定的宽度和高度
resizeBy()	根据指定的像素来调整窗口大小
scrollBy()	可把内容滚动指定的像素数
scrollTo()	可把内容滚动到指定的坐标
setTimeout(code,milisec)	在指定的毫秒数后调用函数或计算表达式，仅执行一次
setInterval(code,millisec)	按照指定的周期(毫秒)来调用函数或计算表达式
clearTimeout()	取消setTimeout()方法设置的计时器
clearInterval()	取消由setInterval()设置的计时器

var tagetWindow =window.open(url,name,features,replace);//返回一个窗口对象

url:声明新窗口显示文档URL,当URL为空字符串或省略时，新窗口将不会显示任何内容。
name：新窗口名称，可用于a,form标签target属性(框架名称),当name窗口存在时，open不创建窗口，返回窗口引用，featurres将被忽略。
features：声明新窗口的浏览的特征。默认为浏览器默认值，
特征值：（top,left,height,width,toolbar,titlebar,status,scrollbars,resiabar,menubar,location,fullscreen,direcries,channelmode）多个逗号隔开。

close():关闭指定的浏览器窗口。

setTimeout(code，millisec):设置一个计时器，在指定的时间间隔调用函数或计算表达式，执行一次。返回计时器ID；

clearTimeout（ID_Of_timeout）:取消上面的方法。

setInterval（code，millisec）：按照指定的计时器周期调用函数，返回计时器ID

clearInterval（ID_Of_Interval）：取消上面的定时器。

location对象：

包含当前页面的URL地址，如协议，主机名，端口号和路劲等信息；

location对象的属性列表
protocol	设置或返回当前URL协议
host	设置或返回当前URl 的主机名和端口号
hostname	设置或返回当前URL的主机名
port	设置或返回当前URL的端口部分
pathname	设置或返回当前URL的路径部分
href	设置或返回当前显示文档的完整URL(直接location也可以)
hash	URL的锚部分(#之后)
search	设置或返回当前URL的查询部分（问号后部分）

location对象的方法
assign(url)	可加载一个新的文档，与location.href实现的页面导航效果相同
reload(force)	用于重新加载当前文档，默认参数false，当参数为false且文档内容没有改变时,从缓存区从新加载文档，参数false但文档内容改变时,从服务器从新加载文档，当参数为true时，每次都从服务器加载文档，
replace(url)	使用一个新的文档取代当前文档，且不会在history对象中生成新的记录


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>location对象的属性
      </title>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      document.write(
      "<table border='1'>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>href</td>");
     
    
   
    
     
    
    
     			
      // 设置或返回当前显示文档的完整的url
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.href+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>protocaol</td>");
     
    
   
    
     
    
    
     			
      // 设置或返回当前url协议
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.protocol+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>host</td>");
     
    
   
    
     
    
    
     			
      // 设置返回当前url的主机名和端口号
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.host+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>hostname</td>");
     
    
   
    
     
    
    
     			
      // 设置或返回url的主机名
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.hostname+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>port</td>");
     
    
   
    
     
    
    
     			
      // 设置或返回url的端口号
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.port+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>hash</td>");
     
    
   
    
     
    
    
     			
      // 设置或返回url的片段标识符#后部分
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.hash+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>search</td>");
     
    
   
    
     
    
    
     			
      // 设置或返回url的查询部分
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.search+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
     		
      document.write(
      "<tr>");
     
    
   
    
     
    
    
     			
      document.write(
      "<td>pathname</td>");
     
    
   
    
     
    
    
     			
      //设置或返回路径部分
     
    
   
    
     
    
    
     			
      document.write(
      "<td>"+location.pathname+
      "</td>");
     
    
   
    
     
    
    
     		
      document.write(
      "</tr>");
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      document.write(
      "</table>")
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
         
      <div id="timeDiv">
      </div>
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

navigator对象：

与浏览器相关的信息（APPName，appVersion，platform，userAgent，onLine，cookieEnabied）

history对象：

包含浏览器的历史访问记录，访问过的URL，访问数量等。用于保存用户在浏览网页时的URL地址。length属性表示访问URL 的数量，JavaScript不允许通过history获取URL地址。

history对象方法
back()	可加载历史列表的前一个URL
forward()	可加载历史列表的后一个URL
go( n \| url)	可加载历史列表中某个具体页面，参数n为要访问的History的URl 列表中的相对位置，n>0,前进n个地址，n<0,后退n个地址，n=0刷新当前页面，


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>history对象
      </title>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      function goBack(){
     
    
   
    
     
    
    
     			
      // 加载历史列表上一个地址
     
    
   
    
     
    
    
     
      			history.go(
      -1);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function historyBack(){
     
    
   
    
     
    
    
     			
      // 加载历史列表的前一个地址
     
    
   
    
     
    
    
     
      			history.back();
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function goForward(){
     
    
   
    
     
    
    
     			
      // 加载历史列表的下一个地址
     
    
   
    
     
    
    
     
      			history.go(
      1);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function historyForward(){
     
    
   
    
     
    
    
     			
      // 加载历史列表的后一个地址。
     
    
   
    
     
    
    
     
      			history.forward();
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
         
      <input type="button" value="forward()方法前进" onclick="goForward()"/>
     
    
   
    
     
    
    
         
      <input type="button" value="back()方法后退" onclick="goBack()"/>
      <br/>
     
    
   
    
     
    
    
         
      <input type="button" value="go()方法前进" onclick="historyForward()"/>
     
    
   
    
     
    
    
         
      <input type="button" value="go()方法后退" onclick="historyBack()"/>
      <br/>
     
    
   
    
     
    
    
         
      <a href="historyForward.html">进入下一个页面并返回，测试前进按钮
      </a>
     
    
   
    
     
    
    
       
      </body>
     
    
   
    
     
    
    
     
      </html>

DOM模型：

(Document Object Model,文档对象模型)，属于BOM的一部分，用于对BOM中核心对象document进行操作，DOM是一种与平台语言无关的接口，允许程序和脚本动态的访问或跟新HTML或XML文档的内容，结构，样式。

document对象是BOM对象的核心，提供访问HTML文档对象的属性方法及事件处理。

document.write():用于向文档流中写入内容，当文档流在加载过程中，可写，无需打开关闭，加载完毕，不可在写需要用open方法打开输出流，但打开输出流会清除当前的文档所有内容。

HTML文档中DOM模型
						document
				form	link	div
radio	checkbox	button	select	textrea	……

document对象是window的子对象，是指浏览器窗口中显示的内容部分，可以通过window.document来访问当前文档的属性和方法，当页面中包含框架时，可以通过window.frames[n].document来访问框架的属性和方法。

document对象的attribute list
body	提供对body元素的直接访问，对于框架定义，该attribute import最外层的frameset元素
cookie	设置或查询与当前文档有关的所有cookie
referrer	返回载入当前文档的文档URL
URL	返回载入当前文档的URL
lastModified	返回文档最后被修改的日期和时间
domain	返回下载当前文档的服务器域名
all[]	返回对文档中所有HTML元素的引用，all[]已经被documen对象的getElementById()等方法代替
forms[]	返回对文档中所有的form对象集合(表单)
images[]	返回对文档中所有的image对象集合，但不包括,<Object>标签内定义的图像，images：返回当前文档事务所有图片数组

referrer attribute：用于返回加载指定文档的URL，即跳转前的文档的URL，但要部署在服务器上。

cookie attribute：浏览器保存用户访问服务器的会话信息，允许服务器端下次访问，本质为字符串。document.cookie =cookieStr;


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>cookie的用法
      </title>
     
    
   
    
     
    
    
        
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body onload="loadCookie('register')">
     
    
   
    
     
    
    
         
      <form name="myform">
     
    
   
    
     
    
    
     
              用户名：
      <input type="text" name="userName" id="" />
      <br/>
     
    
   
    
     
    
    
     
              密　码：
      <input type="password" name="userPwd" id=""/>
      <br/>
     
    
   
    
     
    
    
     
              保存时间：
      <select name="saveTime">
     
    
   
    
     
    
    
                 
      <option value="1">一天
      </option>
     
    
   
    
     
    
    
                 
      <option value="7">一周
      </option>
     
    
   
    
     
    
    
                 
      <option value="30">一月
      </option>
     
    
   
    
     
    
    
                 
      <option value="-1">-不保存-
      </option>
     
    
   
    
     
    
    
             
      </select>
      <br/>        
     
    
   
    
     
    
    
             
      <input type="button" value="注册测试" onclick="saveCookie('register')"/>
     
    
   
    
     
    
    
             
      <input type="button" value="加载注册信息" onclick="loadCookie('register')"/>
      <br/>
     
    
   
    
     
    
    
             
      <input type="button" value="登录测试" onclick="saveCookie('login')"/>
     
    
   
    
     
    
    
             
      <input type="button" value="加载登录信息" onclick="loadCookie('login')"/>
      <br/>
     
    
   
    
     
    
    
         
      </form>
     
    
   
    
     
    
    
     	
      <div id="cookieDiv">cookie信息显示位置
      </div>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      //cookie信息直接的分隔符（自行指定的分隔符）
     
    
   
    
     
    
    
     		
      var cookieSplit=
      "@";
     
    
   
    
     
    
    
     		
      //保存cookie信息
     
    
   
    
     
    
    
     		
      function saveCookie(cookieName){
     
    
   
    
     
    
    
     			
      var userName=
      document.forms[
      0].userName.value;
     
    
   
    
     
    
    
     			
      var userPwd=
      document.forms[
      0].userPwd.value;
     
    
   
    
     
    
    
     			
      var saveTime=
      document.forms[
      0].saveTime.value;
     
    
   
    
     
    
    
     			
      var expireDate=
      new 
      Date();
     
    
   
    
     
    
    
     			
      if(saveTime!=
      "-1"){
     
    
   
    
     
    
    
     
      				expireDate.setDate(expireDate.getDate()+saveTime);
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      document.cookie = cookieSplit+cookieName+
      "="+
      escape(userName)+
      ","+
      escape(userPwd)
     
    
   
    
     
    
    
     
      				+
      ";expires="+expireDate.toGMTString();
     
    
   
    
     
    
    
     
      			loadCookie(cookieName);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //加载cookie信息
     
    
   
    
     
    
    
     		
      function loadCookie(cookieName){
     
    
   
    
     
    
    
     			
      //获得页面的cookie信息
     
    
   
    
     
    
    
     			
      var currentCookie=
      document.cookie;
     
    
   
    
     
    
    
     			
      //cookie的开始部分
     
    
   
    
     
    
    
     			
      var beginPart=cookieSplit+cookieName+
      "=";
     
    
   
    
     
    
    
     			
      //cookie数据部分的开始位置
     
    
   
    
     
    
    
     			
      var startPosition=currentCookie.indexOf(beginPart);
     
    
   
    
     
    
    
     			
      //cookie的关键数据部分
     
    
   
    
     
    
    
     			
      var cookieData=
      "";
     
    
   
    
     
    
    
     			
      //没有找到相关的cookie
     
    
   
    
     
    
    
     			
      if(startPosition==
      -1){
     
    
   
    
     
    
    
     				
      document.forms[
      0].userName.value=
      "";
     
    
   
    
     
    
    
     				
      document.forms[
      0].userPwd.value=
      ""
     
    
   
    
     
    
    
     
      			}
      else{
     
    
   
    
     
    
    
     				
      //cookie数据部分的结束位置
     
    
   
    
     
    
    
     				
      var endPosition=currentCookie.indexOf(
      ";",startPosition);
     
    
   
    
     
    
    
     				
      //当前cookie为cookie集合中的最后一个时（没有找到分号；）
     
    
   
    
     
    
    
     				
      if(endPosition==
      -1){
     
    
   
    
     
    
    
     
      					endPosition=currentCookie.length;
     
    
   
    
     
    
    
     
      				}
     
    
   
    
     
    
    
     
      				cookieData=currentCookie.substring(startPosition+(beginPart).length,endPosition);
     
    
   
    
     
    
    
     				
      //对cookie数据进行分割
     
    
   
    
     
    
    
     				
      var datas=cookieData.split(
      ",");
     
    
   
    
     
    
    
     				
      document.forms[
      0].userName.value=
      unescape(datas[
      0]);
     
    
   
    
     
    
    
     				
      document.forms[
      0].userPwd.value=
      unescape(datas[
      1]);
     
    
   
    
     
    
    
     
      			}			
     
    
   
    
     
    
    
     			
      document.getElementById(
      "cookieDiv").innerHTML=
     
    
   
    
     
    
    
     				
      "所有的cookie信息："+(
      document.cookie==
      ""?
      "<font color='red'>暂无cookie信息</font>":
      document.cookie);		
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
        
      </body>
     
    
   
    
     
    
    
     
      </html>

cookie本身有一定的大小限制，，每个cookie所存放的数据不能超过4KB。cookie由一些键值对(cookieName--value)构成，根据cookieName来检索的cookie中的信息，包括expires(表示cookie的过期时间，是UTC格式，可以通过Data.toGMTString()方法来生成，当cookie到达过期时间时，cookie就会被删除，默认情况下，当浏览器关闭时cookie立即失效)，path(表示允许访问的cookie路径，只有在此路径下才可以读写cookie，一般情况下将path设为“/”,表示同一站点下的所有页面都可以访问cookie)和domain(表示域，可以使浏览器确定哪些cookie能够被提交，如果没有指定域，则域值为该cookie页面所对应的域)等信息。一般情况下，cookie信息都没有经过编码，当cookie中包含空格分号，逗号等特殊符号时，需要使用escape()函数进行编码，当cookie中取出数据时，需要使用UNescape（)函数进行解码。

οnlοad=“”//加载页面后执行一段JavaScript文档。可以对cookie信息进行提取匹配

document对象的方法：分为文档流的操作和文档元素到的操作。

document对象的方法
open()	打开一个新文档，并擦除当前文档的内容
write()	向文档写入HTML或JavaScript代码
writeln()	作用于write相同，内容输出后额外加换行符，在使用<pre>标签时有用
close()	关闭一个由document.open()方法打开的输出流，并显示选定的数据
getElementById()	返回对拥有指定ID的第一个对象，多个时返回第一个符合的
getElementsByName()	返回带有指定名称的对象的集合，用于单行文本框的复选框
getElementByTagName()	返回带有指定标签名的对象的集合，顺序于文档中的一样，参数为*时，返回页面中所有的标签元素
getElementByClassName()	返回带有指定Class属性的对象的集合，HTML5有
querySelector()	返回满足条件的CSS选择器的单个元素，当多个时，返回一个
querySelectorAll()	返回满足条件的集合


  
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <script>
     
    
   
    
     
    
    
         
      document.write(
      "JS进阶篇");
     
    
   
    
     
    
    
     
          alert(
      "关注JS高级篇");
     
    
   
    
     
    
    
     
      </script>


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>document对象的方法
      </title>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      function count(){
     
    
   
    
     
    
    
     			
      //获取指定id的元素对象
     
    
   
    
     
    
    
     			
      var userName=
      document.getElementById(
      "userName");
     
    
   
    
     
    
    
     			
      // 获取具有指定name值的对象的集合
     
    
   
    
     
    
    
     			
      var hobby=
      document.getElementsByName(
      "hobby");
     
    
   
    
     
    
    
     			
      // 获取指定标签的对象的集合
     
    
   
    
     
    
    
     			
      var inputs=
      document.getElementsByTagName(
      "input");
     
    
   
    
     
    
    
     			
      var result=
      "ID为userName的元素的值："+userName.value
     
    
   
    
     
    
    
     
      				+
      "\nname为hobby的元素的个数："+hobby.length
     
    
   
    
     
    
    
     
      				+
      "\n\t个人爱好：";
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<hobby.length;i++){
     
    
   
    
     
    
    
     				
      if(hobby[i].checked){
     
    
   
    
     
    
    
     
      					result+=hobby[i].value+
      " ";	
     
    
   
    
     
    
    
     
      				}
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			result+=
      "\n标签为input的元素的个数："+inputs.length
     
    
   
    
     
    
    
     
      			alert(result);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
         
      <form name="myform">
     
    
   
    
     
    
    
     
              用户名：
      <input type="text" name="userName" id="userName" />
      <br/>
     
    
   
    
     
    
    
     
              爱　好：
      <input type="checkbox" name="hobby" value="看电影"/>看电影
     
    
   
    
     
    
    
             
      <input type="checkbox" name="hobby" value="购物"/>购物
     
    
   
    
     
    
    
             
      <input type="checkbox" name="hobby" value="品味美食"/>品味美食
      <br/>
     
    
   
    
     
    
    
             
      <input type="button" value="测试按钮" onclick="count()"/>
     
    
   
    
     
    
    
         
      </form>
     
    
   
    
     
    
    
        
      </body>
     
    
   
    
     
    
    
     
      </html>


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>document对象的方法
      </title>
     
    
   
    
     
    
    
         
      <style>
      
     
    
   
    
     
    
    
             
      #menuDiv {
     
    
   
    
     
    
    
                 
      width: 
      55px;
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <div id="menuDiv">
     
    
   
    
     
    
    
             
      <span class="buyClass baseClass">购物栏目
      </span>
     
    
   
    
     
    
    
             
      <span class="filmClass baseClass">影视栏目
      </span>
     
    
   
    
     
    
    
             
      <span class="foodClass baseClass">餐饮栏目
      </span>
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      function getElement() {
     
    
   
    
     
    
    
                 
      var menuDiv = 
      document.getElementById(
      "menuDiv");
     
    
   
    
     
    
    
                 
      // 获取指定class属性的集合
     
    
   
    
     
    
    
                 
      var baseSpan = menuDiv.getElementsByClassName(
      "baseClass");
     
    
   
    
     
    
    
                 
      var buySpan = menuDiv.getElementsByClassName(
      "buyClass");
     
    
   
    
     
    
    
     
                  alert(
      "具有baseClass特征的<span>标签的个数：" + baseSpan.length +
     
    
   
    
     
    
    
                     
      "\n具有buyClass特征的<span>标签的个数：" + buySpan.length);
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
     
              getElement();
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      function getElementByQuery() {
     
    
   
    
     
    
    
                 
      var span = 
      document.querySelector(
      "#menuDiv");
     
    
   
    
     
    
    
                 
      var span = 
      document.querySelector(
      ".filmClass");
     
    
   
    
     
    
    
                 
      //返回元素所在标签中的内容
     
    
   
    
     
    
    
     
                  alert(span.innerHTML);
     
    
   
    
     
    
    
                 
      var span = 
      document.querySelectorAll(
      ".baseClass");
     
    
   
    
     
    
    
                 
      // 返回元素个数
     
    
   
    
     
    
    
     
                  alert(span.length);
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
     
              getElementByQuery();
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

Form对象

Form对象是document的子对象，通过form对象实现表单验证效果，通过form对象可以方位对象的属性和方法，

document.表单名称.属性/document.表单名称.方法(参数)/document.form[索引].属性/document.form[0].方法(参数)；

form对象的属性
elements[]	返回包含表单中所有元素的数组，元素在数组中出现的顺序于表单顺序相同，元素.type:表示元素的类型
enctype	设置或返回用于编码表单内容的MIME类型。默认application/x-www-form-urlencoded上传文件时为：multpart/form-data
target	可设置或返回在何处打开表单中的action-URL
method	设置或返回用于提交表单的HTTP方法
length	用于返回表单中的元素的数量
action	设置或返回表单的action属性
name	返回表单的名称

form的方法
submit()	表单数据提交到Web服务器
reset()	对表单中的元素进行重置

提交表单有两种方式：submit()提交按钮，和submit()提交方法，在<form>标签中onsubmit属性用于指定在表单提交时调用的事件处理函数，在onsubmit属性中使用return关键字表示根据被调用的的返回值来决定是否提交表单，当函数返回值为true时提交表单，反之。

focus()方法用于某元素重新获取焦点。select()用于将元素内容出于选中状态。


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>form对象的方法
      </title>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     	
      // 获取表单元素。
     
    
   
    
     
    
    
     		
      function checkUserName(){
     
    
   
    
     
    
    
     			
      //获取元素的方式（1）
     
    
   
    
     
    
    
     			
      var userName=
      document.getElementById(
      "userName");
     
    
   
    
     
    
    
     			
      if(userName.value.length==
      0){
     
    
   
    
     
    
    
     
      				alert(
      "用户名不能为空！");	
     
    
   
    
     
    
    
     				
      return 
      false;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      if(userName.value.length<
      3||userName.value.length>
      20){
     
    
   
    
     
    
    
     
      				alert(
      "用户名长度应介于3~16位，请重新输入");
     
    
   
    
     
    
    
     
      				userName.select();		
      //元素内容被选中
     
    
   
    
     
    
    
     				
      return 
      false;	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return 
      true;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function checkUserPwd(){
     
    
   
    
     
    
    
     			
      //获取元素的方式（2）
     
    
   
    
     
    
    
     			
      var userPwd=
      document.myform.userPwd.value;
     
    
   
    
     
    
    
     			
      if(userPwd.length<
      6){
     
    
   
    
     
    
    
     
      				alert(
      "密码长度不低于6位！");
     
    
   
    
     
    
    
     				
      return 
      false;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<userPwd.length;i++){
     
    
   
    
     
    
    
     				
      var tmp=userPwd.charAt(i);	
     
    
   
    
     
    
    
     				
      if(
      isNaN(tmp)){
     
    
   
    
     
    
    
     
      					alert(
      "密码必须使用数字");
     
    
   
    
     
    
    
     					
      return 
      false;
     
    
   
    
     
    
    
     
      				}
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return 
      true;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // 以原型方式给String添加一个方法。
     
    
   
    
     
    
    
     		
      String.prototype.TextFilter=
      function(){
     
    
   
    
     
    
    
     				  
      var pattern=
      new 
      RegExp(
      "[`~%!@#^=''?~！@#￥……&——‘”“'？*()（），,。.、]"); 
      //[]内输入你要过滤的字符，这里是我的
     
    
   
    
     
    
    
     				  
      var rs=
      "";
     
    
   
    
     
    
    
     				  
      for(
      var i=
      0;i<
      this.length;i++){
     
    
   
    
     
    
    
     				  	
      // 替换一个于正则表达式匹配的对象
     
    
   
    
     
    
    
     
      					  rs+=
      this.substr(i,
      1).replace(pattern,
      '');
     
    
   
    
     
    
    
     
      				  }
     
    
   
    
     
    
    
     				  
      return rs;
     
    
   
    
     
    
    
     
      			  }
     
    
   
    
     
    
    
     	  
      function checkname2() {
     
    
   
    
     
    
    
     			
      var username = 
      document.getElementById(
      "username");
     
    
   
    
     
    
    
                 
      var text = username.TextFilter();
     
    
   
    
     
    
    
                 
      if (text != username){
     
    
   
    
     
    
    
     
                  	alert(
      "用户名包含特殊字符")
     
    
   
    
     
    
    
     				
      return 
      false;
     
    
   
    
     
    
    
     
      			}
      else {
     
    
   
    
     
    
    
                 	
      return 
      true;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      	  }
     
    
   
    
     
    
    
     		
      function checkEmail(){
     
    
   
    
     
    
    
     			
      //获取元素的方式（3） 
     
    
   
    
     
    
    
     			
      var email=
      document.forms[
      0].email;	
     
    
   
    
     
    
    
     			
      var emailReg=
      /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
     
    
   
    
     
    
    
     			
      if(!emailReg.test(email.value)){
     
    
   
    
     
    
    
     
      				alert(
      "邮箱格式不正确，请重新输入！");
     
    
   
    
     
    
    
     
      				email.focus();
     
    
   
    
     
    
    
     				
      return 
      false;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return 
      true;				
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function checkMobilePhone(){
     
    
   
    
     
    
    
     			
      //获取元素的方式（4）
     
    
   
    
     
    
    
     			
      var mobilePhone=
      document.forms[
      0].elements[
      3];
      //3是元素的下标，下标从0开始
     
    
   
    
     
    
    
     			
      var mobilePhoneReg=
      /^1[3|4|5|8][0-9]{9}$/
     
    
   
    
     
    
    
     			
      if(!mobilePhoneReg.test(mobilePhone.value)){
     
    
   
    
     
    
    
     
      				alert(
      "手机号码格式不正确");
     
    
   
    
     
    
    
     				
      // 使该元素重新获取焦点
     
    
   
    
     
    
    
     
      				mobilePhone.focus();
     
    
   
    
     
    
    
     				
      return 
      false;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      return 
      true;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function checkForm(){
     
    
   
    
     
    
    
     			
      return checkUserName()&&checkUserPwd()&&checkEmail()&&checkMobilePhone();
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // document.表单名称.属性/document.表单名称.方法(参数)/document.form[索引].属性/document.form[0].方法(参数)；
     
    
   
    
     
    
    
     		
      function checkForm1(){
     
    
   
    
     
    
    
     			
      // 所有的条件都满足
     
    
   
    
     
    
    
     			
      if(checkUserName()&&checkUserPwd()&&checkEmail()&&checkMobilePhone()){
     
    
   
    
     
    
    
     				
      // 设置action的属性
     
    
   
    
     
    
    
     				
      document.myform.action=
      "http://www.moocollege.cn";
     
    
   
    
     
    
    
     				
      // 设置显示的，在新窗口中打开被链接文档窗口 
     
    
   
    
     
    
    
     				
      document.myform.target=
      "_blank";
     
    
   
    
     
    
    
     				
      // 表单数据提交到Web服务器
     
    
   
    
     
    
    
     				
      document.myform.submit();
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
         
      <form name="myform" action="http://www.itshixun.com" method="post" onsubmit="return checkForm()">
     
    
   
    
     
    
    
     
              用户名：
      <input type="text" name="userName" id="userName" />
      <br/>
     
    
   
    
     
    
    
     
              密　码：
      <input type="password" name="userPwd" id="userPwd" />
      <br/>
     
    
   
    
     
    
    
     
             	邮　箱：
      <input type="text" name="email" id="email" />
      <br/>
     
    
   
    
     
    
    
     
              手机号：
      <input type="text" name="mobilePhone" id="mobilePhone" />
      <br/>        
     
    
   
    
     
    
    
     		
      <input type="submit" value="submit提交" />
     
    
   
    
     
    
    
     		
      <!-- 单机时触发的方法 -->
     
    
   
    
     
    
    
             
      <input type="button" value="button提交" onclick="checkForm1()"/>
     
    
   
    
     
    
    
         
      </form>
     
    
   
    
     
    
    
        
      </body>
     
    
   
    
     
    
    
     
      </html>

Table对象：

在JavaScript中提供Table，TableRow和TableCell对象用于对表格，行和单元格进行操作。

Table对象的属性列表
rows[]	返回表格中所有行(TableRow对象)的一个数组集合，包括<thend><tfoot><tbody>中定义的所有行
cells[]	返回表格中所有单元格(TableCell对象)的一个数组集合
border	设置或返回表格边框的宽度(以像素为单位)
caption	设置或返回表格的caption元素
width	设置或返回表格的宽度
cellPadding	设置或返回单元格边框与单nr之间的间距
celllSpacing	设置或返回在表格中的单元格之间的距离

Table对象常用方法
createcCaption()	在表格中获取或创建<caption>元素
createTFoot()	在表格中获取或创建<tfoot>元素
createTHend()	在表格中获取或创建<thead>元素
insertRow(index)	在表格的指定位置插入一个新行，新行将被插入index所在行之前，参数index小于0或大于等于表中的行时，抛出异常
deleteRow(index)	从表格中删除指定位置的行
deleteCaption()	在表格中删除<caption>元素
deleteTFoot()	在表格中删除<tfoot>元素
deleteTHend()	在表格中删除<thead>元素

TableRow对象的属性和方法(行)
cells[]	返回当前行所包含的单元格数组
sectionRowIndex	返回某一行在他tBody，tHead,TFoot中的位置
rowIndex	返回某一行在表格的行集合中的位置
innerHTML	设置或返回表格行的开始和结束标签之间的HTML内容。
insertCell()	在HTML表中一行的指定位置插入一个空的<td>标签
deleteCell()	删除表格行中的单元格

TableCell对象的属性
width	设置或表元的宽度返回
rowSpan	设置或返回表元纵跨的行数
colSpan	设置或返回表元横跨的列数
cellIndex	返回行的单元格集合中单元格的位置
innerHTML	设置或返回单元格的开始和结束标签的HTML内容

this表示当前对象元素，parentNode表示当前对象的外层容器(即父节点)。

DOM节点

在DOM模型中，HTML的结构文档是一种树形结构，HTML中标签和属性可以看做是DOM树中的节点，节点分为元素节点，属性节点，文本节点，注释节点，文档节点和文档类型节点，各个节点统称为NOde对象，通过NOde对象的属性和方法可以遍历整个文档类型节点。Node对象的nodeType属性用于获得该节点的类型

DOM节点的常用类型
节点类型	nodeType值	描述	示例
元素(Elenemt)	1	HTML标签	<div></div>
属性(Attribute)	2	HTML标签属性	type = "text"
文本(Text)	3	文本内容	Hello HTMl!
注释(comment)	8	HTML注释段	<-- 内容-->
文档(DOcument)	9	HTML文档根节点	<html>
文档类型(DocumentType)	10	文档类型	<!DOCUTYPE html>

Element对象继承了NOde对象，是Node对象的一种。

Element对象的属性和方法
attribute	返回指定节点的属性集合
children	非标准属性，返回直接后代的元素节点的集合，类型为Array
childNodes	标准属性，返回直接后代的元素节点和文本节点的集合，类型为NodeList
innerHtML	设置或返回元素的内部HTML
className	设置或返回元素的class属性
firstChild	返回指定节点的首个子节点，
lastChild	返回指定节点的最后一个子节点
nextSibling	返回同一父节点的指定节点之后紧跟的节点
pareviousSibling	返回同一父节点的指定节点之前的节点
parentNode	返回指定节点的父节点，没有父节点时，返回空
nodeType	返回指定节点的节点类型
nodeValue	设置或返回指定节点的节点值
tagName	返回元素的标签名(始终大写)

Element对象的常用方法
getAttitbute()	返回指定属性对应的属性值
getelementsByTagName	返回具有指定标签名的元素子元素的集合，类型为NodeList
hasAttribute()	指定属性存在时返回true，反之
hasChildNodes()	检查元素是否有子节点
removeAttribute()	删除指定属性
replaceChild()	用心节点替换子节点
removeChild()	删除某个子节点，并返回该节点
setAttribute()	为节点添加属性，当属性存在时，则进行替换

NodeList对象是一个节点集合，其item(index)方法用于从节点集合中返回指定索引的节点，length用于返回节点数量。

获取一个节点所包含的子节点时，可以使用从Node对象中继承的childNodes属性，也可以使用Element对象的children属性，childNodes属性返回集合中包含的元素节点和文本节点，而children属性返回的集合中仅包含元素节点


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>DOM节点
      </title>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
             
      var dataArray = 
      new 
      Array();
     
    
   
    
     
    
    
             
      //解析页面
     
    
   
    
     
    
    
             
      function amount() {
     
    
   
    
     
    
    
                 
      var sum = 
      0;
     
    
   
    
     
    
    
                 
      var myTable = 
      document.getElementById(
      "myTable");
     
    
   
    
     
    
    
                 
      //table中包含的字节点集合（包括tbody元素节点和文本节点）
     
    
   
    
     
    
    
                 
      var tbodyList = myTable.childNodes;
     
    
   
    
     
    
    
     
                  alert(
      "tbody集合的长度：" + tbodyList.length);
     
    
   
    
     
    
    
                 
      for (
      var i = 
      0; i < tbodyList.length; i++) {
     
    
   
    
     
    
    
                     
      // 返回指定索引的节点
     
    
   
    
     
    
    
                     
      var tbody = tbodyList.item(i);
     
    
   
    
     
    
    
                     
      //只对tbody元素节点进行操作，不对文本节点进行操作 
     
    
   
    
     
    
    
                     
      if (tbody.nodeType == 
      1) {
     
    
   
    
     
    
    
                         
      //tbody中包含的子节点的集合（包括tr元素节点和文本节点）
     
    
   
    
     
    
    
                         
      var rowList = tbody.childNodes;
     
    
   
    
     
    
    
                         
      //第一行为标题栏，不需要统计
     
    
   
    
     
    
    
                         
      for (
      var j = 
      1; j < rowList.length; j++) {
     
    
   
    
     
    
    
                             
      // 获取表格内容
     
    
   
    
     
    
    
                             
      var row = rowList.item(j);
     
    
   
    
     
    
    
                             
      //只对tr元素节点进行操作，不对文本节点进行操作
     
    
   
    
     
    
    
                             
      if (row.nodeType == 
      1) {
     
    
   
    
     
    
    
                                 
      //当前行中包含的节点的集合（包括td元素节点和文本节点）
     
    
   
    
     
    
    
                                 
      var cellList = row.childNodes;
     
    
   
    
     
    
    
     
                                  alert(
      "当前行元素内容的个数：" + cellList.length);
     
    
   
    
     
    
    
                                 
      //获得最后一个单元格的内容；奇数为元素节点，偶数为文本节点
     
    
   
    
     
    
    
                                 
      var lastCell = cellList.item(
      5);
     
    
   
    
     
    
    
                                 
      if (lastCell != 
      null) {
     
    
   
    
     
    
    
                                     
      // 如果不为空，将该数据转化为int值，
     
    
   
    
     
    
    
                                     
      var salesAmount = 
      parseInt(cellList.item(
      5).innerHTML);
     
    
   
    
     
    
    
     
                                      sum += salesAmount;
     
    
   
    
     
    
    
     
                                  }
     
    
   
    
     
    
    
     
                              }
     
    
   
    
     
    
    
     
                          }
     
    
   
    
     
    
    
     
                      }
     
    
   
    
     
    
    
     
                  }
     
    
   
    
     
    
    
                 
      //改变统计结果
     
    
   
    
     
    
    
                 
      // 获取tr标签的所有节点集合
     
    
   
    
     
    
    
                 
      var tableRows = myTable.getElementsByTagName(
      "tr");
     
    
   
    
     
    
    
                 
      // 获取最后一组tr节点
     
    
   
    
     
    
    
                 
      var lastRow = tableRows.item(tableRows.length - 
      1);
     
    
   
    
     
    
    
                 
      // 获取该节点的最后一个子节点之前的节点，然后修改
     
    
   
    
     
    
    
     
                  lastRow.lastChild.previousSibling.innerHTML = sum;
     
    
   
    
     
    
    
                 
      //也可以通过children方式进行显示
     
    
   
    
     
    
    
     
                  myTable.children[
      0].children[
      3].children[
      1].innerHTML = sum;
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <table id="myTable" border="1" width="200">
     
    
   
    
     
    
    
             
      <tr>
     
    
   
    
     
    
    
                 
      <th>ID
      </th>
     
    
   
    
     
    
    
                 
      <th>姓名
      </th>
     
    
   
    
     
    
    
                 
      <th>销售额度(W)
      </th>
     
    
   
    
     
    
    
             
      </tr>
     
    
   
    
     
    
    
             
      <tr>
     
    
   
    
     
    
    
                 
      <td>2
      </td>
     
    
   
    
     
    
    
                 
      <td>郭全友
      </td>
     
    
   
    
     
    
    
                 
      <td>3000
      </td>
     
    
   
    
     
    
    
             
      </tr>
     
    
   
    
     
    
    
             
      <tr>
     
    
   
    
     
    
    
                 
      <td>3
      </td>
     
    
   
    
     
    
    
                 
      <td>郑建华
      </td>
     
    
   
    
     
    
    
                 
      <td>2600
      </td>
     
    
   
    
     
    
    
             
      </tr>
     
    
   
    
     
    
    
             
      <tr>
     
    
   
    
     
    
    
                 
      <td>合计
      </td>
     
    
   
    
     
    
    
                 
      <td colspan="2">0.0
      </td>
     
    
   
    
     
    
    
             
      </tr>
     
    
   
    
     
    
    
         
      </table>
     
    
   
    
     
    
    
         
      <input type="button" value="统计" onclick="amount()" />
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

事件处理

JavaScript采用事件驱动的响应机制，用户在页面上进行交互操作时会触发相应的事件，(Event)驱动是指在页面中响应用户操作的一种处理方式，而事件处理是指页面在响应用户操作时所调用的程序代码。事件的产生于响应都由浏览器完成。

事件流和事件对象：DOM结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

事件流顺序有两种，事件冒泡，事件捕获。

冒泡型事件(Event Bubbing)是指从叶子节点沿祖先节点一直向上传递到根节点，基本思路是按照从特定的事件到最不特定的事件目标，IE浏览器对事件的实现模式，

捕获事件(Event Capuring )与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素。

当浏览器检查到事件时，调用事件指定的事件处理函数对事件进行处理，在此过程中。s事件中需要传递的信息都是通过事件(Event)对象来完成的，事件(Event)对象包含当前触发事件的状态，大多数的event对象的属性是只读的。因为event对象是事件对象的快照。

Event对象的常见属性
screenX	返回事件发生时鼠标指针相对于屏幕的水平坐标
screenY	返回事件发生时鼠标指针相对于屏幕的垂直坐标
clientX	返回当事件被触发时鼠标指针相对于当前窗口的水平坐标
clientY	返回当事件被触发时鼠标指针相对于当前窗口的垂直坐标
button	可返回一个整数，指示当事件被触发时那个鼠标按键被击中，1左2中3右4(IE中)
altKey	返回一个布尔值，表示ALT键是否一直被按住
ctrlKey	返回一个布尔值，表示Ctrl键是否一直被按住
shiftKey	返回一个布尔值，表示Shift键是否一直被按住
type	返回事件发生的类型，图submit，load或click等
target	返回触发事件的目标元素

Event对象提供了preventDefault()方法用于通知浏览器不在执行与事件关联的默认动作，stopPropagation()用于终止事件的进一步传播。

鼠标事件：

当鼠标在页面某一元素上单击，移动或悬停时，都会触发一个相应的事件，常见的鼠标事件

常见的鼠标事件
onclick	单击对象触发
ondblclick	双击对象触发
onmouseout	在鼠标指针移动到指定的对象上时触发事件
onmouseout	在鼠标指针移动出到指定对象时触发事件
onmousemove	在鼠标指针移动时触发的事件
onmousedown	当鼠标指针被按下时执行脚本
onmouseup	当鼠标按钮被松开时执行脚本


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
         
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
         
      <title>右键菜单
      </title>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
         
      <div id="showDiv" style="width:200px;height:200px;border:2px solid;" onmouseout="hiddenMenu()" onclick="hiddenMenu()">
     
    
   
    
     
    
    
             
      <!-- 设置为隐藏属性 -->
     
    
   
    
     
    
    
             
      <!-- position属性为 相对定位，即相对于它原来有的元素定位 -->
     
    
   
    
     
    
    
             
      <div id="menuDiv" style="display:none; width:50px; position:relative; z-index:-2; background-color:#FF6;">
     
    
   
    
     
    
    
                 
      <a>复制
      </a>
      <br/>
     
    
   
    
     
    
    
                 
      <a>粘贴
      </a>
      <br/>
     
    
   
    
     
    
    
                 
      <a>删除
      </a>
      <br/>
     
    
   
    
     
    
    
             
      </div>
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     	
      //右键触发
     
    
   
    
     
    
    
             
      document.getElementById(
      "showDiv").oncontextmenu = 
      function(e) {
     
    
   
    
     
    
    
     
                  e = e || 
      window.event;
     
    
   
    
     
    
    
                 
      var menuDiv = 
      document.getElementById(
      "menuDiv");
     
    
   
    
     
    
    
                 
      if (e.button == 
      2) {
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
                      menuDiv.style.display = 
      "block";
     
    
   
    
     
    
    
     
                      menuDiv.style.left = e.clientX + 
      "px";
     
    
   
    
     
    
    
     
                      menuDiv.style.top = e.clientY + 
      "px";
     
    
   
    
     
    
    
                     
      if (
      window.event) {
     
    
   
    
     
    
    
                         
      window.event.returnValue = 
      false;
     
    
   
    
     
    
    
     
                      } 
      else {
     
    
   
    
     
    
    
     
                          e.preventDefault();
     
    
   
    
     
    
    
     
                      }
     
    
   
    
     
    
    
     
                  }
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      function hiddenMenu() {
     
    
   
    
     
    
    
                 
      document.getElementById(
      "menuDiv").style.display = 
      "none";
     
    
   
    
     
    
    
     
              }
     
    
   
    
     
    
    
         
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      </html>

键盘事件

常见的键盘事件
onkeydown	在用户按下一个键盘时触发事件
onkeyup	在键盘按键松开时触发的事件
onkeypress	在键盘按键被按下并释放一个键时触发的事件

当键盘按下时将Event对象传入事件处理函数，在事件处理函数中通过Event对象可以获得键盘锁按下的键值，

文档事件

文档事件
onload	在页面或图像加载完成后立即触发事件
onunload	在用户退出页面时触发事件
onresize	在窗口或框架被调整大小时触发事件


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>文档，窗口事件处理
      </title>
     
    
   
    
     
    
    
         
      <style type="text/css">
      
     
    
   
    
     
    
    
     		
      img{
     
    
   
    
     
    
    
     			
      width:
      200px;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </style>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      var array=[
      1,
      2,
      3];
     
    
   
    
     
    
    
     		
      function initImages(){
     
    
   
    
     
    
    
     			
      //在窗体加载时，根据时间随机获取一个图片并显示
     
    
   
    
     
    
    
     			
      // 传入比较器对数组进行排序。
     
    
   
    
     
    
    
     
      			 array.sort(randomsort);
     
    
   
    
     
    
    
     			 
      //获取img标签对象，对属性进行修改
     
    
   
    
     
    
    
     			 
      var images=
      document.getElementsByTagName(
      "img");
     
    
   
    
     
    
    
     			 
      for(
      var i=
      0;i<array.length;i++){
     
    
   
    
     
    
    
     
      				images[i].src=
      "images/person/p"+array[i]+
      ".jpg";
     
    
   
    
     
    
    
     
      			 }			
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function randomsort(a, b) {  
     
    
   
    
     
    
    
     			
      //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1 
     
    
   
    
     
    
    
            		
      return 
      Math.random()>
      0.5?
      -1:
      1;  		
     
    
   
    
     
    
    
     
      		}  
     
    
   
    
     
    
    
     		
      //改变窗口大小时，图片等比例缩放
     
    
   
    
     
    
    
     		
      function resizeImages(){
     
    
   
    
     
    
    
     			
      var scale=
      0.2;
     
    
   
    
     
    
    
     			
      var images=
      document.getElementsByTagName(
      "img");
     
    
   
    
     
    
    
     			
      //获取窗口文档的显示宽度
     
    
   
    
     
    
    
     			
      var windowWidth=
      window.innerWidth;
     
    
   
    
     
    
    
     			
      var resizeWidth=windowWidth*scale;
     
    
   
    
     
    
    
     			
      if(resizeWidth<
      100){
     
    
   
    
     
    
    
     
      				resizeWidth=
      100;
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<images.length;i++){
     
    
   
    
     
    
    
     				
      // 修改图片文件大小
     
    
   
    
     
    
    
     
      				images[i].style.width=resizeWidth+
      "px";
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      // 事件处理
     
    
   
    
     
    
    
     		
      // 在页面文件加载完立即调用函数
     
    
   
    
     
    
    
     		
      window.onload=initImages;
     
    
   
    
     
    
    
     		
      // 在窗口大小调整时出发的函数。
     
    
   
    
     
    
    
     		
      window.onresize=resizeImages;
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body>
     
    
   
    
     
    
    
         
      <div id="mainDiv" >
     
    
   
    
     
    
    
     		
      <img />
     
    
   
    
     
    
    
             
      <img />
     
    
   
    
     
    
    
             
      <img />
     
    
   
    
     
    
    
         
      </div>   
     
    
   
    
     
    
    
        
      </body>
     
    
   
    
     
    
    
     
      </html>

表单即表单元素事件

使用表单输入信息，当表单元素获取焦点，失去焦点，元素内容的改变都会触发相应的事件，提交或重置表单数据时也会触发相应的表单事件。

表单即表单元素事件
表单元素事件	onblur	在对象失去焦点时触发的事件
	onfocus	在对象获得焦点时触发的事件
	inchange	在域的内容给变时触发的事件
	onselect	在文本框中的文本被选中时触发的事件
表单事件	onreset	在表单中的重置按钮被单击时触发的事件。例：onreset ="return resetForm()"
表单事件	onsubmit	在表单中提交按钮被提交时触发的事件。例： onsubmit ="return checkForm()"


  
   
    
     
    
    
     
      <!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">
     
    
   
    
     
    
    
       
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     	
      <title>表单事件处理
      </title>
     
    
   
    
     
    
    
         
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     		
      function boundEvent(){
     
    
   
    
     
    
    
     			
      var inputs=
      document.getElementsByTagName(
      "input");
     
    
   
    
     
    
    
     			
      for(
      var i=
      0;i<inputs.length;i++){
     
    
   
    
     
    
    
     				
      if(inputs[i].type==
      "button"){
     
    
   
    
     
    
    
     					
      //动态绑定事件
     
    
   
    
     
    
    
     
      					inputs[i].onclick=
      function(e){
     
    
   
    
     
    
    
     
      						alert(e.target.value);
     
    
   
    
     
    
    
     
      					}	
     
    
   
    
     
    
    
     
      				}
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function userNameOnFocus(){
     
    
   
    
     
    
    
     			
      var userName=
      document.getElementById(
      "userName");
     
    
   
    
     
    
    
     			
      if(userName.value==
      "请输入用户名"){
     
    
   
    
     
    
    
     
      				userName.value=
      "";
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			userName.style.backgroundColor=
      "#EEEEEE";
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function userNameOnBlur(){
     
    
   
    
     
    
    
     			
      var userName=
      document.getElementById(
      "userName");
     
    
   
    
     
    
    
     			
      if(userName.value==
      ""){
     
    
   
    
     
    
    
     
      				userName.value=
      "请输入用户名";
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			userName.style.backgroundColor=
      "#FFFFFF";
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function showKeyPress(e){
     
    
   
    
     
    
    
     			
      var showDiv=
      document.getElementById(
      "showDiv");
     
    
   
    
     
    
    
     
      			e=e||
      window.event;
     
    
   
    
     
    
    
     			
      //IE的keycode，其他浏览器的which
     
    
   
    
     
    
    
     			
      var char=e.keycode?e.keycode:e.which;
     
    
   
    
     
    
    
     
      			showDiv.innerHTML=showDiv.innerHTML+
      String.fromCharCode(char);
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function selectUserType(){
     
    
   
    
     
    
    
     			
      var userType=
      document.getElementById(
      "userType");
     
    
   
    
     
    
    
     
      			alert(userType.value);	
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function resetForm(){
     
    
   
    
     
    
    
     
      			alert(
      "表单进行重置");
     
    
   
    
     
    
    
     			
      //允许只对部分元素进行重置
     
    
   
    
     
    
    
     			
      document.getElementById(
      "userName").value=
      "";
     
    
   
    
     
    
    
     			
      return 
      false;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      function checkForm(){
     
    
   
    
     
    
    
     			
      var userName=
      document.getElementById(
      "userName").value;
     
    
   
    
     
    
    
     			
      var userType=
      document.getElementById(
      "userType").value;
     
    
   
    
     
    
    
     			
      if(userName==
      "admin"&& userType==
      "管理员"){
     
    
   
    
     
    
    
     
      				alert(
      "表单将进行提交");
     
    
   
    
     
    
    
     				
      return 
      true;	
     
    
   
    
     
    
    
     
      			}
     
    
   
    
     
    
    
     
      			alert(
      "表单不进行提交");
     
    
   
    
     
    
    
     			
      return 
      false;
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     		
      //窗口加载事件
     
    
   
    
     
    
    
     		
      window.onload=boundEvent;				
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
       
      </head>
     
    
   
    
     
    
    
       
      <body >
     
    
   
    
     
    
    
         
      <div id="mainDiv" >
     
    
   
    
     
    
    
     		
      <!-- 重置按钮触发，提交按钮触发 -->
     
    
   
    
     
    
    
         	
      <form action="http://www.itshixun.com" onreset="return resetForm()" onsubmit="return checkForm()" >
     
    
   
    
     
    
    
     			
      <!--onfocus 获得焦点触发 -->
      <!-- onblur 失去焦点触发 --> 
     
    
   
    
     
    
    
     			
      <!-- onkeypress 在用户按下一个按键时触发 -->
     
    
   
    
     
    
    
     			
      <input type="text" value="请输入用户名" id="userName" 
     
    
   
    
     
    
    
                     
      onfocus=
      "userNameOnFocus()" 
      onblur=
      "userNameOnBlur()"
     
    
   
    
     
    
    
     				
      onkeypress=
      "showKeyPress(event)"/>
      <br/>
     
    
   
    
     
    
    
     				
      <!-- onchange 在域内的元素改变时触发 -->
     
    
   
    
     
    
    
                 
      <select id="userType" onchange="selectUserType()">
     
    
   
    
     
    
    
                 	
      <option value="访客">--请选择--
      </option>
     
    
   
    
     
    
    
                     
      <option value="管理员">管理员
      </option>
     
    
   
    
     
    
    
                     
      <option value="普通会员">普通会员
      </option>
     
    
   
    
     
    
    
                 
      </select>
      <br/>
     
    
   
    
     
    
    
                 
      <input type="button" value="购物"/>
     
    
   
    
     
    
    
                 
      <input type="button" value="影视"/>
     
    
   
    
     
    
    
                 
      <input type="button" value="餐饮"/>
      <br/>
     
    
   
    
     
    
    
                 
      <input type="submit" value="提交表单"/>
     
    
   
    
     
    
    
                 
      <input type="reset" value="重置表单"/>
     
    
   
    
     
    
    
             
      </form>
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
        
      </body>
     
    
   
    
     
    
    
     
      </html>

HTNL5基础

HTML5概述：HTML5不仅是一次简单的技术升级，更代表了未来web的开发方向，HTML5直接使用<video>和<audio>标签即可播放视频，音频文件，在HTML5中还引进表单控件校验，元素的拖放，离线编辑，地理位置定位，webSQL数据存储等，特点：

语义特性：HTML5通过一组丰富的页面标签(如：header，footer，article等)更好的实现了HTML的结构化和语义化，
本地存储特性：HTML5 AppCahe，Local，Storage，Indexed DB和File API等技术使得Web应用程序启动时间变短，加载速度跟快，并拥有离线操作等能力。
设备访问特性：HTML5中的设备感知能力有所增强，使得Web程序也能实现传统应用程序的功能，
通信特性：通信能力的增强使得基于页面的聊天程序实时性更高，游戏体验更加流畅，HTML5拥有更高效的服务器推送技术，Server-Sent Events和web Socket使得客户端和服务器之间的通信效率达到了前所未有的高度。
多媒体特性：HTML5引入原生体的多媒体支持，可以在浏览器中直接播放音频和视频文件，不在需要借助视频插件.
三维及图形特性：SVG，Canvas，WebGL及CSS中的3D功能使得图像渲染变得高效方便，在生成图表。2D/3D游戏方面应用比较广泛，
性能与集成特点：Web Worker的出现，使得浏览器支持多线程和后台任务处理，而在XHTMHTTPRequest(Level 2)中新纳入的事件，使跨域请求与表单操作更加简单。
CSS3特性：提供圆角，半透明，阴影，渐变，多背景图以及强大的选择器，变形动画。
移动端特性：使用HTML5进行开发成本低，开发周期短，编写一次代码，能够运行在不同的系统的设备上，HTML5对屏幕适应性好，能够自由嵌入音频视频，且多媒体形式更加灵活。

HTML5语法特征

html5标记方式；文档类型声明方式<!DOCTYPE html>；指定字符编码：<meta charset = "utf - 8">；

HTML5语法差异：标签不区分大小写，允许部分结束标签可以省略，允许部分标签全部省略(<html><head><body>等)。允许使用单标签，可以结束标签中的结束符/。允许省略结束标签的有<p>.<option><optgroup><colgroup><li><dt><dd><tr><td><th>等。boolean属性的设置，如readonly，disabled，checked，selected和multiple等，只写属性名而不指定属性值时，默认为true，当属性值与属性名相同时或属性值为空字符串时，属性值为true，当省略Boolean属性时，属性值为false。属性的属性值不包含特殊字符时，引号可以省略。

HTM文档结构：html文档除了div布局，还添加了<header><nav><aticle><section><aside><footer>等标签做为块区元素。

HTML文档结构元素：

<article>:标签用于表示文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，该内容可以是一篇文章，短文等。在<article>标签中可以使用<header>标签来定义文章的标题部分。<footer>定义文章的脚注部分，多个<section>标签将文章分为多个字块，多个嵌套的<article>标签。
<header>标签用于定义文章的页眉信息，其中包含多个标题(h1~h6),导航部分(nav)或普通内容部分(p,span).
<hgroup>标签用于网页或区段(section)的标题进行组合，当<header>标签中包含多个标题时，可以考虑使用<hgroup>标签将标签组成一组。
<nav>标签用于定义页面的各种导航，在一个页面中可以拥有多个<nav>元素，做为页面不同部分的内容导航：常见的内容导航有顶部导航，侧边栏导航，页内导航和翻页导航等。
<section>标签用于对文章内容进行分块，例如章节，页眉，页脚或文档中的其他部分。通常包含一个标题，可以包含多个<article>标签，表示多篇文章，也可以嵌套<section>标签，表示分块中包含多个子分块。
<aside>标签：专门用于定义当前页面或当前文章的附属信息，包括当前页面或当前文章的相关引用，侧边栏，广告以及导航等有别于主体的内容部分。位于<body>内部时，作为整个页面的侧边栏，位于<article>内部时，作为整片文章的侧边栏。
<footer>标签：用于定义脚注部分，包括文章的版权信息，作者授权等信息。

HTML5其他标签

<datalist>	用于定义选项列表与<inout>配合使用，<input list="types"/><br /><datalist id="types"> <option value="购物"></option> <option value="餐饮"></option> <option value="影视"></option> </datalist>
<details>	用于描述文档或文档某个部分的细节.默认隐藏
<sunmary>	用于包含<details>的标题部分
<mark>	用来定义带有标记的文本
<meter>	用来度量给定范围内的数据
<progreess>	用来表示任务的进度
<ruby>	用于定义字符的注释
<rt>	用于定义字符的解释或发音
<rp>	在<ruby>中使用<浏览器不支持<ruby>时使用>
<time>	定义一个公历时间

HTML5的拖放API

拖放(draggable)是HTML5标准中非常重要的部分，通过拖放API可以让页面的任意元素变得可拖动的，需要将该元素的属性draggable设置为true，表示可拖放，但不携带数据，使用拖放时，通过ondragstart事件绑定事件监听器，并在监听器中设置所需的携带的数据。

拖放时可能触发的事件
ondragstart	被拖放的HTML元素	开始拖动元素时触发该事件
ondrag	被拖放的HTML元素	拖动元素过程中触发该事件
ondragend	被拖动的HTML元素	拖动元素结束时触发该事件
ondragenter	拖动时鼠标所进入的目标元素	被拖动的元素进入目标元素的范围内时触发该事件
ondragleave	拖动时鼠标所离开的元素	被拖动的元素离开当前元素的范围内时触发该事件
ondragover	拖动时鼠标所经过的元素	在所经过的范围内，拖动元素时会不断地触发该事件
ondrop	停止拖放时鼠标所释放的目标元素	被被拖拽的元素释放到当前元素中，会触发该事件

<img>标签和带有href属性的<a>标签默认是可拖动的。

通过dropEffect与effectAllowed属性相结合可以自定义拖放的效果，使用setData()和getData()方法可以将拖放元素的数据传递给目标元素。

dataTransfer对象的属性和方法列表
dropEffect	设置或返回允许操作类型，可以是none，copy，link或mover；如果操作的类型不是effectAllowed属性所允许的类型，则操作失败
effectAllowed	设置或返回被拖放的操作效果类别，可以是none，copy，copyLink，copyMove,link,linkMove,move,all或uninitialized
items	返回一个包含拖拽数据的dataTransferList对象
types	返回一个DOMStringList。包括了存入dataTransfer对象中数据的所有类型
files	返回一个拖拽文件的集合，如果没有拖拽文件，该属性为空
setData(format,data)	向dataTransfer对象中添加数据
getData(format)	从data Transfer对象读取数据
clearData(format)	清除dataTransfer对象中指定格式的数据
setDragImage(icon,x,y)	设置拖放过程中的图标，参数x,y表示图标的相对坐标

在dataTransfer对象所提供的方法中，参数format用于表示在读取，添加或清空数据时的数据格式，包括text/plain(文本文字格式)，text/html（HTML页面代码格式），text/xml(XML字符格式)和text/url-list(URL格式列表)。

HTML5表单元素

HTML5采用了Web Forms 2.0标准新增了许多属性。

form和input标签新增属性
autocomplete	设置表单是否用自动完成的功能，取值可以为on/off，用于form和input标签，同时设置时，后者会覆盖前者。
novalidate	设置表单提交时是否进行验证，使用该属性不进行验证
input标签新增属性
form	为表单元素指定关联的表单，即表单可以位于form标签之外，form="表单ID"
formaction	让按钮动态改变表单提交的URL，即动态的改变表单的的提交服务器处理程序
formenctype	让按钮动态改变表单的enctype属性，
formmethod	让按钮动态设置表单的提交方式，即指定表单不同的提交方式post(隐式)、get(显示)
formtarget	让按钮动态设置表单的target属性，表单提交服务端后返回的处理结果在何处显示“_seif等”
formnovalidate	设置当前元素是否采用HTNL5表单验证，通常提交按钮使用，该属性会覆盖novalidate属性
autofocus	设置在页面加载时是否获得焦点，也页面上只能有一个表单元素具有autofocus属性，无参
placeholder	设置文本框未获得焦点时未输入时，显示的提示信息，当输入内容时，提示信息就会消失
list	引用预定义的datalist，即与datalist数据项绑定在一起，
multiple	允许一个以上的值，
required	输入字段不能为空，提示信息
pattern	规定输入字段的值需要符合指定的模式(正则表达式)，当不符合指定模式，提示信息为title的属性值，并阻止表单提交。

新增的input属性

HTML5为<input>标签新增特定类型，特定范围，数据的有效性验证，日期控件等，

<input>新增标签
email	创建一个email输入框，并检验其内容是否符合email格式，允许为空，除非加上required，multiple属性允许输入多个email地址。地址之间逗号隔开
url	创建一个url输入框，并检验其内容是否符合正确的url格式，
number	创建一个只能输入数字的文本框，属性有max(设置可输入的最大数值)，min(可输入的最小数值)，step(数值之间的合法间隔，默认1)，value(默认值)，不在指定范围，就会弹出提示，阻止提交。
range	生成一个拖动条，只允许输入一定范围内的数值，默认0~100范围属性与number相同
datePickers	日期与时间的输入文本框，包括data(选取年月日)，month(选取年月)，week(年周)，time(时间，小时分钟)，datetime(年月日及时间)等
color	颜色选择文本框，其值为“FFFFFF”格式的文本，
search	专门用于搜索关键字的文本框，多用于手机客户端

自定义表单验证

HTML5提供了checkValidity()和setCustomValidity()方法，用来实现自定义表单。

checkValidity()方法：用于检测表单中的某个输入是否有效，并返回一个布尔值，当通过验证时返回true否则返回false。表单及表单元素都可以调用checkValidity()方法，默认情况下，在表单提交时调用。

setCustomValidity()方法：默认情况下，浏览器为每个HTML5校验都提供了相应的提示信息，可以使用setCustomValidity()方法来实现。

多媒体播放

HTML5中提供了<vodeo/>和<audio>标签，可以直接实现在浏览器中播放视频和音频文件，无须先在浏览器上安装任何插件，只要浏览器本身支持HTML5规范即可，目前各种主流的浏览器都支持。

<video/>和<audio>支持的属性
src	指定要播放的视频或音频的URL地址
autoplay	指定该属性时，视频或音频装载完后会自动播放，无参
controls	指定该属性时，视频或音频显示播放控制条，无参
loop	指定该属性，视频或音频播放完会再次重复播放，无参
perload	用于是否预加载视频或音频，取值为auto(预加载),meta(只载入元数据)，none(不执行加载)，会被autoplay覆盖
muted	指定该属性时，视频或音频输出被静音，无参
poster	仅对<video / >视频标签有效，设置视频下载时的显示图像，或用户单机播放按钮时前显示的图像
width	该属性仅对<voide />标签有效，设置视频播放器的宽度
height	同上，用于设置高度

到目前为止HTML5支持三种视频格式，WebM，Ogg，Mp4。WebM格式具有VP8视频编码和Vorbis音频编码的特点，Oggi格式带有Theora视频编码和Vorbis音频编码格式，Mp4格式带有H.264视频编码格式和AAC音频编码格式，HTNL5推荐使用VP8作为视频编码格式，

未解决浏览器对视频，音频格式的支持问题，可以使用<source/>标签为视频或音频指定锁哥媒体源，<source/>标签的属性列表；

media：设置媒体资源类型，所有浏览器不支持。

src：指定要播放的视频或音频的URL地址，

type：用于设置媒体资源的MIME类型，视频的MINE类型有：vide/ogg ，vide/mp4，video/webm，音频的有MiMe类型有：audio/ogg，audio/mpeg，audio/x-wav；

HTML5多媒体APL:HTML5中提供Video和Audio对象，用于控制视频或音频的回放及当前状态，Video和Vudio对象基本相同，

Video与Audio对象常用的属性
autoplay	用于设置返回是否在就绪后随即播放音频
contrls	用于设置或返回视频(音频)是否该显示控件
currentSrc	用于返回当前视频或音频的URL
currentTime	用于设置返回视频音频中当前播放位置(以秒记)
duration	返回视频(音频)的总长度
defaultMuted	用于设置或返回音频(视频)是否默认静音
ended	返回视频音频的播放是否以结束
readyState	返回视频音频当前的就绪状态
paused	用于设置或返回音频视频是否暂停
volume	用于设置或返回音频视频的音量
loop	用于设置视频或音频结束时是否再次播放
networkState	返回视频(音频)的网络状态
src	用于设置或返回视频的src属性的值
play()	开始播放视频(音频)
pause()	暂停当前播放的视频(音频)
load()	重新加载视频(音频)
canPlayType()	检查浏览器是否能够播放指定的视频(音频)
addTexTrack()	向视频(音频)添加新的文本轨道

Web存储

在HTML5提供了两个与本地存储相关的技术，Web Storage和本地数据库。

Web Storage存储机制是针对HTML4中的Cookice存储机制的一种改善，
本地数据库是HTML5中一个新增的功能，用于在客户端本地创建一个数据库，将原来保存在服务器数据库中的数据直接保存在客户端端本地，减轻了服务器压力，提高了访问速度。

Web Stotage

用于在客户端本地保存数据，包括两种数据存储方式：

window对象提供sessionStorage和localStorage两个子对象，
分别用于Session Storage和Local Storage的数据存储，
sessionStorage和localStorage对象都是Storage接口的实例，
两者对应的属性和方法基本相同，区别在与保存数据的生命周期不同。

（1）,Session Storage：将数据保存在Session对象中，Session是指用户在浏览某个网站时，从进入浏览器到关闭的时间，Session对象用于保存用户浏览器在这段时间内所保存的任何数据，当会话失败时，Session Storage保存的数据也会随之丢失。


  
   
    
     
    
    
     
      interface Storage{
     
    
   
    
     
    
    
     
          readonly attribute unsigned long length;
      //返回Storage中保存的key/value键值对的数量
     
    
   
    
     
    
    
     
          DOMString? key(unsigned long index);
      //返回Storage中第index个key；
     
    
   
    
     
    
    
     
          getter DOMString? getItem(DOMString key);
      //返回Storage中指定的key对应的value值
     
    
   
    
     
    
    
     
          setter create 
      void setItem(DOMString key,DOMString value);
      //方法用于向Storage存入指定的key/value键值对；
     
    
   
    
     
    
    
     
          deleter 
      void reoveTtem(DOMString key);
      //用于将Storage中删除指定key对应的key/value键值对；
     
    
   
    
     
    
    
         
      void clear();
      //删除所有键值对；
     
    
   
    
     
    
    
     
      };

（2）,Local Storage：将数据保存在客户端的硬件设备中，当浏览器关闭后，数据任然存在，在下一次打开浏览器可以继续使用，

LocalStorage与SessionStorage的用法基本相同，都是以key/value键值对的方式来存放数据的，区别在与存放时间更久。当需要存放复杂的数据时，可以借助JSON对数据进行包装。然后存储。读取数据时，可以将JSON字符串转换为JSON对象，然后在页面显示。保存时，将JSON对象转换为JSON字符串，然后将JSON字符串保存到LocalStorage中。

本地数据库

在HTML5中内置了两种本地数据库：SQLLite和IndexedDB。

SQLite数据库是一种通过SQL语言进行访问的文件型SQL数据库，
IndexedDB数据库是一种轻量级NOSQL数据库。

SQLlite数据库：SQLite数据库是一个开源的嵌入式关系型数据库，实现了自包容，零配置和支持事务的SQL数据库引擎，在HTML5中，通过JavaScript对SQLite数据库进行访问操作的具体步骤如下：

（1），创建数据库访问对象：

在创建数据库访问对象时，需要用到openDatabase()方法来创建一个数据库访问对象：

var db = openDatabase(databaseName ,version,description,size);

databaseName表示数据库的名称,version表示数据库版本号,description表示数据库的描述,size表示数据库的大小，该方法返回一个数据库访问对象，当数据库不存在时，则创建一个新数据库并返回数据库访问对象。

（2），使用事务处理：

当访问数据库时，需要使用事务来完成数据库的访问操作事务分为只读事务和读写事务，只读事务使用readTransation()方法实现数据库的查询操作，读写事务使用transaction()方法来实现数据更新及表的基本操作。语法格式基本相同。


  
   
    
     
    
    
     
      db.transaction(
      function(tx){
     
    
   
    
     
    
    
     
          tx.executesql(sqlString,[params],
     
    
   
    
     
    
    
         
      function(tx,rs){
     
    
   
    
     
    
    
         
      //数据库操作成功数据处理
     
    
   
    
     
    
    
     
          },
     
    
   
    
     
    
    
         
      function(tx,error){
     
    
   
    
     
    
    
     
          }
     
    
   
    
     
    
    
     
          );
     
    
   
    
     
    
    
     
      });
     
    
   
    
     
    
    
     
      db
      //表示数据库处理对象，tx//表示事务处理对象，rs//表示结果集
     
    
   
    
     
    
    
     
      executesql()
      //用于执行sql语句，sqlString表示sql语句，params(可选)表示执行SQL语句所需的参数数组，
     
    
   
    
     
    
    
     
      第三个参数表示成功执行SQL语句时调函数，第四个参数表示执行失败时调用的SQL语句，

IndexdDB数据库

IndexedDB是一种轻量级NOSQL数据库，与传统的关系型数据库相比通过数据仓库实现对数据的存取，数据库中可以包含一个或多个对象仓库，每个对象仓库是一个记录集合，在对象仓库中，数据以key/value键值对的方式进行保存，每个数据库都对应的键名，且键名不能重复，每条记录由键和值两部分构成。

在HTML5中使用IndexeDB数据库的具体操作步骤，

（1）代码初始化，获得IndexedDB对象。

var IndexedDB = window.indexdDB||window.webkitIndexedDB||window.mozIndexedDB||widow.msIndexedDB;

（2）打开IndexedDB数据库，并且开启一个具体的事务(Transation);通过IndexedDB对象的open()方法打开数据库。当数据库存在时，返回一个请求连接数据库的请求对象(IDBOpenDBRequest)，当数据库不存在时，会先创建一个数据库并返回该数据库的请求对象。

var dbRequest = IndexedDB.open(dbName,dbVersion);dnNamr表示数据库名称，dbVersion表示数据库版本，通过请求对象DBRequest的onsuccess(成功)或onerror(失败)事件来指定数据库连接成功(失败)时所执行的事件处理函数。

var Request = indexedDB.deleteDatabase(databaseName);//删除数据库


  
   
    
     
    
    
     
      var dbRequest = indexedDB.open(
      "MYDataBase",
      1);
      //获取数据库连接请求
     
    
   
    
     
    
    
     
      dbRequest.onsuccess = 
      function(e){
      //成功触发
     
    
   
    
     
    
    
       
      var idb = e.target.result;
     
    
   
    
     
    
    
     
        alert(
      '数据库连接成功');  
     
    
   
    
     
    
    
     
      };
     
    
   
    
     
    
    
     
      dbRequset.onerror = 
      function(e){
      //失败触发
     
    
   
    
     
    
    
     
          alert(
      '数据库连接失败');
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      dbrequest.onupgradeneeded = 
      function(e){
     
    
   
    
     
    
    
         
      var tx = e.target.transaction;
     
    
   
    
     
    
    
     
          alert(
      '数据库版本更新成功！版本'+e.oldVersion+
      '=>版本'+e.newVersion);
     
    
   
    
     
    
    
     
      };

（3）创建对象仓库(Object Store):IndexedDB数据库使用对象仓库(又称对象存储空间)来存放数据，一个数据库中可以包含任意数量的对象仓库，创建对象仓库的格式：

var store = idb.createObjectStore(storeName，optionlParameters)；idb表示以连接的数据库对象，storeName表示数据库名称，optionalParameters(可选)，是JSON对象类型，用于设置记录中的主键信息。var optionalParameters ={keyPath:'id',autoIncrement:true};//keyPath属性用于设置主键，autoIncrement属性设置主键自动增长。

（4）执行数据库的相关操作(通过监听DOM事件等待操作完成)：在IndexedDB API中，数据操作只能在事务中被执行，当事务处理过程中出现异常时，整个事务操作都将取消。事务分为三类：版本更新事务(Onupgraddeneeded)，只读事务(Readonly)和读写事务(Readwrite）


  
   
    
     
    
    
     
      //开启事务
     
    
   
    
     
    
    
     
      var tx  = idb.transaction(storeNames,[mode]);
     
    
   
    
     
    
    
     
      //idb表示某个已连接的数据库对象，参数storeNames表示数据仓库名，或是由字符串数组组成的字符串数组
     
    
   
    
     
    
    
     
      //mode(可选)表示定义事务的读写模式，readonly和readwrite；
     
    
   
    
     
    
    
     
      //事务开启及监听事务处理结果
     
    
   
    
     
    
    
     
      var tx = idb.transaction(
      'users',
      'readwrite');
     
    
   
    
     
    
    
     
      tx.oncomplete = 
      function(){
     
    
   
    
     
    
    
     
          alerta(
      "数据保存成功");
     
    
   
    
     
    
    
     
      };
     
    
   
    
     
    
    
     
      tx.onabort = 
      function(){
     
    
   
    
     
    
    
     
          alert(
      "数据保存失败");
     
    
   
    
     
    
    
     
      };

（5）根据操作结果进一步操作：数据保存，数据遍历等。在数据仓库中保存数据时，首先获得数据库访问对象IndexedDB。然后使用该对象的transaction()方法开启一个读写事务，并使用事务对象的objectStore()方法获得对象仓库。var objectStore = tx.objectStore(storeName);//tx为具有读写属性的事务对象，参数storeName表示数据仓库，调用对象仓库的add()(如果主键在数据仓库中存在数据则保存失败)或put()(主键在对象仓库中存在，将主键对应的数据进行更新，不存在，保存)方法实现数据保存。数据遍历：当遍历数据时，使用对象仓库的openCursor()方法获取游标对象，然后通过游标的移动来实现数据的遍历


  
   
    
     
    
    
     
      //数据保存
     
    
   
    
     
    
    
     
      var user = {
     
    
   
    
     
    
    
     
      userName:
      'guoqy',
     
    
   
    
     
    
    
     
      age:
      20,
     
    
   
    
     
    
    
     
      };
      //
     
    
   
    
     
    
    
     
      var tx = idb.transaction(
      'users',
      'readwrite');
     
    
   
    
     
    
    
     
      var objectStore = tx.objectStore(
      'users');
     
    
   
    
     
    
    
     
      objectStoer.add(user);
     
    
   
    
     
    
    
     
      //数据遍历
     
    
   
    
     
    
    
     
      var trquest  = objectStore.openCursor();
      //返回一个IDBRequest对象
     
    
   
    
     
    
    
     
      request.onsuccess  =
      function(e){
     
    
   
    
     
    
    
         
      var cursor = e.target.result;
     
    
   
    
     
    
    
         
      if(cursor){
     
    
   
    
     
    
    
     
              alert(cursor.value.usewrName);
      //获取游标中的内容
     
    
   
    
     
    
    
     
              cursor.continue();
      //继续检索
     
    
   
    
     
    
    
     
          }
      else{
     
    
   
    
     
    
    
             
      console.log(
      "检索结束！");
     
    
   
    
     
    
    
     
          }
     
    
   
    
     
    
    
     
      };
     
    
   
    
     
    
    
     
      request.onerror = 
      function(e){
     
    
   
    
     
    
    
     
          consile.log(
      "检索失败！");
     
    
   
    
     
    
    
     
      };

Web Worker

HTML5新增了Web Worker技术，通过多线程的方式将执行时间较长的程序段交由后台现程处理。Web Worker技术多用于预先抓取数据缓存本地，供后期使用，后台I/O处理，大数据分析与计算处理，Canvas绘图中的图形数据运算及生成处理，本地数据库中的数据存取及计算处理。

Web Worker基本应用：

使用Worker类的构造函数创建一个Wroker对象(即后台线程)，语法：var worker = new Worker(URL);//URL为在后台线层中执行的脚本文件的URL地址。

通过worker对象的postMassage()方法向后台线程发送消息：worker.postMassage(message);

通过监听worker对象的onmessage事件接受后台线程回穿的数据并进行处理：worker.onmessage =function(e){alert(e.data);};

当内部线程执行完毕后，浏览器仍在继续监听对象，直到被终止为止。：worker.terminate();

由于后台线程代码位于独立的JS文件中，所以无法访问当前页面中的window，document，parent等对象。当需要输出测试信息时，可以使用console.log()方法向控制台输出信息。

Worler线程嵌套：在HTML5中，Worker线程中允许嵌套子线程，通过线程的嵌套将一个大的后台线程切分成多个子线程，每个子线程各自完成相对独立的一部分工作。

使用Chrome浏览器使用Web worker需要发布到服务器上才可以用。Firefox与IE11可以本读预览

在HTML5中使用

jQuery基础

Jquery是一个基于JavaScript的开源框架。设计理念为“少写多做”是一种将JavaScript，CSS，DOM，Ajax等特征集于一体的强大框架，通过简单的代码来实现各种页面特效。提供功能有：访问和操作DOM元素，强大的选择器，可靠的事件处理机制，完善的Ajax操作，链式操作方式。

一，搭建jQuery开发环境：

引入jQuery库：、<script type= "text/javascript" src = "js/jquery-1.x.js"></script>

jQuery的简单测试：在页面中引入JQuery库后，通过$()函数来获取页面元素，并对元素进行定位，或效果处理，$("muDiv")与$jQuery("muDiv")完全等价。

二，DOM对象和jQuery对象：

在JavaScript中通过getElementById(),getElementsClassName(),querySelector()等方法回去HTMl元素。

jQuery对象通过jQuery库中的提供的方法来获取元素对象，jQuery对象本身不能直接调用DOM对象的方法，而是将jQuery对象转换成DOM对象后在调用DOM对象的方法，

DOM对象转成jQuery对象：使用jQuery库中的$()方法将DOM对象封装起来，并返回一个jQuery对象，

jQuery对象转换为DOM对象，可以把jQuery对象看做是一个数组，通过索引[index]或者get(index)方法来获取DOM对象。


  
   
    
     
    
    
     
      var domObject  =
      document.getElementById(
      "myDiv");
     
    
   
    
     
    
    
     
      alert(domObject.innerHTML);
     
    
   
    
     
    
    
     
      var jQueryObject = $(domObject);
      //将dom对象转换成jquery对象
     
    
   
    
     
    
    
     
      alert( jQueryObject.html() );
     
    
   
    
     
    
    
     
      var domObject1 = jQueryObject[
      1]
      //将jQuery对象转换为DOM对象，通过下标获取DOM对象;
     
    
   
    
     
    
    
     
      var domObject2  = jQueryObject.get(
      1);
      //通过get方法获取DOM对象。

jQuery选择器：冒号开头，修饰元素

基本选择器

$("#ID")	根据元素的ID属性进行匹配	单个jQuery对象
$(".class")	根据元素的class属性进行匹配	jQuery对象数组
$("element")	根据元素的标签名进行匹配	jQuery对象数组
$("selector1 ,select2……")	将每个选择器匹配的结果合并后其一返回	jQuery对象数组
*$("")**	匹配页面所有元素	jQuery对象数组

层次选择器

$("ancestor descendant")	选取ancsstor元素中的所有的子元素	jQuery对象数组
$("parent >chid")	获取parent元素中的直接子元素	jQuery对象数组
$("prev+next")	获取紧邻prev元素之后的next元素(有共同的父元素)与$("prev").next("next")相同	jQuery对象数组
$("prev~siblings")	获取prev元素之后的siblings兄弟元素，有共同的父元素，不必紧邻与$("prev").nextAll("siblings")相同	jQuery对象数组

过滤选择器

简单过滤选择器
：first	选取第一个元素	单个jQuery对象
：last	选取最后一个元素	单个jQuery对象
：even	选取所有索引值为偶数的元素，从0开始	jQuery对象数组
：odd	选取所有索引值为奇数的元素，从0开始	jQuery对象数组
：header	选取所有标题元素	jQuery对象数组
：foucs	选取当前获取焦点的元素	jQuery对象数组
：root	获取文档的根元素	单个jQuery对象
：animated	选取所有正在执行动画效果的元素	jQuery对象数组
：eq(index)	选取所有索引等于index的元素，0开始	单个jQuery对象
：gt(index)	选取索引大于index的元素，0开始	jQuery对象数组
：lt(index)	选取所有小于index的元素，0开始	jQuery对象数组
：no(selector)	选取selector之外的元素，0开始	jQuery对象数组

内容选择过滤器

内容过滤选择器
：contains(text)	选取包含text内容的元素	jQuery对象数组
：has(selector)	选取包含标签名selector的元素	jQuery对象数组
：empty	选取所有不包含子元素或文本的空元素	jQuery对象数组
：parent	选取含有子元素或文本的元素	jQuery对象数组

可见性过滤选择器
：hidden	选取所有不可见的元素，或者type为hidden的元素	jQuery对象数组
：visible	选取所有可见元素	jQuery对象数组

属性过滤选择器
[attribute]	选取包含给定属性的元素	jQuery对象数组
[attribute = value]	选取属性等于某个特定值的元素	jQuery对象数组
[attirbute !=value ]	选取属性不等于或不包含某个特定值的元素	jQuery对象数组
[attribute^=value]	选取属性以某个值开始的元素	jQuery对象数组
[attribute$=value]	选取属性以某个值结尾的元素	jQuery对象数组
[attribute*=value]	选取属性中包含某个值的元素	jQuery对象数组
[attribute1][attribute2][atttibute3]	复合属性选择器，需要同时满足对个条件时使用	jQuery对象数组

子元素过滤器
：first-child	选取每个父元素中的第一个元素，结构上第一个	jQuery对象数组
：last-child	选取每个父元素的最后一个元素，结构上第一个	jQuery对象数组
：only-child	当父元素只有一个子元素时，进行匹配，负责不匹配	jQuery对象数组
：nth-child(N\|odd\|even)	选取每个父元素中第N个子元素或奇偶元素	jQuery对象数组
：first-of-type	选取每个父元素中的第一个元素，相同类型第一即可	jQuery对象数组
：last-of-type	选取每个父元素的最后一个元素，相同类型第一即可	jQuery对象数组
：only-if-type	当父元素只有一个子元素时匹配，否则不匹配，相同类型一个即可	jQuery对象数组

表单对象属性过滤选择器
：enabled	选取表单中属性为可用的元素	jQuery对象数组
：disabled	选取表单中属性为不可用的元素	jQuery对象数组
：checked	选取表单中被选中的元素(单选，复选)	jQuery对象数组
：selected	选取表单中被选中的选项元素	jQuery对象数组

在jQuery对象中，text()方法用于设置或显示元素的文本内容，html()显示设置元素是HTML内容，length用于表示所选元素集合的数量

：input	选取input,textarea,select,button元素	：submit	返回jQuery对象数组
：text	返回jQuery对象数组	：image	返回jQuery对象数组
：password	返回jQuery对象数组	：button	返回jQuery对象数组
：radio	返回jQuery对象数组	：file	返回jQuery对象数组
：chrckbox	返回jQuery对象数组	：hidden	返回jQuery对象数组

jQuery的基本操作

通过jQuery的选择器定位到页面得每个元素后，可以对元素进行各种操作。

属性操作

属性操作函数
attr(name\|pro\|key,val\|key,fn)	获取或设置元素的属性，参数name表示获取该元素的属性值，properties表示由key/value键值对构成的集合，如JSON对象，key,val表示需要设置的属性名和属性值，key,fu表示使用函数返回值做属性的值。
removeAttr(name)	删除元素匹配元素的指定属性，name为属性名
prop(name\|pro\|key,val\|fn)	获取或设置匹配元素集合中的第一元素属性,多用于boolean类的属性操作，参数与attr相同,只能设置特性
removeProp(name)	删除由prop()方法对属性进行操作的属性集，

参数function(index,oldAttr):表示使用函数的返回值作为属性的值，index表示当前元素的索引位置，oldAttr表示当前元素在修改之前的属性值。

样式操作

样式操作
addClass(className\|calssName1 className2...calssNamen\|function(index,oldClassNmae))	方法用于对一个或多个匹配元素追加样式,calssname 表示样式名
removerClass( \|className\|calssName1 className2...calssNamen)	方法用于移除匹配元素的一个或对个样式，也可以一次性移除元素的所以样式
toggleClass(className\|calssName,switch)	方法法用于元素之间的重复切换，当元素的指定样式存在时，将该样式移除，否者添加该样式，className表示切换样式名，参数switch表示切换开关，默认为true，当为true时允许切换，反之不切换。
css(attrName\|key,value\|properties\|attrName,function(index,oldValue))	参数attrName表示要访问的属性名称，返回该属性的值，key,value表示设置某一样式，key为属性名，value表示属性值，properties表示由key/value键值对构成的集合，如JSON对象，key,val表示需要设置的属性名和属性值，attr,fu表示使用函数返回值做属性的值。
hasClass（）	是否有该属性

内容操作

在jQuery中提供html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值，当方法没有提供参数值时，表示获取匹配元素的内容或值，当方法携带参数时，表示对匹配元素的内容或值的修改，

内容操作方法
html( \|htmlCode\|function(index,oldHtmCode))	html()方法用于获取第一个匹配元素的HTML内容或修改元素的HTML内容，该方法仅对XHTML文档有效，不能用于XML文档，参数function(index,oldHtmlCode)表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的位置，oldHtmlCode表示当前元素在修改之前的HTNL内容
text( \|textContent\|function(index,oldTextContent))	无参方法用于返回第一个匹配元素的文本内容，有参方法用于设定文本内容，同上
val( \|newValue\|arrayValue\|function(index,oldValue) )	val()方法用于设置或获取表单元素的值，包括文本框，下列列表，单选框和复选框等元素，当元素允许多个时，返回一个包含被选项的数组，val()参数同上。


  
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
          <button id=
      "but">提交</button> 喜欢我的理由：
     
    
   
    
     
    
    
     
          <select multiple name=
      "list" id=
      "list">
     
    
   
    
     
    
    
             
      <option value="cute">可爱</option>
     
    
   
    
     
    
    
             
      <option value="tender" selected>温柔</option>
     
    
   
    
     
    
    
             
      <option value="taset">大方</option>
     
    
   
    
     
    
    
     
          </select>
     
    
   
    
     
    
    
         
      <script>
     
    
   
    
     
    
    
     
              $(
      "#but").click(
      function() {
     
    
   
    
     
    
    
     
                  $(
      "select").val([
      "taset", 
      "tender"]);
     
    
   
    
     
    
    
     
              })
     
    
   
    
     
    
    
         
      </script>

嗯，她讲，我看的是未来而不是现在，很高兴听到她讲这样的话，至少算是对你的答复吧，所以那，要努力学习，不浪费一点时间，提高自己的各方面能力，嗯，要变得很厉害才可以去喜欢她，加油吧生活，不要忧郁那么多事情啦，为了父母，为了她，为了自己还不愿死去的心那。

18.10.3 早

jQuery事件处理

事件处理是指在某一时刻页面元素对某种操作的响应处理，jQuery中的事件处理是在JavaScript事件处理机制基础上的进一步扩展与增强，提高了事件处理能力。

页面加载事件：对整个页面而言，可以看做一个DOM树，在jQuery中$(document).ready()方法用于处理页面加载完毕时的事件，极大的提高了web响应速度，DOM元素就绪就会进行事件处理，可以多次执行。

$(domcument).ready()有两种简写形式：
- $(function(){});
- $().ready();

事件绑定：所谓事件绑定，是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事先绑定的事件处理函数，在jQery中，提供了强大的API来执行事件的绑定操作，如bind(),one(),live(),toggle(),delegate(),on()和hober()等

bind():方法用于对匹配元素的特定事件绑定的事件处理函数：

bind(types,[data],fu);参数types表示事件类型。是一个或多个事件类型构成的在字符串，类型之间空格隔开，事件如鼠标键盘事件，鼠标事件click，submit，mouseover和mouseup等，参数data(可选)表示传递给函数的额为数据，在事件处理函数中通过event.data来获取所传入的额为数据；参数fu是指所绑定的事件处理函数。


  
   
    
     
    
    
     
      $(
      "p").bind(
      "click",
      function(){
     
    
   
    
     
    
    
     
             alert($(
      this).text());        
     
    
   
    
     
    
    
     
      });
      //绑定一个事件
     
    
   
    
     
    
    
     
      $(
      "p").bind(
      "mouseenter mouseleave",
      function( ){
     
    
   
    
     
    
    
     
           $(
      this).toggleClass(
      "entered");
     
    
   
    
     
    
    
     
      });
     
    
   
    
     
    
    
     
      $(
      "button").bind({
     
    
   
    
     
    
    
         
      click:
      function(){$(
      "p").slideToggle();},
     
    
   
    
     
    
    
         
      mouseover:
      function(){$(
      "body").css(
      "background-color",
      "red");},
     
    
   
    
     
    
    
         
      mouseout:
      function(){$(
      "body").css(
      "background-color",
      "#ffffff");}
     
    
   
    
     
    
    
     
      });
      //绑定多个事件
     
    
   
    
     
    
    
     
      function handler(event){
     
    
   
    
     
    
    
     
          alert(event.data.foo);
     
    
   
    
     
    
    
     
      }
      //传递数据
     
    
   
    
     
    
    
     
      $(
      "p").bind(
      "click",{
      foo:
      "bar"},handler);

mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。

mouseenter(当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件)和mouseleave(当鼠标指针离开被选元素时，会发生 mouseleave 事件。)只在父元素触发，当鼠标穿过一个元素时，只会触发一次。

mouseover和mouseout比mouseenter和mouseleave先触发

因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用

jQuery为常用的事件(如click，mouseover和mouseout等)提供一种简单的写法

$("input[type=button]").click(function)(){$(this).toggleClass("entered");});

this是执行上下文(Excution Context)的一个重要的对象，用于指明触发事件的对象本身，$(this)是jQuery对this对象的封装，用于在事件处理中收集事件触发者的信息。

one():用于对于匹配元素的特定事件绑定一个一次性的事件处理函数，事件处理函数只会被执行一次，
- one()方法的语法格式与bind（）方法基本相同，
- one(types,[data],fn),参数意思相同。$("p").one("click",function(){alert($(this).text(0);});
toggle([speed],[easing,[fu1,fu2,fu3,fu4...]):方法用于模拟鼠标连续单机事件，
- 参数speed用于设置元素的隐藏(显示)速度，默认0，取值范围是slow，normal，fast或毫秒数。参数easing表示指定动画的切换效果，取值是swing(默认)和linear。参数fn1,fn2表示1~n次单机的事件处理函数，在事件处理时为循环机制即最后一次处理完循环到第一次。同时具有参数speed和fu时，表示以speed上速度显示或隐藏，在动画完成后在执行fu事件处理函数。该方法在1.9版本中被删除。
live()：bind()方法绑定的事件，只能针对页面中存在的元素进行绑定，而bind()绑定后新增的元素没有事件响应，使用live()方法能够对页面所有匹配元素绑定操作事件，包含存在的元素和新增加的元素，1.7+需要版本插件，
- ·live(types，fu)参数types表示事件类型，是一个或多个事件构成的字符串，空格隔开，fu表示事件处理函数。
delegate(childSelector,[types],[data],fu)方法在匹配元素的基础上，对其内部符合条件的元素绑定事件处理函数。
- 参数childSelector表示一个选择器字符串，筛选触发事件的元素，参数types表示事件类型，是一个或多个事件构成的字符串，空格隔开，参数data(可选)表示传递给函数的额外数据，通过event.data调用，fu表示事件处理函数，


  
   
    
     
    
    
     
      $(
      "div").live(
      "click",
      function(){
     
    
   
    
     
    
    
     
      alert($(
      this).html());
     
    
   
    
     
    
    
     
      });
     
    
   
    
     
    
    
     
      &(
      "div").delegate(
      "buntton",
      "click",
      function(){
     
    
   
    
     
    
    
     
          $(
      "p").slideToggle();
     
    
   
    
     
    
    
     
      });
     
    
   
    
     
    
    
     
      $(
      "div").delegate(
      "#DataBindBtn",
      "click",{
      mas:
      "额外传递的数据"},
      function(e){
     
    
   
    
     
    
    
     
              alert(e.data.mas);
     
    
   
    
     
    
    
     
      });

delegate()事件处理程序优于live(),适用于当前存在和未来增加的元素。在.17+要优先考虑on()方法。

on(types,[childSelector],[data],fu)1.7+中新增，用于绑定事件所需的函数，可以代替bind(),line(),delegate()等方法。参数types表示事件类型，是一个或多个事件类型构成的字符串，childSelector表示一个选择器字符串，筛选元素，data(可选)表示传递给函数的数据，fu表示事件函数。
hover(overfu,[outfu])方法用于模拟鼠标悬停事件，当鼠标悬停在某元素上是触发overfu函数，移除是触发outfu，只有一个时触发两次overfu。

解除事件绑定：在jQuery中提供了unbind()he undelegate()方法，分别解除bind()方法和delegate方法通过参数指明解除的绑定事件，默认全部解除，在1.7+中提供off()方法用于解除on(),bind(),delerate()方法，参数与on相同。

事件对象（event）

jQuery事件解决浏览器兼容问题

事件对象常见属性
pageX	鼠标指针相对文档的左边缘的位置
pageY	鼠标指针相对文档的上边缘的位置
target	返回触发事件的元素
type	返回事件的类型
whilch	返回鼠标键盘按下的键
data	用于传递事件之外的额外数据

事件对象常用的方法列表
preventDefaule()	阻止元素发生默认的行为(当单机提交按钮时阻止提交)
stopPropagation()	阻止事件冒泡
isDefaultPrevented()	根据事件的冒泡是否调用过preventDefaule()方法返回一个布尔值
isPropagationStopped()	根据事件对象中是否调用stopPropagation()方法来返回一个布尔值

jQuery进阶

jQuery文档处理

DOM元素有两个属性，

innerHTML和outerHTML。

innerHTML表示当前元素中HTML内容(不包括元素的标签部分)，
outerHTML表示当前元素的所有内容(包括元素的HTML内容和元素的标签两部分)。

代码中$("span",this)表示在当前元素中查找<span>元素，$("span",this).length表示当前元素中拥有的<span>元素个数。

1，创建节点，根据W3c中的HML DOM标准，HTML文档的所有内容都是由节点，包括文档节点，元素节点，文本节点，属性节点和注释节点构成，节点相互关联，形参DOM树，在页面添加元素，需要找到该元素的上一级节点，再通过$()完成节点的创建，然后完成节点的添加操作，$()函数用于动态创建元素节点，

$(htmlcode);//htmlCode表示动态创建DOM元素的HTML字符串；返回由该元素封装的jQuery对象。var span1 = $("<span></span>");

2,插入节点：在动态创建HTML元素后，还需要将节点插入到文档，分内部插入和外部插入

插入节点的方法列表
内部插入	$(selector).append(content\|function(index,oldHtmlCode))	向每个匹配的selector元素内部尾部追加由content\|fu指定的内容，selector表示追加内容的元素，content表示要追加的内容
	$(content\|selector).appendT(selector)	把所有匹配的元素或内容追加到指定的元素的尾部，content\|selector表示要追加的内容，selector表示追加内容的元素
	$(selector).prepend(content\|function(index,oldHtmlCode))	向每个匹配的元素内部头部前置内容，select表示插入内容的元素，content表示要插入的内容
	$(content\|selector).prependTo(selector)	把所有匹配的元素\|内容前置到指定的元素的头部，content\|selector表示插入的内容，selector表示插入内容的元素
外部插入	$(selector).after(content\|function(index[,htmlCode])).	在每个匹配元素之后插入内容，selector表示所匹配的元素，content\|fu表示插入的内容，
	$(content\|selector).insertAtter(selector)	把所有匹配的元素插入指定元素的后面,content\|selector表示被插入的内容，selector表示所匹配的元素
	$(select).before(content\|function(index[,htmlCode]))	在每个匹配的元素之前插入内容，selector表示所匹配的元素，content\|fu表示被插入的内容。
	$(selector\|selector)insertBefore(selector)	把所有匹配的元素插入到指定元素的前面，selector\|content表示要插入的内容，selector表示匹配的元素。

function(indec,oldHtmlCode):表示将函数的返回值作为插入的内容，index表示当前元素在集合索引中的位置，oldHtmlCode表示当前元素在修改前的HTML内容。

function(index[,htmlCode]):表示将函数的返回值内容作为插入的内容，index表示当前元素在集合的索引位置，htmlCode表示当前元素的HTNL内容，当插入内容时，不会改变元素中的HTMl内容。

在追加和插入元时，插入的内容可以是HTML字符串，DOM元素（或数组）,Jquery对象，函数(返回值)，当操作内容是DOM元素时（即appendTo()与prependTo(),insertAtter()，insertBofore）,该元素将从原位置上消失，即该操作属于元素的移动，不是复制。

3，复制节点：在jQuery中提供clone()方法，用于复制DOM节点(包括子节点和属性节点)

语法：$(selector).clone(includeEvents[,deepEvents]):selector表示需要复制的节点元素，includeEvents(可选，布尔型)，表示是否同时复制元素的附加数据和绑定事件，默认false。参数deeEvents(可选，布尔型)表示是否同时复制元素中的所有子元素的附加数据和绑定事件，默认false。

4，删除节点：在jQuery中提供remover()和datach()方法，用于删除元素节点，

empty()方法用于清空当前颜色中的内容，标签部分保留
remover():删除所匹配的元素，包括元素的文本节点和子节点。返回jQuery数组，包含被删除元素的基本内容，不包含所绑定的事件和附加数据信息。$(selector).remover();
detach():方法用于删除所匹配的元素，包括该元素的文本节点和子节点。返回jQuery对象或数组，包含含被删除元素的所有数据，
empty():用于清空元素的内容(包括所有的文本和子节点)，但不删除该元素。

5，包裹节点：指在现有节点的外围包裹一层其他的元素标签，使当前节点成为新的元素子节点，

jQuery提供了wrap()与wrapAll()方法

$(selector).wrap(html|Element):用于将所匹配的元素使用HTML或DOM元素包裹(单个包裹)selector 表示被包裹的匹配元素，html表示用于包裹的html标签，Element表示用于包裹的DOM元素
$(selector).wrapAll(html|Element):用于将所匹配的元素使用HTML或DOM元素整体包裹，selector表示被包裹的匹配元素，html和Element表示包裹的HTML标签和DOM元素。

unwrap():用于删除所匹配的元素的父节点，能够快速取消wrap()方法产生的效果。

遍历节点：在jQuery中对DOM遍历操作：祖先遍历，后代遍历，同胞遍历，和筛选遍历

祖先遍历：又称向上遍历，常用的方法有：

$(selector).parent([childSelector]):用于返回所匹配元素的直接父元素，并允许使用选择器进行筛选，
$(selector).parents([childSelector]):用于返回所匹配元素的所有的祖先节点，并允许使用选择器进行筛选，
$(selector).parentsUntil([childSelctor|element]):用于返回所匹配元素与改定元素之间的所有祖先节点，并允许选择器筛选。
$(selector):表示所匹配的元素，参数childSelector(可选)表示指定的选择器，用于筛选$("span").parent(".imageDiv")//返回span标签具有.image样式的直接父元素。

后代遍历：又称向下遍历，通过向下遍历查找元素的后代元素

$(selector).children([childSelector])方法用于返回所匹配元素的直接子元素，允许选择器筛选。
$(selector).find(expression|jQuery|element):用于返回所匹配元素的所有后代元素，允许表达式，jQuery对象或DOM对象对元素筛选。
$(selector).contents():用于返回所匹配元素的子元素(包括文本节点和注释节点)，还可以用于查找iframe页面的子元素
$(selector):表示所匹配的元素，参数childSelector(可选)表示指定的选择器，参数expression|jQuery|element表示表达式，jQuery对象或DOM对象，用于筛选。

同胞遍历：同胞节点指拥有相同父元素的节点，jQuery同胞遍历的方法：

$(selector).siblings():用于返回所匹配元素的同胞元素(但不包括匹配元素)，并使用选择器进行筛选。
$(selector).next([childSrlrctor]):用于返回所匹配元素的紧邻的同胞元素，并允许使用选择器进行筛选，
$(selector).nextAll([childSelector]):用于返回所匹配的元素所有紧随的同胞元素，并允许使用选择器进行筛选，
$(selector).nextUntil([express|element]):用于返回用于返回所匹配元素与改定元素之间的所有同胞元素

节点过滤：

$(selector).first(expression|jQueryObject|element|function(index)):用于返回符合筛选规则的元素。
$(selector).not(expression|jQueryObject|element|function(index)):返回规则之外的其他元素，功能与first相反。
- expression：表示对匹配的元素使用expression选择器进行筛选。
- jQueryObject：表示在匹配的元素中筛选jQueryObject类型的元素。
- elememt:表示在匹配的元素中筛选element类型的元素
- function(index)：表示使用函数筛选，index表示当前元素在集合中的位置，当函数返回true时符合筛选条件，反之。

jQuery动画效果：

动画及特效的方法
$(selector).show([speed],[fu])	显示被隐藏的元素，speed表示速度，默认0，取值可以为slow，normal，fast，fu表示动画完成时触发的函数
$(selector).hide([speed],[fu])	隐藏可见元素，speed表示速度，默认0，取值可以为slow，normal，fast，fu表示动画完成时触发的函数
$(selector).slideDown([speed],[easing],[fu]);	以滑动的方式显示隐藏可见元素，
$(selector).slideUp([speed],[easing],[fu])	以滑动的方式隐藏可见元素
$(selector).slideToggle([speed],[easing],[fu])	使用滑动效果，在显示和隐藏状态之间进行切换，
$(selector).fadeIn([speed],[easing],[fu])	使用淡入效果显示一个隐藏的元素
$(selector).fadeTo([speed],[easing],[fu])	使用淡出效果隐藏一个显示的元素，隐藏后占据空间
$(selector).fadeToggle([speed],[easing],[fu])	在fadeTo和FadeIn之间切换，隐藏后不占据空间
$(selector).amimate(([speed],[easing],[fu])	创建自定义动画函数
$(selector).stop()	停止当前正在运行的动画
$(selector).delay(毫秒数])	将队列中的函数延时执行，即两次动画的时间间隔
$(selector).finish()	停止当前正在运行的动画，删除所有排练动画，并完成匹配元素的所有动画

数组和对象的擦操作：

$(selector).each(function(index,element)):多用于DOM对象数组中的元素遍历
$.each(object,function(index,element)):Array数组和JSON对象遍历

function表示回调函数，用于对数组中的元素遍历，index表示遍历下标，element表示值。

$.extend(target,object..)|({propertyName:propertyValue})|({functionName:function(){}}):

参数target表示扩展的目标对象，参数object表示扩展对象的参照，将参照的属性扩展到目标对象。参数propertyName|functionName表示扩展jQuery对象本身的属性方法，用于在jQuery命名空间上新增一个新属性方法。

$.merge(firstArray,secondArray):用于将两个数组进行合并。把第二和合并到第一个。返回第一个。
$.unique(target):根据元素在文档中出现的先后顺序对DOM元素数组进行排序。
$.parseJSON(JSON字符串)：用于将JSON字符串转换为JSON对象。

jQuery插件：开发的jQuery插件常见的有三种：封装全局函数的插件，封装对象方法的插件，自定义选择器插件。

封装全局函数的插件：将独立的函数追加到jQuery命名空间之下，通过jQuery或$进行访问。


  
   
    
     
    
    
     
      <script type = 
      "text/javascript">
     
    
   
    
     
    
    
     
          $.extend({
     
    
   
    
     
    
    
             
      sayHello:
      function(){
     
    
   
    
     
    
    
                 
      console.log(
      "Hello,"+(name?name:
      "SQL")+
      "!");
     
    
   
    
     
    
    
     
      }    
     
    
   
    
     
    
    
     
      })；
     
    
   
    
     
    
    
     
      $.sayHello();
     
    
   
    
     
    
    
     
      $.sayHello(
      "asd");
     
    
   
    
     
    
    
     
      $.sayHello(
      "fds");
     
    
   
    
     
    
    
     
      </script>

封装对象方法插件：指将对象方法封装起来，用于对选择器所获得的jQuery对象进行操作。通过$.fu.方法名的方式添加。

自定义选择器插件

在开发jQuery插件时注意：

插件名推存使用jQuety.[插件名].js
所有的对象方法都附件到Jquery.fu对象上，所有的全局函数都附加到jQuery对象本身。
在插件内部this表示获取当前选择器的jQuery对象，在普通事件中表示this表示触发事件的当前DOM元素。
以分号结束。
插件返回一个jQuery对象，保证链式操作。

转载：https://blog.csdn.net/sanhewuyang/article/details/79553383

查看评论

飞道的博客