顶级架构师学习——第四阶段：重拾html页面

本文链接：https://blog.youkuaiyun.com/qq_39391192/article/details/83048167

一、HTML

1、什么是html？

HTML：Hyper Text Markup Language ：超文本标记语言。
超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的语言，它不是编程语言

2、html的语法和规范

- HTML 文件都是以.html 或者.htm 结尾的，建议使用.html 结尾！
- Html 文件分为头部分<head></head>和体部分<body></body>。
- Html 标签都是由开始标签和结束标签组成(<hr />)。
- Html 标签忽略大小写，但建议使用小写。

3、常用标签及取值

标题标签

1.<h1> 用于修饰标题，从<h1>到<h6>大小逐渐变小

属性	值	描述
align	left center right justify	不推荐使用。请使用样式替代它。规定标题中文本的排列。

属性

值

描述

align

left
center
right
justify

不推荐使用。请使用样式替代它。

规定标题中文本的排列。

<h1>落饼枫林</h1>
<h2>欢迎加入我们</h2>

2.<hr> 在页面中创建一条水平分割线

属性	值	描述
align	center left right	不赞成使用。请使用样式取代它。规定 hr 元素的对齐方式。
noshade	noshade	不赞成使用。请使用样式取代它。规定 hr 元素的颜色呈现为纯色。
size	pixels	不赞成使用。请使用样式取代它。规定 hr 元素的高度（厚度）。
width	pixels %	不赞成使用。请使用样式取代它。规定 hr 元素的宽度。

<hr />
<hr size="5" />
<hr noshade="noshade" />

字体标签

<font> 用于设置字体尺寸、字体颜色等

属性	值	描述
color	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取代它。规定文本的颜色。
face	font_family	不赞成使用。请使用样式取代它。规定文本的字体。
size	number	不赞成使用。请使用样式取代它。规定文本的大小。

属性

值

描述

color

rgb(x,x,x)
#xxxxxx
colorname

不赞成使用。请使用样式取代它。

规定文本的颜色。

face

font_family

不赞成使用。请使用样式取代它。

规定文本的字体。

size

number

不赞成使用。请使用样式取代它。

规定文本的大小。

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

格式标签

1.<b> 粗体

2.<i> 斜体

段落标签

1.<p> 定义段落，段落前后有空行

属性	值	描述
align	left right center justify	不赞成使用。请使用样式取代它。规定段落中文本的对齐方式。

属性

值

描述

align

left
right
center
justify

不赞成使用。请使用样式取代它。

规定段落中文本的对齐方式。

2.<br> 换行标签

<br />

表单标签

1.<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	pixels %	规定单元边沿与其内容之间的空白。
cellspacing	pixels %	规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	% pixels	规定表格的宽度。

2.<tr> 定义 HTML 表格中的行。

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取而代之。规定表格行的背景颜色。
char	character	规定根据哪个字符来进行文本对齐。
charoff	number	规定第一个对齐字符的偏移量。
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式。

3.<td> 定义 HTML 表格中的标准单元格。

属性	值	描述
abbr	text	规定单元格中内容的缩写版本。
align	left right center justify char	规定单元格内容的水平对齐方式。
axis	category_name	对单元进行分类。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取而代之。规定单元格的背景颜色。
char	character	规定根据哪个字符来进行内容的对齐。
charoff	number	规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_cells'_id	规定与单元格相关的表头。
height	pixels %	不赞成使用。请使用样式取而代之。规定表格单元格的高度。
nowrap	nowrap	不赞成使用。请使用样式取而代之。规定单元格中的内容是否折行。
rowspan	number	规定单元格可横跨的行数。
scope	col colgroup row rowgroup	定义将表头数据与单元数据相关联的方法。
valign	top middle bottom baseline	规定单元格内容的垂直排列方式。
width	pixels %	不赞成使用。请使用样式取而代之。规定表格单元格的宽度。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

4.<ol> 定义有序列表。

属性	值	描述
compact	compact	HTML5 中不支持。HTML 4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。
reversed	reversed	规定列表顺序为降序。(9,8,7...)
start	number	规定有序列表的起始值。
type	1 A a I i	规定在列表中使用的标记类型。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

5.<ul> 定义无序列表。

属性	值	描述
compact	compact	不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
type	disc square circle	不赞成使用。请使用样式取代它。规定列表的项目符号的类型。

属性

值

描述

compact

不赞成使用。请使用样式取代它。

规定列表呈现的效果比正常情况更小巧。

type

disc
square
circle

不赞成使用。请使用样式取代它。

规定列表的项目符号的类型。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

6.<frameset> 可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

属性	值	描述
cols	pixels % *	定义框架集中列的数目和尺寸。有关 cols 属性的详细信息。
rows	pixels % *	定义框架集中行的数目和尺寸。有关 rows 属性的详细信息。

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

7.<frame> 定义 frameset 中的一个特定的窗口（框架）。

属性	值	描述
frameborder	0 1	规定是否显示框架周围的边框。
longdesc	URL	规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	定义框架的上方和下方的边距。
marginwidth	pixels	定义框架的左侧和右侧的边距。
name	name	规定框架的名称。
noresize	noresize	规定无法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。
src	URL	规定在框架中显示的文档的 URL。

8.<form>

用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

属性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

9.<input> 用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型。
align	left right top middle bottom	不赞成使用。规定图像输入的对齐方式。
alt	text	定义图像输入的替代文本。
autocomplete	on off	规定是否使用输入字段的自动完成功能。
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
form	formname	规定输入字段所属的一个或多个表单。
formaction	URL	覆盖表单的 action 属性。（适用于 type="submit" 和 type="image"）
formenctype	见注释	覆盖表单的 enctype 属性。（适用于 type="submit" 和 type="image"）
formmethod	get post	覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"）
formnovalidate	formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
formtarget	_blank _self _parent _top framename	覆盖表单的 target 属性。（适用于 type="submit" 和 type="image"）
height	pixels %	定义 input 字段的高度。（适用于 type="image"）
list	datalist-id	引用包含输入字段的预定义选项的 datalist 。
max	number date	规定输入字段的最大值。请与 "min" 属性配合使用，来创建合法值的范围。
maxlength	number	规定输入字段中的字符的最大长度。
min	number date	规定输入字段的最小值。请与 "max" 属性配合使用，来创建合法值的范围。
multiple	multiple	如果使用该属性，则允许一个以上的值。
name	field_name	定义 input 元素的名称。
pattern	regexp_pattern	规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder	text	规定帮助用户填写输入字段的提示。
readonly	readonly	规定输入字段为只读。
required	required	指示输入字段的值是必需的。
size	number_of_char	定义输入字段的宽度。
src	URL	定义以提交按钮形式显示的图像的 URL。
step	number	规定输入字的的合法数字间隔。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。
value	value	规定 input 元素的值。
width	pixels %	定义 input 字段的宽度。（适用于 type="image"）

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

图片标签

<img> 向网页中嵌入一幅图像。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

必需的属性

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

可选的属性

属性	值	描述
align	top bottom middle left right	不推荐使用。规定如何根据周围的文本来排列图像。
border	pixels	不推荐使用。定义图像周围的边框。
height	pixels %	定义图像的高度。
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。
width	pixels %	设置图像的宽度。

媒体标签

1.<audio> 定义声音，比如音乐或其他音频流。

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

2.<video> 定义视频，比如电影片段或其他视频流。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

更多标签请到这个网站去找：http://www.w3school.com.cn/tags/index.asp

二、CSS

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，通常存储在 CSS 文件中，多个样式定义可层叠为一。

语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {property: value}

body {
    font-family: Verdana, sans-serif;
}

p, td, ul, ol, li, dl, dt, dd {
    font-family: Verdana, sans-serif;
}

选择器

1.派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

li strong {
    font-style: italic;
    font-weight: normal;
  }

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

注意strong和li的上下文关系！！！

2.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色

3.类选择器

在 CSS 中，类选择器以一个点号显示。

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

4.属性选择器

对带有指定属性的 HTML 元素设置样式。只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

可以在http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp查看各种演示效果。

常用样式

1.背景

background-color：为元素设置背景色。这个属性接受任何合法的颜色值。

p {background-color: gray;}

background-image：默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。

body {background-image: url(/i/eg_bg_04.gif);}

background-repeat：背景重复，对对象进行平铺。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

background-position：背景定位，更改背景的位置。为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

2.文本

text-indent：文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

p {text-indent: 5em;}

3.字体

font-family：定义文本的字体系列。连续排列多个字体，系统将按照排列的顺序在没有找到相应字体时加载下一种字体。

h1 {font-family: Georgia;}

font-style：字体风格。最常用于规定斜体文本。

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

font-weight：设置字体粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

font-size：字体大小。

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

padding：定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。

margin：设置外边距。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。

定位和浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

1.相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

2.绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

3.浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

.news img {
  float: left;
  }

关联

1.内联

直接在页面<head></head>标签内编写CSS样式。

<head>
    <style>
        样式内容
    </style>
</head>

2.外联

将<style></style>标签内部的内容创建一个.css文件保存，并在html文件头部写出引用。

<link rel="stylesheet" href="css文件路径" type="text/css" />

更多详细的内容请查看这个网址：http://www.w3school.com.cn/css/index.asp

三、JS

JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言，是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 很容易学习。

组成

ECMAScript:它是javascript的核心(语法、变量、数据类型、语句、函数……)

DOM:document object model 整个文档对象

BOM:浏览器对象

语法

1.区分大小写。

2.变量是弱类型的，统一用var来定义。

3.每行结尾的分号可有可无(建议写上)。

4.注释与java、php等语言相同。

引入

<script src="../../js/***.js"></script>

数据类型

JS数据类型分为原始数据类型和引用数据类型。原始数据类型包括：string、number、boolean、null、undefined；引用数据类型包括：Array、Boolean、Date、Math、Number、String、ReqExp。

运算符==与===

==在做比较时会自动转换数据类型，比如string类型的“123”和number类型的123是相等的，即123==“123”成立；而===在比较时不会转换数据类型，即123===“123”不成立。

常用操作

1.获取元素

document.getElementById("id名称") 如果是变量，则不用带引号

document.getElementById("id名称").value 获取指定对象的值

document.getElementById("id名称").innerHTML="" 修改指定对象的值

document.getElementByClass("class名称") 这个操作获得的是一个元素数组，可以通过[i]来获取每个元素

document.write("内容") 向页面写入内容

2.JS事件

onload 页面或图像加载时触发事件

<body onload="init()">

onsubmit 表单提交时触发事件

<form action="#" method="get" onsubmit="return checkForm()">

onchange 选择的对象改变时触发事件

onfocus 元素获得焦点时触发

onclick 鼠标单击时触发事件

ondbclick 鼠标双击时触发事件

onmousemove 鼠标移动时触发事件

onmouseover 鼠标进入元素时触发事件

onmouseblur 鼠标离开元素时触发事件

3.对象

- Window对象（常用方法为红框部分，下同）

setInterval(函数, 时间) 设置定时任务，只执行一次

clearInterval(interval对象) 清除指定的interval

setTimeout(函数, 时间) 设置定时任务，每间隔一段时间执行（文末模板中的轮播图实现）

clearTimeout(timeout对象) 清除指定的timeout

<script>
	//警告框
	//alert("aaa");
	
	//确认按钮
	//confirm("您确认删除吗？");
	
	//提示输入框
	prompt("请输入价格：");
</script>

- Location对象

<html>
	<head>
		<meta charset="UTF-8">
		<title>location对象</title>
		<script>
			function tiao(){
				window.location.href="https://www.youkuaiyun.com/";
			}
		</script>
	</head>
	<body>
		<a href="#" onclick="tiao()">跳转到优快云首页</a>
	</body>
</html>

- History对象

go(-1)等同于back()，go(1)等同于forward()，这里不做演示代码。

- Navigator对象（它包含有关浏览器的信息，在开发中不常用）

- Screen对象（包含有关客户端显示屏幕的信息，也不常用）

演示 ——表单隔行换色、全选和取消全选

隔行换色
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行换色</title>
		<script>
			window.onload = function(){
				//1.获取表格
				var tblEle = document.getElementById("tbl");
				//2.获取表格中tbody里面的行数(长度)
				var len = tblEle.tBodies[0].rows.length;
				//alert(len);
				//3.对tbody里面的行进行遍历
				for(var i=0;i<len;i++){
					if(i%2==0){
						//4.对偶数行设置背景颜色
						tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
					}else{
						//5.对奇数行设置背景颜色
						tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
					}
				}
			}
		</script>

	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

全选和取消全选
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选和全不选</title>
		<script>
			function checkAll(){
				//1.获取编号前面的复选框
				var checkAllEle = document.getElementById("checkAll");
				//2.对编号前面复选框的状态进行判断
				if(checkAllEle.checked==true){
					//3.获取下面所有的复选框
					var checkOnes = document.getElementsByName("checkOne");
					//4.对获取的所有复选框进行遍历
					for(var i=0;i<checkOnes.length;i++){
						//5.拿到每一个复选框，并将其状态置为选中
						checkOnes[i].checked=true;
					}
				}else{
					//6.获取下面所有的复选框
					var checkOnes = document.getElementsByName("checkOne");
					//7.对获取的所有复选框进行遍历
					for(var i=0;i<checkOnes.length;i++){
						//8.拿到每一个复选框，并将其状态置为未选中
						checkOnes[i].checked=false;
					}
				}
			}
		</script>
		
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" >
			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

关联

关联方法与CSS相似，不再赘述。

四、JQuery

jQuery 是一个 JavaScript 函数库，包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

引入

在写JQ代码前必须先引入包！

<script src="../../js/jquery-1.8.3.js" type="text/javascript"></script>

语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

所有的JQ代码都是写在页面加载函数中的！！！

$(function(){
    //这个就是页面加载函数的JQ简写，与JS不同，它的执行不需要当整个页面元素加载后，
    //而是在页面元素树完成后便执行，因而速度更快！
    //1.书写显示广告图片的定时操作
    time = setInterval("showAd()",3000);
});

JQ对象转换成DOM对象

JS对象常用这样的方法表示：var t;

而JQ对象常这样表示：var $t;

这是写前端的习惯，当然你不这样写完全没问题，只要你能够忍受其他人用异样的眼光看待你的话emm

$("#btn1").click(function(){
    //JQ对象转换成DOM对象的第一种方式
    //$("#span1")[0].innerHTML="呵呵哒！";
    //JQ对象转换成DOM对象的第二种方式
    $("#span1").get(0).innerHTML="呵呵哒！";
});

常用方法

JQ的常用方法与JS基本相同，只是方法名没有了on，比如JS的onclick在JQ中以click来执行。

但是要记住，JS和JQ只能执行对应的属性和方法，交叉的话是无法执行的。

效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

基本的效果函数是这些，至于使用animate自定义，等我有空的时候再另外补上。

选择器

这是JQ使用中很重要的一项，很容易出错。部分基础的选择器上面已经说过，这里主要介绍一下其他的选择器以及复合选择器的使用。

1.层级选择器

2.过滤选择器

3.属性选择器

4.表单属性选择器

实例：下拉列表左右选择（只完成了从左移至右的代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表左右选择</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!-- 选择器的复合使用 -->
		<script>
			$(function(){
				/*1.选中单击去右边*/
				$("#selectOneToRight").click(function(){
					$("#left option:selected").appendTo($("#right"));
				});
				
				/*2.单击全部去右边*/
				$("#selectAllToRight").click(function(){
					$("#left option").appendTo($("#right"));
				});
				
				/*3.选中双击去右边*/
				$("#left option").dblclick(function(){
					$("#left option:selected").appendTo($("#right"));
				});
			});
		</script>
	
	</head>
	<body>
		<table border="1" width="600" align="center">
			<tr>
				<td>
					分类名称
				</td>
				<td>
					<input type="text" name="cname" value="手机数码"/>
				</td>
			</tr>
			<tr>
				<td>
					分类描述
				</td>
				<td>
					<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
				</td>
			</tr>
			<tr>
				<td>
					分类商品
				</td>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">&gt;&gt;</a></p>
						<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a href="#" >&lt;&lt;</a></p>
						<p><a href="#" >&lt;&lt;&lt;</a></p>
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type='submit' value="修改"/>
				</td>
			</tr>
		</table>
	</body>
</html>

JQ插件的使用

validate是JQ插件，必须在JQ的基础上运行，因此在导入validate库前需要导入JQ库，即：

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>

validate需要手动声明对哪个表单进行校验，手动方式可以使用一下四种校验方式。

它的语法规则如下：

示例实现如下：

<script>
	$(function(){
		$("#registForm").validate({
			rules:{
				user:{
					required:true,
					minlength:3
				},
				password:{
					required:true,
					digits:true,
					minlength:6
				},
				repassword:{
					required:true,
					equalTo:"[name='password']"
				},
				email:{
					required:true,
					email:true
				},
				username:{
					required:true,
					maxlength:5
				},
				sex:{
					required:true
				}
			},
			messages:{
				user:{
					required:"用户名不能为空!",
					minlength:"用户名不得少于3位!"
				},
				password:{
					required:"密码不能为空!",
					digits:"密码必须是整数!",
					minlength:"密码不得少于6位!"
				},
				repassword:{
					required:"确认密码不能为空!",
					equalTo:"两次输入密码不一致!"
				},
				email:{
					required:"邮箱不能为空!",
					email:"邮箱格式不正确!"
				},
				username:{
					required:"姓名不能为空!",
					maxlength:"姓名不得多于5位!"
				},
				sex:{
					required:"性别必须勾选!"
				}
			},
			errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
			success: function(label) { //验证成功后的执行的回调函数
				//label指向上面那个错误提示信息标签label
				label.text(" ") //清空错误提示消息
					.addClass("success"); //加上自定义的success类
			}
		});
	});
</script>

这边给出使用validate插件实现表单校验的效果图。