前端知识汇总

发表于 | 更新于: | 分类于 | 本文总阅读量 次
| 字数统计: 38.4k 字 | 阅读时长 ≈ 172 分钟

1. 前端开发概述

包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。

1.1 什么是前端开发？

前端开发也叫做web前端开发，它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。

1.2 什么互联网产品？

互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务，百度搜索、淘宝、QQ、微博、网易邮箱等都是互联网产品。

1.3 互联网产品开发流程及前端开发岗位？

1.4 前端开发需要哪些技术？

前端工程师参照产品的效果图来开发页面(也可叫界面)，效果图是由UI设计师用Photoshop(少量设计师用firework)来设计的，为了方便与UI设计师对接工作，前端需要掌握一些Photoshop的技能，Photoshop还可以辅助页面开发。把效果图布局成页面，需要用到HTML语言和CSS语言，页面功能的开发需要用到javascript,为了快速开发和系统开发，还需要学习一些前端的javascript库和框架。

2. HTML

2.1 html概述和基本结构

2.1.1 html概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

2.1.2 html基本结构

一个html的基本结构如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明，第二行“

”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=”zh-CN”‘,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题，“”内编写网页上显示的内容。

2.1.3 HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
文档示例：

1
2
3
4
5
6
7
8
9
10
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
文档示例：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文档类型 </title>
</head>
<body>

</body>
</html>

两种文档的区别

1、文档声明和编码声明
2、html5新增了标签元素以及元素属性

html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

1
<!-- 这是一段注释  -->

2.2 html标题标签

通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题，其后是 <h2>，再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

1
2
3
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2.3 html段落标签、换行标签与字符实体

2.3.1 html段落标签

<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
    文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
    标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
    式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

2.3.2 html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，代码如下：

1
2
3
4
5
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

2.3.3 html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

1
2
3
4
5
<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

1
2
3
4
5
<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

2.4 html块标签、含样式的标签

2.4.1 html块标签

1、<div> 标签 块元素，表示一块内容，没有任何样式，不表示具体的语义，里面可以嵌套其他标签。
2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。

2.4.2 含样式和语义的标签

1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容

2.4.3 语义化的标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

2.5 html图像标签、绝对路径和相对路径

2.5.1 html图像标签

<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

  • src属性 定义图片的引用地址
  • alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
1
<img src="images/pic.jpg" alt="产品图片" />

2.5.2 绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

  • 绝对地址：相对于磁盘的位置去定位文件的地址
  • 相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

  • “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
  • “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

2.6 html链接标签

标签可以在网页上定义一个链接地址，它的常用属性有：

  • href属性 定义跳转的地址
  • title属性 定义鼠标悬停时弹出的提示文字框
  • target属性 定义链接窗口打开的位置
    • target=”_self” 缺省值，新页面替换原来的页面，在原来位置打开
    • target=”_blank” 新页面会在新开的一个浏览器窗口打开
1
2
3
<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="https://www.baidu.com/" title="跳转的百度网站">百度一下</a>
<a href="2.html" target="_blank">测试页面2</a>

2.7 html列表标签

2.7.1 有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

1
2
3
4
5
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

2.7.2 无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：

1
2
3
4
5
<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表通常用于术语的定义。

标签表示列表的整体。
标签定义术语的题目。
标签是术语的解释。一个
中可以有多个题目和解释，代码如下：

1
2
3
4
5
6
7
8
9
10
11
<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
</dl>

2.8 html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

  • action属性 定义表单数据提交地址
  • method属性 定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

  • type属性
    • type=”text” 定义单行文本输入框
    • type=”password” 定义密码输入框
    • type=”radio” 定义单选框
    • type=”checkbox” 定义复选框
    • type=”file” 定义上传文件
    • type=”submit” 定义提交按钮
    • type=”reset” 定义重置按钮
    • type=”button” 定义一个普通按钮
    • type=”image” 定义图片作为提交按钮，用src属性定义图片地址
    • type=”hidden” 定义一个隐藏的表单域，用来存储值
  • value属性 定义表单元素的值
  • name属性 定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

2.8.1 注册表单实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

2.9 html表格

1、<table>标签：声明一个表格，它的常用属性如下：

  • border属性 定义表格的边框，设置值是数值
  • cellpadding属性 定义单元格内容与边框的距离，设置值是数值
  • cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
  • align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right ，默认left

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

  • align 设置单元格中内容的水平对齐方式,设置值有：left | center | right ，默认left
  • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom ，默认top
  • colspan 设置单元格水平合并，设置值是数值
  • rowspan 设置单元格垂直合并，设置值是数值

表格制作练习：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<h1>表格</h1>
<table border="1" width="600" height="300" align="center">
    <tr>
        <td colspan="5">基本情况</td>
    </tr>
    <tr>
        <td width="25%"></td>
        <td width="15%"></td>
        <td width="25%"></td>
        <td width="15%"></td>
        <td  rowspan="5" width="20%"><img src="" alt="person"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

快速创建表格框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
比如：
1. 输入table后按Tab键，就会出来一个<table></table>
2. 输入table>tr后按Tab键,就会出来一个
<table>
    <tr></tr>
</table>
3. 输入table>tr>td后按Tab键,就会出来一个
<table>
    <tr>
        <td></td>
    </tr>
</table>
4. 输入table>tr>td*2后按Tab键,就会出来一个
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
5. 输入table>(tr>td*2)*2后按Tab键,就会出来一个
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2.10 页面布局概述

布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：

1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。

2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

2.11 table布局及实例

table来做整体页面的布局，布局的技巧归纳为如下几点：

1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。

2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。

3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。

4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式

5、通过属性或者css样式设置单元格中元素的样式

3. CSS

CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

3.1 css基本语法及页面引用

3.1.1 css基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

1
2
3
4
5
6
7
8
9
10
/*
    css注释 ctrl+shift+"/"
*/


div{ 
    width:100px; 
    height:100px; 
    color:red 
}

3.1.2 css页面引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。

1
<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

1
2
3
4
<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

1
<div style="width:100px; height:100px; color:red ">......</div>

3.2 css文本设置

常用的应用文本的css样式：

  • color 设置文字的颜色，如： color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • font-family 设置文字的字体，如：font-family:’微软雅黑’;
  • font-style 设置字体是否倾斜，如：font-style:’normal’; 设置不倾斜，font-style:’italic’;设置文字倾斜
  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
  • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

3.3 css颜色表示法

css颜色值主要有三种表示方法：

1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

3.4 css选择器

常用的选择器有如下几种：

3.4.1 标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

1
2
3
4
5
6
*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

3.4.2 id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

1
2
3
#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3.4.3 类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

1
2
3
4
5
6
7
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

3.4.4 层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：

1
2
3
4
5
6
7
8
9
10
.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

3.4.5 组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

1
2
3
4
5
6
7
8
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box3{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

3.4.6 伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

1
2
3
4
5
6
7
8
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

3.5 CSS盒子模型

3.5.1 盒子模型解释

元素(标签)在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

盒子模型示例图片

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

3.5.2 设置宽高

1
2
width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

3.5.3 设置边框

设置一边的边框，比如顶部边框，可以按如下设置：

1
2
3
4
border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
  dashed(虚线)  dotted(点线); */

上面三句可以简写成一句：

1
border-top:10px solid red;  /* 顺序无所谓，怎么写都可以 */

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

1
border:10px solid red;

3.5.4 设置内间距padding

设置盒子四边的内间距，可设置如下：

1
2
3
4
padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

1
2
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

1
2
3
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

3.5.5 设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

3.5.6 理解练习

通过盒子模型的原理，制作下面的盒子：

课堂练习示例图片

1
2
3
4
5
6
7
8
9
.box {
    width: 140px;
    height: 140px;
    background-color: gold;
    border: black 10px solid;
    padding: 20px;
}

<div class="box">盒子里面的文字内容，距离边框有一定距离。</div>

3.6 盒模型的实际尺寸

按照下面代码制作页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

页面显示效果如下：
盒子尺寸示例图片

通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

  • 盒子宽度 = width + padding左右 + border左右
  • 盒子高度 = height + padding上下 + border上下

理解练习
通过盒子模型的原理，制作下面的盒子：

课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    width: 380px;
    height: 35px;
    font-size: 20px;
    font-family: "Microsoft YaHei";
    color: #333;
    border-top: 1px solid #ff0000;
    border-bottom: 3px solid #666666;
    padding-top: 15px;
    padding-left: 20px;
    line-height: 20px;
}

<div class="box">新闻列表</div>

3.7 盒模型使用技巧及相关问题

3.7.1 margin相关技巧

1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

理解练习
1、制作一个600*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。

1
2
3
4
5
6
7
8
9
10
11
12
body {
	margin: 0;
}

.box {
    width: 598px;
    height: 98px;
    border: 1px black solid;
    margin: 100px auto;
}

<div class="box"></div>

2、制作下面的菜单效果：
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
	margin: 0; /* body标签本身带有8像素的间隔，需要去掉这个盒子才能贴边 */
}

.box {
    width: 200px;
    height: 150px;
    margin: 50px auto 0; /* 设置auto表示水平居中 */
    background-color: gold;
}

.box div{
    width: 200px;
    height: 30px;
    border: 1px green solid;
    background-color: gold;
    margin-top: -1px; /* 设置负值表示边框重叠 */
}

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

3.7.2 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

理解练习
使用div标签制作如下布局:
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.box {
    width: 500px;
    border: 1px solid black;
    margin: 50px auto 0;
}

.box div {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px; /* 中间的间隔应该是40px,但是因为是合并，实际是20px*/
    margin-bottom: 20px;
}

/* 或者使用如下的这个汇总形式
.box div {
    margin: 20px;
}
*/

<div class="box">
    <div>
        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    </div>
    <div>
        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    </div>
    <div>
        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    </div>
    <div>
        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    </div>
</div>

3.7.3 margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

1
2
3
4
.clearfix:before{
    content: '';
    display:table;
}

理解练习
分别使用margin间距和padding间距制作下面的例子： 课堂练习示例图片

第一个图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
    width: 200px;
    height: 200px;
    background-color: gold;
    border: 1px solid black;
}

.box1 {
    width: 120px;
    height: 50px;
    background-color: green;
    margin: 75px auto 40px;
}

<div class="box">
    <div class="box1">
    </div>
</div>

第二个图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.box {
    width: 200px;
    height: 200px;
    background-color: gold;
    /*border: 1px solid black;  第一种解决塌陷的方法：给外部盒子加个边框 */
    /*overflow: hidden; 第二种解决塌陷的方法：处理css外部溢出 */
}

.box1 {
    width: 120px;
    height: 50px;
    background-color: green;
    margin: 75px auto 40px;
}

.box:before{ /* 第三种解决塌陷的方法：使用伪元素类，推荐使用这个*/
    content: '';
    display:table;
}

<div class="box">
    <div class="box1">
    </div>
</div>

3.8 css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

元素溢出示例：
课堂练习示例图片

3.9 块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

3.9.1 块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

  • 支持全部的样式
  • 如果没有设置宽度，默认的宽度为父级宽度100%
  • 盒子占据一行、即使设置了宽度

3.9.2 内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

  • 支持部分样式（不支持宽、高、margin上下、padding上下）
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子之间会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

3.9.3 内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

  • 支持全部样式
  • 如果没有设置宽高，宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

3.9.4 display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

课堂练习

请制作图中所示的菜单：
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">
    .menu {
        width: 694px;
        height: 50px;
        margin: 50px auto 0;
        font-size: 0; /* 解决内联元素间隙：父级设置font-size为0，内联元素自身再设置font-size */

    }

    .menu a {
        width: 98px;
        height: 48px;
        background-color: #ffffff; /* 背景色 */
        display: inline-block; /* 行内块 */
        font-size: 16px; /* 字体大小 */
        font-family: "Microsoft YaHei"; /* 字体样式 */
        color: pink; /* 字体颜色 */
        border: 1px solid gold; /* 边框线 */
        margin-left: -1px; /* 去掉重叠的边框线 */
        text-align: center; /* 文字水平居中 */
        line-height: 48px; /* 文字垂直居中 */
        text-decoration: none; /* 去掉超链接下划线 */
    }
    
    .menu a:hover { /* 伪类 */
        background-color: gold;
        color: white;
    }
</style>

<div class="menu">
    <a href="#">首页</a>
    <a href="#">公司简介</a>
    <a href="#">解决方案</a>
    <a href="#">公司新闻</a>
    <a href="#">行业动态</a>
    <a href="#">招贤纳士</a>
    <a href="#">联系我们</a>
</div>

display属性扩展
none 元素隐藏且不占位置
以下示例是元素默认隐藏不显示，只有当鼠标放在元素上时才会显示出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.con {
    width: 200px;
}

.con h3{
    font-size: 30px;
}
.box2{
    width: 200px;
    height: 200px;
    background-color: gold;
    font-size: 16px;
    display: none;
}

.con:hover .box2{
    display: block;
}

<div class="con">
    <h3>文字标题</h3>
    <div class="box2">文字标题的说明</div>
</div>

3.10 浮动

3.10.1 浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动

7、浮动元素之间没有垂直margin的合并

理解练习
1、两端对齐浮动
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">

    .con{
        width: 400px;
        height: 80px;
        border: 1px solid gold;
        margin: 50px auto 0;
    }

    .con div{
        width: 60px;
        height: 60px;
        display: inline-block;
        margin: 10px;
    }

    .box01{
        background-color: #90ee90;
        float: left;

    }

    .box02{
        background-color: pink;
        float: right;
    }

</style>

<!--div.con>div.box01-->
<div class="con">
	<div class="box01"></div>
	<div class="box02"></div>
</div>

课堂练习示例图片

2、请使用浮动制作图中所示的菜单：
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.menu {
    width: 694px;
    height: 50px;
    list-style: none; /* 去掉无序列表前面的小圆点 */
    margin: 50px auto 0; /* 覆盖原始的ul margin */
    padding: 0; /* 覆盖原始的ul padding */
}

.menu li{
    width: 98px;
    height: 48px;
    border: 1px solid gold;
    background-color: white;
    /*display: inline-block;*/
    float: left;
    margin-left: -1px;
}

.menu li a{
    display: block;
    width: 98px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    text-decoration: none;
    font-size: 16px;
    font-family: "Microsoft YaHei";
    color: pink;
}

.menu li a:hover{
    background-color: gold;
    color: white;
}

<ul class="menu">
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
</ul>

3、文字饶图效果:
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style type="text/css">

    .con{
        width: 450px;
        height: 210px;
        border: 1px solid black;
        margin: 50px auto 0;
    }

    .pic{
        width: 80px;
        height: 80px;
        background-color: gold;
        float: left;
        margin: 10px;
    }

    .text{
        height: 130px;
        /*background-color: green;*/
        color: #666;

    }

</style>

<div class="con">
    <div class="pic"></div>
    <div class="text">浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果</div>
</div>

3.10.2 清除浮动

  • 父级上增加属性overflow：hidden

  • 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）

  • 使用成熟的清浮动样式类，clearfix

1
2
3
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

清除浮动的使用方法：

1
2
3
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">

理解练习
父级盒子不给高度，子集盒子浮动，父级盒子需要清除浮动
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.list{
    width: 210px;
    /*height: 400px;*/
    border: 1px solid #000000;

    margin: 50px auto 0;
    list-style: none;
    padding: 0;
    /* 第一种清除浮动的方法 */
    /*overflow: hidden;*/
}

.list li{
    width: 50px;
    height: 50px;
    background-color: gold;
    margin: 10px;
    float: left;
}


/* 第二种清除浮动的方法 */
.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear:both;
}
/* 兼容IE，网页不缩放 */
.clearfix{
    zoom:1;
}

<!--ul.list>li{$}*8-->
<ul class="list clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <!--第二种清除浮动的方法-->
    <!--<div style="clear: both"></div>-->
</ul>

3.11 定位

3.11.1 文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

3.11.2 关于定位

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

  • relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
  • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
  • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
  • inherit 从父元素继承 position 属性的值。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* relative 相对定位元素 */
<style type="text/css">
    .con{
    width: 400px;
    height: 400px;
    border: 1px solid #000000;
    margin: 50px auto 0;
}

.box01,.box02{
    width: 300px;
    height: 100px;
    margin: 10px;
}

.box01{
    background-color: green;
    position: relative;
    left: 50px;
    top: 50px;
}

.box02{
	background-color: gold;
}

</style>

<div class="con">
    <div class="box01">

    </div>
    <div class="box02">

    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* absolute 绝对定位元素:相对于body元素进行定位 */
<style type="text/css">
    .con{
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px auto 0;
    }

    .box01,.box02{
        width: 300px;
        height: 100px;
        margin: 10px;
    }

    .box01{
        background-color: green;
        position: absolute;
        left: 50px;
        top: 50px;
    }

    .box02{
        background-color: gold;
    }

</style>

<div class="con">
    <div class="box01">

    </div>
    <div class="box02">

    </div>
</div>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* absolute 绝对定位元素:相对于上一个设置了定位的父级元素来进行定位 */
<style type="text/css">
    .con{
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px auto 0;
        position: relative;
}

    .box01,.box02{
        width: 300px;
        height: 100px;
        margin: 10px;
    }

    .box01{
        background-color: green;
        position: absolute;
        left: 50px;
        top: 50px;
    }

    .box02{
    	background-color: gold;
    }

</style>

<div class="con">
    <div class="box01">

    </div>
    <div class="box02">

    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* fixed 固定定位元素:相对于浏览器窗口进行定位 */
<style type="text/css">
    .con{
    width: 400px;
    height: 400px;
    border: 1px solid #000000;
    margin: 50px auto 0;
}

.box01,.box02{
    width: 300px;
    height: 100px;
    margin: 10px;
}

.box01{
    background-color: green;
    position: fixed;
    left: 50px;
    top: 50px;
}

.box02{
	background-color: gold;
}

</style>

<div class="con">
    <div class="box01">

    </div>
    <div class="box02">

    </div>
</div>

3.11.3 定位元素的偏移

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

3.11.4 定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

伪代码如下:

1
2
3
4
5
6
7
.box01{
    ......
    position:absolute;  /* 设置了绝对定位 */
    left:200px;         /* 相对于参照元素左边向右偏移200px */
    top:100px;          /* 相对于参照元素顶部向下偏移100px */
    z-index:10          /* 将元素层级设置为10(没有单位) 弹框使用：盖过所有的元素 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style type="text/css">
    .con{
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px auto 0;
        position: relative;
    }

    .con div{
        width: 200px;
        height: 200px;
        position: absolute;
    }

    .box01{
        background-color: green;
        left: 20px;
        top: 20px;
        z-index: 10;
    }

    .box02{
        background-color: gold;
        left: 40px;
        top: 40px;
        z-index: 11;
    }

    .box03{
        background-color: rebeccapurple;
        left: 60px;
        top: 60px;
        z-index: 12;
    }

    .box04{
        background-color: pink;
        left: 80px;
        top: 80px;
    }

</style>

<div class="con">
    <div class="box01"></div>
    <div class="box02"></div>
    <div class="box03"></div>
    <div class="box04"></div>
</div>

3.11.5 定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

3.11.6 理解练习

1、制作如下布局：
课堂练习示例图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
    .con{
        width: 100px;
        height: 100px;
        background-color: gold;
        margin: 50px auto 0;
        position: relative;
        /*去掉尖角成圆的，若是圆形需要设置成50px*/
        border-radius: 14px;
    }

    .box{
        width: 28px;
        height: 28px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 28px;

        /* 位置 */
        position: absolute;
        left: 86px;
        top: -14px;

        /* 变成圆的 */
        border-radius: 14px;
    }

</style>

<div class="con">
    <div class="box">5</div>
</div>

2、固定在顶部的水平居中的菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
    .menu{
        height: 80px;
        background-color: gold;
        position: fixed;
        width: 960px;
        top: 0px;
        /* 根据窗口大小设置百分比 */
        left: 50%;
        /* 根据前面的百分比再进行偏移，负值表示往左侧偏移 */
        margin-left: -480px;
    }

</style>

<div class="menu">菜单文字</div>

3、相对于浏览器窗口水平垂直居中的弹框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<style type="text/css">
    .menu{
        height: 80px;
        background-color: gold;
        position: fixed;
        width: 960px;
        top: 0px;
        left: 50%;
        margin-left: -480px;
    }
    p{
        text-align: center;
    }
    .popup{
        width: 500px;
        height: 300px;
        border: 1px solid #000000;
        background-color: #ffffff;
        position: fixed;
        left: 50%;
        margin-left: -251px;
        top: 50%;
        margin-top: -151px;
        z-index: 9999;
    }
    .popup h2{
        background-color: gold;
        margin: 10px;
        height: 40px;
    }
    .mask{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: grey;
        left: 0;
        top: 0;
        /*透明度*/
        opacity: 0.5;
        z-index: 9998;
    }
    .popup{
        display: block;
    }

</style>

<div class="menu">菜单文字</div>
<div class="pop_con">
    <div class="popup">
        <h2>弹框的标题</h2>
    </div>
    <div class="mask"></div>
</div>

<p>网页内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

3.12 background属性

3.12.1 属性解释

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

3.12.2 举例

下面这些例子使用下面这张图片做为背景图：
background示例图片

1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。

background示例图片

2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。

background示例图片

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

background示例图片

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。

background示例图片

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

background示例图片

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

background示例图片

相关代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }
        .bg1{background:cyan url(bg.jpg);}
        .bg2{background:cyan url(bg.jpg) repeat-x;}
        .bg3{background:cyan url(bg.jpg) repeat-y;}
        .bg4{background:cyan url(bg.jpg) no-repeat;}
        .bg5{background:cyan url(bg.jpg) no-repeat left center;}
        .bg6{background:cyan url(bg.jpg) no-repeat right center;}
    </style>
</head>
<body>
    <div class="backshow bg1"></div>
    <div class="backshow bg2"></div>
    <div class="backshow bg3"></div>
    <div class="backshow bg4"></div>
    <div class="backshow bg5"></div>
    <div class="backshow bg6"></div>
</body>
</html>

例子说明：

background-position的设置，可以在水平方向设置“left”、“center”、“right”，在垂直方向设置“top”、“center”、“bottom”，除了设置这些方位词之外，还可以设置具体的数值。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：
background示例图片
用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：
background示例图片

对应代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

理解练习：
通过雪碧图制作如下布局：

background示例图片

3.13 特征布局实例讲习

经过对前面知识点的巩固和加深，我们可以使用前面学习到的知识来制作实际开发中碰到的一些典型的布局，以此来达到综合应用知识的目的。

1、特征布局：翻页（所需知识点：盒模型、内联元素）

布局示例图片

2、特征布局：导航条01（所需知识点：盒模型、行内元素布局）

布局示例图片

3、特征布局：导航条02（所需知识点：盒模型、浮动、定位、字体对齐）

布局示例图片

4、特征布局：图片列表（所需知识点：盒模型、浮动）

布局示例图片

5、特征布局：新闻列表（所需知识点：盒模型、浮动）

布局示例图片

课后练习

布局示例图片

布局示例图片

4. Photoshop

4.1 常用图片格式

图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下：

1、psd
photoshop的专用格式。
优点：完整保存图像的信息，包括未压缩的图像数据、图层、透明等信息，方便图像的编辑。
缺点：应用范围窄，图片容量相对比较大。

2、jpg
网页制作及日常使用最普遍的图像格式。
优点：图像压缩效率高，图像容量相对最小。
缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。

3、gif
制作网页小动画的常用图像格式。
优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。
缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。

4、png
网页制作及日常使用比较普遍的图像格式。
优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。
缺点：不能制作成动画

5、webp
将要取代jpg的图像格式。
优点：同jpg格式，容量相对比jpg还要小。
缺点：同jpg格式，目前不支持所有的浏览器。

位图和矢量图
位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。
矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

svg
目前首选的网页矢量图格式。
优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
缺点：色彩不够丰富。

flash
退出历史的重量级网页矢量图格式。
优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互。
缺点：不支持搜索引擎、运行慢、浏览器需要装插件才可支持。

总结
在网页制作中，如何选择合适的图片格式呢？
1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；
2、使用小幅面图片或者图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片是单色，而且要求有很好的显示效果，可以使用svg；如果是图片时动画的，可以使用gif。

4.2 photoshop常用图片处理技巧

photoshop是一款优秀的图像处理软件，作为前端开发工程师，掌握它的一些常用功能是必须的。photoshop的常用功能有：选择、裁剪图像、修图、取色、插入文字等等。除了这些常用功能，前端还需要掌握制作新图像、切图等技巧。本次讲解的photoshop版本为cs6。

4.2.1 图片格式转换与压缩

1、文件/存储为 选择图片类型以及压缩比；（不推荐）
2、文件/存储为web所用格式 选择图片类型以及压缩比 （推荐）；

4.2.2 图像放缩，平移

1、ps软件示例图片 放缩工具 图像放大缩小，在图像上点击放大，按住alt键点击缩小，快捷键Ctrl+“+”放大 Ctrl+“-”缩小，双击此工具可以让图像按照原始大小显示。

2、ps软件示例图片 平移工具 对图像进行移动，在使用其他工具时，按住空格键盘的空格键，可以切换到此工具，移动完后松开空格键回到原来的工具。双击此工具可以让图像放缩到显示区域完全显示。

4.2.3 新建图像

执行菜单命令 文件/新建 可以新建一张图片，设置大小，颜色模式选RGB，网页图片一般选择72像素/英寸，如果图像要打印，可设为300/英寸。背景按情况选透明或白色。

4.2.4 移动选择与图层面板

1、按住Ctrl，在图像上点击可以选中图层
2、ps软件示例图片 选择此工具，勾选工具属性栏上的“自动选择图层”，可以在图像上点击选中图层
3、移动元素同时按住Alt键可复制一个图层
4、图层面板的操作，包括图层的显示隐藏、图层顺序、新建图层、图层删除

4.2.5 针对图像中选中图层的操作

1、移动
2、自由变换 执行菜单命令 编辑/自由变换
3、拖拽到另一张图像上完成图层拷贝

4.2.6 历史记录面板

记录20部操作，可以点击已经记录的操作步骤回到之前

4.2.7 选择工具

1、ps软件示例图片 矩形选择工具
2、ps软件示例图片 椭圆选择工具 按住alt+shift键可以从中心拉出正圆
3、ps软件示例图片 任意套索工具 用手任意画出选区，不精确，不常用
4、ps软件示例图片 多边形套索 可以选择多边形物体，对于结构复杂的物体，可以点多个小段来选择。
5、ps软件示例图片 磁性套索 可以自动在物体边缘生成选择线，但是由于太自动了，所以不够精确，也不常用。
6、ps软件示例图片 魔术棒选择工具 按照点击的点的颜色范围来选择，可以设置范围的容差，容差越大，选择区域越大，对于有单色背景的图像中的元素，可以用它点选背景，然后反选，从而选中元素。
7、ps软件示例图片 快速选择工具 直接在要选的元素上画，按照画的颜色范围进行选择。
8、对图层创建选区：按住Ctrl，用鼠标点击图层面板中图层的图标，在图层外框生成选区。

4.2.8 选区的编辑技巧

1、新选区模式下移动选区
2、选区的加、减、乘，工具属性栏上设置
3、调整边缘 工具属性栏或者执行菜单命令 选择/调整边缘
4、变换选区 执行菜单命令 选择/变换选区，可对选区进行缩放、移动等
5、反选 执行菜单命令 选择/反向
6、取消选择 执行菜单命令 选择/取消选择，快捷键ctrl+d

4.2.9 选区特别注意

选区（蚂蚁线）只对当前图层器起作用，选区操作失败一般是当前图层弄错了

4.2.10 裁剪图像

1、ps软件示例图片 裁切工具
2、对选区执行菜单命令 图像/裁剪
3、设置矩形框大小，创建固定宽高的矩形框，可进行固定尺寸裁剪

4.2.11 针对确定选区的操作技巧

1、复制 执行菜单命令 编辑/拷贝 快捷键ctrl+c
2、粘贴 执行菜单命令 编辑/粘贴 快捷键ctrl+v
3、填充 执行菜单命令 编辑/填充
4、描边 执行菜单命令 编辑/描边
5、删除 执行菜单命令 编辑/清除 快捷键 delete
6、自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t

4.2.12 擦除与修复工具

1、ps软件示例图片 擦除工具
2、ps软件示例图片 污点修复工具

4.2.13 参考线技巧

1、视图/标尺，显示标尺，在标尺上按住鼠标拖动可以拉出参考线
2、视图/对齐到/参考线 让参考线移动时自动对齐到选框或者图像的边缘
3、视图/新建参考线 可以精确创建参考线

4.2.14 文本输入

1、执行菜单命令 编辑/首选项/单位和标尺 设置文字的单位
2、ps软件示例图片 文本输入
3、文本编辑 属性工具栏上点击文本编辑按钮

4.2.15 取色

1、ps软件示例图片取色工具，点击前景色按钮，弹出取色对话框，当前工具切换成取色工具。
2、ps软件示例图片点击前景色按钮，当前工具自动切换到取色工具

4.2.16 图像大小与画布大小

1、图像/图像大小 查看和设置图像的整体大小
2、图像/画布大小 查看和设置图像的画板大小

4.2.17 尺寸测量

1、ps软件示例图片 切片工具 双击切片弹出切片对话框
2、ps软件示例图片 切片选择工具
2、ps软件示例图片 矩形框工具，打开信息面板

4.3 photoshop批量切图技巧

切图，就是从效果图中把网页制作需要的小图片裁剪出来。

1、使用psd格式并且带有图层的图像切图

2、在图像上用切片工具切出需要的小图

3、双击切片，给切片命名

4、将需要制作透明背景图像的切片的背景隐藏

5、执行菜单命令 存储为web所用格式

6、点选切片，设置切片的图片格式

7、存储切片，选择“所有用户切片”，点存储(多个切片会自动存到所选文件夹中的images文件夹中)

4.4 Photoshop制作雪碧图技巧

雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。

步骤：

1、使用Photoshop新建一张背景透明的图片

2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小

3、按照所有小图片的范围裁剪图片，存为透明背景的png图片

5. 前端页面开发流程

1、创建页面项目目录

2、使用Photoshop对效果图切图，切出网页制作中需要的小图片

3、将装饰类图像合并，制作成雪碧图

4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面

6. HTML5和CSS3

6.1 CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

6.1.1 权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

6.1.2 权重的计算实例

1、实例一：

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

2、实例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

6.2 CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素

属性选择器：
1、E[attr] 含有attr属性的元素

1
2
3
4
5
6
7
<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

2、E[attr=’ok’] 含有attr属性的元素且它的值为“ok”
3、E[attr^=’ok’] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=’ok’] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=’ok’] 含有attr属性的元素且它的值中含有“ok”

6.3 CSS3圆角、rgba

6.3.1 CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

6.3.2 rgba（新的颜色值表示法）

1、盒子透明度表示法：

1
2
3
4
5
.box {
    opacity:0.1;
    /* 兼容IE */
    filter:alpha(opacity=10); 
}

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

6.4 CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

综合练习：

制作鼠标移入图片时，图片说明滑入的效果

示例图片

6.5 CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

举例：（翻面效果）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

6.6 CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

理解练习：
1、风车动画
2、loading动画
示例图片

3、人物走路动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

动画中使用的图片如下：

示例图片

6.7 CSS3 浏览器前缀

6.7.1 浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如：

1
2
3
4
5
6
7
8
div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

6.7.2 自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

6.7.3 Autoprefixer在Sublime text中的设置：

1、preferences/key Bindings-User

1
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

1
2
3
4
5
{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀

6.8 HTML5新增标签

6.8.1 新增语义标签

1、<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚

6.8.2 音频视频

1、<audio>
2、<video>

PC端兼容h5的新标签的方法，在页面中引入以下js文件:

1
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

6.9 HTML5 新增表单控件

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

1
2
3
4
5
6
7
8
9
10
<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

7. 移动端页面开发

7.1 移动端与PC端页面布局区别

7.1.1 视口

视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

设置方法如下( 快捷方式：meta:vp + tab )：

1
2
3
4
5
6
<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>

pc端与移动端渲染网页过程：
示例图片

7.1.2 视网膜屏幕（retina屏幕）清晰度解决方案

视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。

清晰度解决过程示意图：
示例图片

背景图强制改变大小，可以使用background新属性

background新属性
background-size:

  • length：用长度值指定背景图像大小。不允许负值。
  • percentage：用百分比指定背景图像大小。不允许负值。
  • auto：背景图像的真实大小。
  • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
  • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

7.2 适配布局类型

7.2.1 PC及移动端页面适配方法

设备屏幕有多种不同的分辨率，页面适配方案有如下几种：

1、全适配：响应式布局+流体布局
2、移动端适配：

  • 流体布局+少量响应式
  • 基于rem的布局

7.2.2 流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

7.2.3 响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

相应布局的伪代码如下：

1
2
3
4
5
6
7
8
@media (max-width:960px){
    .left_con{width:58%;}
    .right_con{width:38%;}
}
@media (max-width:768px){
    .left_con{width:100%;}
    .right_con{width:100%;}
}

7.2.4 基于rem的布局

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

cssrem安装

cssrem插件可以动态地将px尺寸换算成rem尺寸

下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[“.css”, “.less”, “.sass”]。

8. 常用css列表

  • color 设置文字的颜色，如： color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • font-family 设置文字的字体，如：font-family:’微软雅黑’;
  • font-style 设置字体是否倾斜，如：font-style:’normal’; 设置不倾斜，font-style:’italic’;设置文字倾斜
  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
  • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  • text-overflow 设置一行文字宽度超过容器宽度时的显示方式，如：text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号
  • white-space 一般用来设置文本不换行，如：white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号
  • list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如：list-style:none
  • width 设置盒子内容的宽度，如： width：100px;

  • height 设置盒子内容的高度，如： height：100px;

  • border-top 设置盒子顶部边框的三个属性 如：border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线，详细设置说明：盒子模型

  • border-left 设置盒子左边边框的三个属性 如：border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线，详细设置说明：盒子模型

  • border-right 设置盒子右边边框的三个属性 如：border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线，详细设置说明：盒子模型

  • border-bottom 设置盒子底部边框的三个属性 如：border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线，详细设置说明：盒子模型

  • border 同时设置盒子的四个边框，如果四个边的样式统一就使用它 如：border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线，详细设置说明：盒子模型

  • padding 设置盒子四个边的内边距 如：padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针)，详细设置说明：盒子模型

  • margin 设置盒子四个边的外边距 如：margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针)，详细设置说明：盒子模型

  • overflow 设置当子元素的尺寸超过父元素的尺寸时，盒子及子元素的显示方式 如：overflow:hidden 超出的子元素被裁切，详细设置说明：元素溢出

  • display 设置盒子的显示类型及隐藏，如：display:block 将盒子设置为以块元素显示 display:none 将元素隐藏，详细设置说明：元素类型
  • float 设置元浮动 如：float:left 设置左浮动 float:right 设置右浮动，详细设置说明：元素浮动
  • clear 在盒子两侧清除浮动 如：clear:both 在盒子两侧都不允许浮动，详细设置说明：元素浮动
  • position 设置元素定位 如：position:relative 设置元素相对定位，详细设置说明：元素定位
  • background 设置元素的背景色和背景图片，如：background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg，背景色为cyan，详细设置说明：元素背景

  • background-size 设置盒子背景图的尺寸，如：background-size:30px 40px;设置背景图的尺寸宽为30px，高为40px，这个属性不能合到background属性中，详细设置说明：retina屏适配

  • opacity 设置元素整体透明度，一般为了兼容需要加上filter属性设置 如：opacity:0.1;filter:alpha(opacity=10)

  • cursor 设置鼠标悬停在元素上时指针的形状 如：cursor:pointer 设置为手型
  • outline 设置文本输入框周围凸显的蓝色的线，一般是设为没有 如：outline:none
  • border-radius 设置盒子的圆角 如：border-radius:10px 设置盒子的四个角为10px半径的圆角，详细设置说明：css圆角
  • box-shadow 设置盒子的阴影，如：box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影，详细设置说明：css阴影
  • transition 设置盒子的过渡动画，如：transition:all 1s ease;设置元素过渡动画为1秒完成，所有变动的属性都做动画，详细设置说明：过渡动画
  • animation 设置盒子的关键帧动画，详细设置说明：关键帧动画

  • transform 设置盒子的位移、旋转、缩放、斜切等变形，如：transform:rotate(45deg);设置盒子旋转45度，详细设置说明：元素变形

  • box-sizing 设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸

  • border-collapse 设置表格边框是否合并，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格。

9. JavaScript

9.1 JavaScript介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

9.2 JavaScript嵌入页面的方式

1、行间事件（主要用于事件）

1
<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

1
2
3
<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

1
<script type="text/javascript" src="js/index.js"></script>

9.3 变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’

1
2
3
4
5
6
var iNum = 123;
var sTr = 'asd';

//同时定义多个变量可以用","隔开，公用一个‘var’关键字

var iNum = 45,sTr='qwe',sCount='68';

9.3.1 变量类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：object

9.3.2 javascript语句与注释

1、一条javascript语句应该以“;”结尾

1
2
3
4
5
6
7
8
<script type="text/javascript">    
    var iNum = 123;
    var sTr = 'abc123';
    function fnAlert(){
        alert(sTr);
    };
    fnAlert();
</script>

2、javascript注释

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">    

    // 单行注释
    var iNum = 123;
    /*  
        多行注释
        1、...
        2、...
    */
    var sTr = 'abc123';
</script>

9.3.3 变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

9.3.4 匈牙利命名风格

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

9.4 获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

1
2
3
4
5
<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

1
2
3
4
5
6
7
8
....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

9.5 操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

9.5.1 操作属性的方法

1、“.” 操作
2、“[ ]”操作

9.5.2 属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过“.”操作属性：具体来说是操作属性的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">

    // 当整个页面加载完毕之后再执行花括号里面的语句
    window.onload = function () {

        // 通过ID名获取元素赋值给oDiv变量
        var oDiv = document.getElementById("div1");
        var oA = document.getElementById("link");
        var oDiv2 = document.getElementById("div2");

        // 改变元素的属性
        oDiv.style.color = "red";
        oDiv.style.fontSize = "20px";

        oA.href = "http://www.baidu.com";
        oA.title = "这是一个百度网的链接";

        oDiv2.className = "box2";

        // 读取元素的属性
        var sId = oDiv.id;
        alert(sId)
    }

</script>

<style type="text/css">
    .box{
        font-size: 20px;
        color: gold;
    }

    .box2{
        font-size: 30px;
        color: pink;
    }
</style>

<div id="div1">这是一个div元素</div>
<a href="#" id="link">这是一个链接</a>
<div class="box" id="div2">这是第二个div元素</div>

通过“[ ]”操作属性：具体来说是操作属性，把属性作为变量来处理，而不是作为一个值来处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 没反应
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.baidu.com" id="link1">这是百度网站地址</a>

9.5.3 innerHTML

innerHTML可以读取或者写入标签包裹的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://http://www.baidu.com">这是百度网站地址<a/>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

9.6 函数

函数就是重复执行的代码片。

9.6.1 函数定义与执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">

    // 函数的定义
    function fnMyalert() {
        alert('Hello world!')
    }

    function fnChange() {
        var oDiv = document.getElementById("div1");
        oDiv.style.color = "red";
        oDiv.style.fontSize = "30px";
    }

    //函数执行
    // fnChange();

</script>

<!--标签里调用函数执行-->
<div id="div1" onclick="fnMyalert()">这是一个div元素</div>
<input type="button" name="" value="改变div" onclick="fnChange()">

9.6.2 变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

1
2
3
4
5
6
7
8
<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

9.6.3 提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

说白了就是在html的标签中不含有任何关于js的代码，如下例，通过html标签中的id跟js关联起来，从而使用js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--行间事件调用函数   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

9.6.4 匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    
    // 直接将匿名函数赋值给绑定的事件
    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

9.6.5 综合练习

网页换肤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/004_01.css" id="link01">
    <script type="text/javascript">

        window.onload = function () {
            var oBtn01 = document.getElementById("btn01");
            var oBtn02 = document.getElementById("btn01");
            var oLink = document.getElementById("link01");

            oBtn01.onclick = function () {
                oLink.href = "css/004_01.css";
            };

            oBtn02.onclick = function () {
                oLink.href = "css/004_02.css";
            }


        }

    </script>

</head>
<body>


<input type="button" name="" value="皮肤1" id="btn01">
<input type="button" name="" value="皮肤2" id="btn02">

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
/* css/004_01.css */
body{
    background-color: gold;
}

input{
    width: 200px;
    height: 50px;
    background-color: aqua;
    border: 0;
}
1
2
3
4
5
6
7
8
9
10
/* css/004_02.css */
body{
    background-color: pink;
}
input{
    width: 200px;
    height: 50px;
    background-color: aqua;
    border: 0;
}

9.6.6 函数传参

1
2
3
4
5
6
<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

9.6.7 函数’return’关键字

函数中’return’关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 函数返回值+结束函数运行
<script type="text/javascript">

    function fnAdd(a,b) {
        var c = a + b;
        alert('hello-1'); // hello-1
        // 返回c的值，结束函数的运行
        return c;
        // 这一句不弹出
        alert('hello-2');

    }
    var result = fnAdd(3,4);
    alert(result); // 弹出7

</script>

// 函数传参
<script type="text/javascript">

    window.onload = function () {
        function fnChangestyle(mystyle,val) {
            var oDiv = document.getElementById("div1");

            oDiv.style[mystyle] = val;
        }

        fnChangestyle("color","pink");
        fnChangestyle("fontSize","30px");
    }
</script>
<div id="div1">这是一个div元素</div>

9.7 条件语句

通过条件来控制程序的走向，就需要用到条件语句。

9.7.1 运算符

1、算术运算符： +(加)、 -(减)、 (乘)、 /(除)、 %(求余数)
2、赋值运算符：=、 +=、 -=、 =、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
    window.onload = function () {
        var oInput01 = document.getElementById("input01");
        var oInput02 = document.getElementById("input02");
        var oBtn = document.getElementById("btn");

        oBtn.onclick = function () {
            // parseInt()函数转换成数字
            var iVal01 = parseInt(oInput01.value);
            var iVal02 = parseInt(oInput02.value);

            var iBtn = iVal01 + iVal02;

            alert(iBtn);
        }
    };
</script>

<input type="text" name="" id="input01"> +
<input type="text" name="" id="input02">
<input type="button" name="" value="相加" id="btn">

9.7.2 if else

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    var iNum01 = 3;
    var iNum02 = 5;
    var sTr;
    if (iNum01 > iNum02) {
        sTr = '大于';
    } else {
        sTr = '小于';
    }
    alert(sTr);
</script>

9.7.3 理解练习

制作单个按钮点击切换元素的显示和隐藏效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">

    window.onload = function () {
        var oBtn = document.getElementById("btn01");
        var oDiv = document.getElementById("box01");
        oBtn.onclick = function () {
            if (oDiv.style.display == "none") {
                oDiv.style.display = 'block';
            } else {
                oDiv.style.display = "none";
            }
        }
    }

</script>
<style type="text/css">
    .box {
        width: 200px;
        height: 400px;
        background-color: gold;
    }
</style>

<input type="button" value="切换" id="btn01">
<div class="box" id="box01"></div>

9.7.4 多重if else语句

1
2
3
4
5
6
7
8
9
10
11
12
13
var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

9.7.5 switch语句

多重if else语句可以换成性能更高的switch语句

1
2
3
4
5
6
7
8
9
10
11
12
var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

9.7.6 理解练习

制作随着星期换背景的页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    
        window.onload = function () {
            var iWeek = 5;
            var oBody = document.getElementById("body01");
    
            switch (iWeek) {
                case 1:
                    oBody.style.backgroundColor = "gold";
                    break;
                case 2:
                    oBody.style.backgroundColor = "pink";
                    break;
                case 3:
                    oBody.style.backgroundColor = "red";
                    break;
                case 4:
                    oBody.style.backgroundColor = "green";
                    break;
                case 5:
                    oBody.style.backgroundColor = "yellow";
                    break;
                default :
                    oBody.style.backgroundColor = "blue";
                    break;
            	}
        	}
    </script>

</head>
<body id="body01">

</body>
</html>

9.8 数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

9.8.1 定义数组的方法

1
2
3
4
5
//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

9.8.2 操作数组中数据的方法

1、获取数组的长度：aList.length;

1
2
var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

1
2
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

1
2
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

1
2
3
4
5
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

1
2
3
4
5
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

1
2
3
var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

7、indexOf() 返回数组中元素第一次出现的索引值

1
2
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在数组中增加或删除成员

1
2
3
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

9.8.3 多维数组

多维数组指的是数组的成员也是数组的数组。

1
2
3
var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

批量操作数组中的数据，需要用到循环语句

9.9 循环语句

程序中进行有规律的重复性操作，需要用到循环语句。

9.9.1 for循环

1
2
3
4
for(var i=0;i<len;i++)
{
    ......
}

9.9.2 课堂练习

1、将数组中的数据分别用弹框弹出

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">

    for (var i = 0; i < 5; i++) {
        alert(i);
    }

    var aList = ['a','b','c','d','e'];
    var iLen = aList.length;

    for (var i = 0; i < iLen; i++) {
        alert(aList[i]);
    }
</script>

2、将数组中的数据放入到页面中的列表中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="text/javascript">
    window.onload = function () {
        var oLl = document.getElementsByTagName("li");
        var aList = ['apple', 'banana', 'orange', 'xigua', 'boluo'];
        var aLen = aList.length;
        for (var i = 0; i < aLen; i++) {
            var name = aList[i];
            // 获取标签内的值
            oLl[i].innerHTML = name;
        }
    }
</script>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

// 另一种方法
<script type="text/javascript">
    window.onload = function () {
        var oUl = document.getElementById('list');
        var aList = ['apple', 'banana', 'orange', 'xigua', 'boluo'];
        var aLen = aList.length;
        var sTr = '';
        for (var i = 0; i < aLen; i++) {
            sTr += '<li>' + aList[i] + '</li>';
            oUl.innerHTML = sTr;
        }
    }
</script>
<style type="text/css">

    .list {
        list-style: none;
        margin: 50px auto 0;
        padding: 0;
        width: 300px;
        height: 305px;

    }

    .list li {
        height: 60px;
        border-bottom: 1px dotted #000;
        line-height: 60px;
        font-size: 16px;
    }
</style>

<ul class="list" id="list">

</ul>

9.9.3 while循环

1
2
3
4
5
6
var i=0;

while(i<8){
    ......
    i++;
}

9.9.4 数组去重

1
2
3
4
5
6
7
8
9
10
11
12
13
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

9.10 获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

课堂练习
使用循环操作列表中的每个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript">
    window.onload = function () {

        // 通过标签名称获取li元素，生成一个选择集，赋值给aLi
        var aLi = document.getElementsByTagName('li');

        // 读取选择集内元素的个数
        //alert(aLi.length);  // 弹出13

        var iLen = aLi.length;


        //给一个li设置背景色
        //aLi[0].style.backgroundColor = 'gold';

        // 不能给选择集设置样式属性
        //aLi.style.backgroundColor = 'gold';

        /*
        同时给所有的li加背景色
        for(var i=0;i<iLen;i++)
        {
            aLi[i].style.backgroundColor = 'gold';
        }
        */


        var oUl = document.getElementById('list1');
        var aLi2 = oUl.getElementsByTagName('li');

        var iLen2 = aLi2.length;

        for (var i = 0; i < iLen2; i++) {
            if (i % 2 == 0) {
                aLi2[i].style.backgroundColor = 'gold';
            }
        }

    }
</script>

<ul id="list1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

<ul id="list2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

9.11 Javascript组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法

9.12 字符串处理方法

1、字符串合并操作：“ + ”

1
2
3
4
5
6
7
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

1
2
3
4
5
6
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(sNum03)   //弹出数字12 将字符串小数转化为数字整数

3、parseFloat() 将数字字符串转化为小数

1
2
var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

1
2
3
4
5
6
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、charAt() 获取字符串中的某一个字符

1
2
3
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

6、indexOf() 查找字符串是否含有某字符

1
2
3
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

7、substring() 截取字符串 用法： substring(start,end)（不包括end）

1
2
3
4
5
6
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

8、toUpperCase() 字符串转大写

1
2
3
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF

9、toLowerCase() 字符串转小写

1
2
3
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef

字符串反转

1
2
3
4
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

9.13 类型转换

1、直接转换 parseInt() 与 parseFloat()

1
2
3
4
5
6
7
8
alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

1
2
3
4
5
6
7
if('3'==3)
{
    alert('相等');
}

// 弹出'相等'
alert('10'-3);  // 弹出7

3、NaN 和 isNaN

1
2
alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

9.14 调试程序的方法

1、alert

弹出的时候程序会卡住，也就是会阻止程序的运行

2、console.log

3、document.title

1
2
3
4
5
6
7
8
// 改变的是标签<title>的值
window.onload = function () {
    var iNum01 = 20;
    setInterval(function () {
        iNum01++;
        document.title = iNum01;
    },100);
}

9.15 定时器

9.15.1 定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

9.15.2 课堂练习

1、定时器制作移动动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script type="text/javascript">
    window.onload = function () {

        var oDiv = document.getElementById('div1');
        var iLeft = 0;
        var iSpeed = 3;
        /*
        var timer = setInterval(moving,30);
        function moving(){
            iLeft += 3;
            oDiv.style.left = iLeft + 'px';
        }
        */
        var timer = setInterval(function () {
            iLeft += iSpeed;
            oDiv.style.left = iLeft + 'px';
            if (iLeft > 700) {
                // clearInterval(timer); // 定时器停止执行
                iSpeed = -3; // 动画返回
            }
            if (iLeft < 0) { // 动画返回之后再次折返过去
                iSpeed = 3;
            }

        }, 30);
    }
</script>
<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: gold;
        position: absolute;
        left: 0;
        top: 100px;
    }

</style>

<div id="div1" class="box"></div>

2、定时器制作无缝滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }

        .list_con{
            
            width:1000px;
            height:200px;
            border:1px solid #000;
            margin:10px auto 0;
            background-color:#f0f0f0;
            position:relative;
            overflow:hidden;
        }

        .list_con ul{
            list-style:none;
            width:2000px;
            height:200px;
            position:absolute;
            left:0;
            top:0;
        }


        .list_con li{
            width:180px;
            height:180px;
            float:left;
            margin:10px;
        }

        .btns_con{
            width:1000px;
            height:30px;
            margin:50px auto 0;
            position:relative;
        }

        .left,.right{
            width:30px;
            height:30px;
            background-color:gold;
            position:absolute;
            left:-40px;
            top:124px;
            font-size:30px;
            line-height:30px;
            color:#000;
            font-family: 'Arial';
            text-align:center;
            cursor:pointer;
            border-radius:15px;
            opacity:0.5;
        }

        .right{
            left:1010px;            
            top:124px;          
        }

    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('slide');
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');

            //通过标签获取元素，获取的是选择集，加上下标才能获取到元素          
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var iLeft = 0;
            var iSpeed = -2;
            var iNowspeed = 0;

            //将ul里面的内容复制一份，整个ul里面就包含了10个li
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;  

            function moving(){
                iLeft += iSpeed;

                // 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
                if(iLeft<-1000)
                {
                    iLeft=0;
                }
                //当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
                if(iLeft>0)
                {
                    iLeft = -1000;
                }

                oUl.style.left = iLeft + 'px';
            }

            var timer = setInterval(moving,30);

            oBtn01.onclick = function(){
                iSpeed = -2;
            }

            oBtn02.onclick = function(){
                iSpeed = 2;
            }
            // 当鼠标移入的时候
            oDiv.onmouseover = function(){
                iNowspeed = iSpeed;
                iSpeed = 0;
            }
            // 当鼠标移出的时候
            oDiv.onmouseout = function(){
                iSpeed = iNowspeed;
            }

        }
    </script>
</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div class="list_con" id="slide">
        <ul>
            <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
            <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
            <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
            <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
            <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
        </ul>       
    </div>
</body>
</html>

3、定时器制作时钟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }

    function toweek(n){
        if(n==0)
        {
            return '星期日';
        }
        else if(n==1)
        {
            return '星期一';
        }
        else if(n==2)
        {
            return '星期二';
        }
        else if(n==3)
        {
            return '星期三';
        }
        else if(n==4)
        {
            return '星期四';
        }
        else if(n==5)
        {
            return '星期五';
        }
        else
        {
            return '星期六';
        }
    }


    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
......
<div id="div1"></div>

4、定时器制作倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2016,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

9.16 变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    //全局变量
    var a = 12;
    function myalert()
    {
        //局部变量
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); //弹出12和23
    alert(a);  //弹出12    
    alert(b);  //出错
</script>

9.17 封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数：

1
2
3
4
5
function myalert(){
    alert('hello!');
};

myalert();

封闭函数：

1
2
3
(function myalert(){
    alert('hello!');
})();

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

1
2
3
!function myalert(){
    alert('hello!');
}()

9.17.1 封闭函数的好处

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var iNum01 = 12;
function myalert(){
    alert('hello!');
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

9.18 常用内置对象

1、document

1
2
3
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

2、location

1
2
3
window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    window.onload = function () {
        // 存储上一个页面的地址
        var sUrl = document.referrer;
        var oBtn = document.getElementById("btn01");

        oBtn.onclick = function () {
            window.location.href = "http://www.baidu.com";
        };
        alert(window.location.search);
    }
</script>

<input type="button" id="btn01" value="跳转" name="">

课堂练习
通过地址栏的参数改变页面状态，如下的示例是通过地址栏中的参数改变页面背景色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type="text/javascript">
        window.onload = function () {
            var oBody01 = document.getElementById("body01");
            var sData = window.location.search;
            if (sData != '') {
                var iNum = sData.split("=")[1];
                 // console.log(iNum);
                if (iNum == 1) {
                    oBody01.style.backgroundColor = "red";
                } else {
                    oBody01.style.backgroundColor = "pink";
                };
            };
        }
    </script>

</head>
<body id="body01">
<input type="button" id="btn01" value="跳转" name="">
</body>
</html>

3、Math

1
2
3
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    // var iPi = Math.PI;
    // alert(iPi);

    var sList = [];
    for (var i = 0; i < 20; i++) {
        // Math.random 返回0到1之间的随机数,不包括1
        var iNum = Math.random();
        sList.push(iNum);
    }
   console.log(sList);

    alert(Math.floor(5.6)); // 向下取整，结果是5
    alert(Math.ceil(5.2));  // 向上取整，结果是6
</script>

课堂练习
制作一定范围内的随机整数

1
2
3
4
5
// 获取10到20之间的随机整数
var iN01 = 10;
var iN02 = 20;
var result = Math.floor((iN02 - iN01+1)*Math.random()) + iN01;
alert(result)

10.JQuery

10.1 jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

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

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

10.2 jquery加载

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

1
2
3
4
5
6
7
8
9
<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为：

1
2
3
4
5
6
7
8
9
<script type="text/javascript">

$(function(){

     ......

});

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        // 原生js写法,onload是整个页面加载完后，再渲染完之后才运行
        window.onload = function () {
            var oDiv = document.getElementById("div1");
            alert('这是原生js弹出的div' + oDiv);
        };

        // 完整写法，ready是标签加载完就执行，速度比原生js的快
        $(document).ready(function () {
            var $div = $("#div1");
            alert('这是jquery弹出的div-1' + $div);
        });

        // 简单写法
        $(function () {
            var $div = $("#div1");
            alert('这是jquery弹出的div-2' + $div);
        });
    </script>
</head>
<body>

<div id="div1">
    这是一个div元素
</div>

</body>
</html>

10.3 jquery选择器

10.3.1 jquery用法思想一

选择某个网页元素，然后对它进行某种操作

10.3.2 jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

1
2
3
4
5
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $div = $("#div1");
            $div.css({"color":"red"});


            var $div2 = $(".box");
            $div2.css({"color":"green"});

            var $li = $(".list li");
            // 带'-'的样式属性可以写成驼峰式，也可以写成原始的，容错
            // $li.css({"backgroundColor":"pink"});
            $li.css({"background-color":"pink"});
        });


    </script>
    <!--<style type="text/css">-->
    <!--#div1{-->
    <!--color: gold;-->
    <!--}-->
    <!--.box{-->
    <!--color: green;-->
    <!--}-->
    <!--.list li{-->
    <!--background-color: pink;-->
    <!--}-->
    <!--</style>-->

</head>
<body>

<div id="div1">这是一个div元素</div>
<div class="box">这是第二个div元素</div>
<div class="box">这是第三个div元素</div>

<!--ul.list>li{$}*8-->
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

</body>
</html>

10.3.3对选择集进行过滤

1
2
3
4
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // var $div = $("div");
            // $div.css({"background-color":"red"});

            $("div").css({"background-color":"gold"});
            $("div").has('p').css({"background-color":"red"});
            $("div").eq(4).css({"text-indent":"30px"});
        });
    </script>
</head>
<body>

<div>1</div>
<div><p>2</p></div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

</body>
</html>

10.3.4 选择集转移

1
2
3
4
5
6
7
8
$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $("div").eq(4).prev().css({"color":"green"});

            $("div").find(".tip").css({"color":"red"});
        });
    </script>
</head>
<body>

<div>1</div>
<div><p>2</p></div>
<div>7</div>
<div>
    <span>8</span>
    <span class="tip">9</span>
</div>

</body>
</html>

10.3.5 判断是否选择到了元素

jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $div1 = $('#div1');
            // 没有选中元素，也不会报错，程序正常运行
            var $div2 = $('#div2');
            alert($div1.length); // 弹出1
            alert($div2.length); // 弹出0
        });
    </script>
</head>
<body>

<div id="div1">div元素</div>

</body>
</html>

10.4 jquery样式操作

10.4.1 jquery用法思想二

同一个函数完成取值和赋值

10.4.2 操作行间样式

1
2
3
4
5
6
7
8
// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $div1 = $('#div1');

            $div1.css("width", "30px");
            $div1.css("height", "30px");
            $div1.css({fontSize: "30px", color: "red"});

            alert($div1.css('width'));
            alert($div1.css('color'));

            // 原生js无法读取行间没有定义的css属性值,但是可以读取行间已定义的css属性值
            var oDiv = document.getElementById("box");
            alert(oDiv.style.height);   // 空
            alert(oDiv.style.fontSize); // 20px

        });
    </script>
</head>
<body>

<div id="div1">div元素</div>
<div id="box" style="font-size: 20px;">div元素</div>

</body>
</html>

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $div = $('div');

            alert($div.css("color")); // rgb(0,128,0) => green

        });
    </script>
</head>
<body>

<div style="color: green">1.div元素</div>
<div style="color: red">2.div元素</div>

</body>
</html>

10.4.3 操作样式类名

1
2
3
4
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2,不是替换成divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式，比如点击增加，再点击移除等操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $div = $('.box');

            $div.addClass("big");
            $div.removeClass("box");
            $div.toggleClass("box");

        });
    </script>

    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }

        .big{
            font-size: 30px;
        }
    </style>
</head>
<body>

<div class="box">div元素</div>

</body>
</html>

10.5 绑定click事件

给元素绑定click事件，可以用如下方法：

1
2
3
4
5
6
$('#btn1').click(function(){

    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 绑定click事件
            $("#btn").click(function () {

                // if ($(".box").hasClass("col01")) {
                //     $(".box").removeClass("col01");
                // } else {
                //     $(".box").addClass("col01");
                // }

                // 简化写法
                $(".box").toggleClass("col01");
            });
        });

    </script>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: gold;
        }

        .col01 {
            background-color: green;
        }

    </style>
</head>
<body>

<input type="button" name="" value="切换样式" id="btn">
<div class="box">div元素</div>

</body>
</html>

10.5.1 获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

1
2
3
4
5
6
7
8
9
10
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

课堂练习

选项卡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $btn = $(".btns input");
            var $div = $(".cons div");

            $btn.click(function () {
                // this指的是原生this,它表示当前点击的对象

                // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
                $(this).addClass("current").siblings().removeClass("current");

                // alert($(this).index()); // 查看当前点击对象的索引值

                // 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
                $div.eq($(this).index()).addClass("active").siblings().removeClass("active");
            })
        });


    </script>

    <style type="text/css">
        .btns input {
            width: 100px;
            height: 40px;
            background-color: #dddddd;
        }

        .btns .current {
            background-color: gold;
        }

        .cons div {
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }

        .cons .active {
            display: block;
        }

    </style>

</head>
<body>


<div class="btns">
    <input type="button" name="" value="01" class="current">
    <input type="button" name="" value="02">
    <input type="button" name="" value="03">
</div>

<div class="cons">
    <div class="active">选项卡一的内容</div>
    <div>选项卡二的内容</div>
    <div>选项卡三的内容</div>
</div>

</body>
</html>

10.6 jquery特殊效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

10.7 jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

1
2
3
4
5
6
7
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

课堂练习 - 层级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不能直接在jquery的引入标签里写js代码，需要另写一个script标签，在这个里面那些js代码-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            $('.level1').click(function () {

                //当前点击的元素紧挨的同辈元素向下展开，再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),选择其他同辈元素(li)的子元素ul，然后将它向上收起。

                // 通过stop() 可以修正反复点击导致的持续动画的问题
                $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
            })

        })
        
    </script>

    <style type="text/css">
        body {
            font-family: 'Microsoft Yahei';
        }

        body, ul {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }


        .menu {
            width: 200px;
            margin: 20px auto 0;
        }

        .menu .level1, .menu li ul a {
            display: block;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            background-color: #3366cc;
            color: #fff;
            font-size: 16px;
            text-indent: 10px;
        }

        .menu .level1 {
            border-bottom: 1px solid #afc6f6;

        }

        .menu li ul a {
            font-size: 14px;
            text-indent: 20px;
            background-color: #7aa1ef;

        }

        .menu li ul li {
            border-bottom: 1px solid #afc6f6;
        }


        .menu li ul {
            display: none;
        }

        .menu li ul.current {
            display: block;
        }

        .menu li ul li a:hover {
            background-color: #f6b544;
        }
    </style>

</head>
<body>


<ul class="menu">
    <li>
        <a href="#" class="level1">水果</a>
        <ul class="current">
            <li><a href="#">苹果</a></li>
            <li><a href="#">梨子</a></li>
            <li><a href="#">葡萄</a></li>
            <li><a href="#">火龙果</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">海鲜</a>
        <ul>
            <li><a href="#">蛏子</a></li>
            <li><a href="#">扇贝</a></li>
            <li><a href="#">龙虾</a></li>
            <li><a href="#">象拔蚌</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">肉类</a>
        <ul>
            <li><a href="#">内蒙古羊肉</a></li>
            <li><a href="#">进口牛肉</a></li>
            <li><a href="#">野猪肉</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">蔬菜</a>
        <ul>
            <li><a href="#">娃娃菜</a></li>
            <li><a href="#">西红柿</a></li>
            <li><a href="#">西芹</a></li>
            <li><a href="#">胡萝卜</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">速冻</a>
        <ul>
            <li><a href="#">冰淇淋</a></li>
            <li><a href="#">湾仔码头</a></li>
            <li><a href="#">海参</a></li>
            <li><a href="#">牛肉丸</a></li>
        </ul>
    </li>

</ul>
</body>
</html>

10.8 jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

1
2
3
4
5
6
$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});

参数可以写成数字表达式：

1
2
3
4
5
6
$('#div1').animate({
    width:'+=100',
    height:300
},1000,'swing',function(){
    alert('done!');
});

10.9 尺寸相关、滚动事件

1、获取和设置元素的尺寸

1
2
3
4
width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

1
offset()

3、获取浏览器可视区宽度高度

1
2
$(window).width();
$(window).height();

4、获取页面文档的宽度高度

1
2
$(document).width();
$(document).height();

5、获取页面滚动距离

1
2
$(document).scrollTop();  
$(document).scrollLeft();

6、页面滚动事件

1
2
3
$(window).scroll(function(){  
    ......  
})

10.10 jquery属性操作

1、html() 取出或设置html内容

1
2
3
4
5
6
7
// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

1
2
3
4
5
6
7
// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

10.11 jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $('.list li').each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

10.12 jquery事件

10.12.1 事件函数列表：

1
2
3
4
5
6
7
8
9
10
11
12
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

10.12.2 绑定事件的其他方式

1
2
3
4
5
$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

10.12.3 取消绑定事件

1
2
3
4
5
6
7
8
9
$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

10.13 事件冒泡

10.13.1 什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

10.13.2 事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

10.13.3 阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

10.13.4 阻止默认行为

阻止表单提交

1
2
3
$('#form1').submit(function(event){
    event.preventDefault();
})

10.14.5 合并阻止操作

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

1
2
3
4
5
// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

10.14 事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

10.14.1 一般绑定事件的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

10.14.2 事件委托的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

10.15 jquery元素节点操作

10.15.1 创建节点

1
2
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

10.15.2 插入节点

1、append()和appendTo()：在现存元素的内部，从后面插入元素

1
2
3
4
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

10.15.3 删除节点

1
$('#div1').remove();

10.16 滚轮事件与函数节流

10.16.1 jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

10.16.2 函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

10.17 json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

javascript自定义对象：

1
2
3
4
5
6
7
var oMan = {
    name:'tom',
    age:16,
    talk:function(s){
        alert('我会说'+s);
    }
}

json格式的数据：

1
2
3
4
{
    "name":"tom",
    "age":18
}

与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

json的另外一个数据格式是数组，和javascript中的数组字面量相同。

1
["tom",18,"programmer"]

10.18 ajax与jsonp

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

10.18.1 同步和异步

现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

10.18.2 局部刷新和无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

10.18.3 同源策略

ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

1
2
3
XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

10.18.4 $.ajax使用方法

常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

以前的写法：

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

新的写法(推荐)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

// data.json里面的数据： {"name":"tom","age":18}

10.18.5 jsonp

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了

-------------本文结束 感谢您的阅读-------------
如果觉得我的文章对您有用,请随意打赏.您的支持将鼓励我继续创作!

  • 本文标题： 前端知识汇总
  • 文章作者： 永夜初晗凝碧天
  • 发布时间： 2019年12月31日 - 12:12:27
  • 更新时间： 2019年12月31日 - 12:12:28
  • 本文链接： https://yongnights.github.io/2019/12/31/前端知识汇总/
  • 版权声明： 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
    • 分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多