前端开发学习框架培训方案思维导图模板

title标签：显示网站的标题

meta标签：提供有关页面的信息

style标签：定义内部样式表

link标签：链接css资源文件、网站图标

script标签：链接js脚本文件

head标签

h1~h6：标题标签

p：段落标签

type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

ul：无序标签

type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

ol：有序标签

<dt>：definition title 列表的标题，这个标签是必须的

<dd>：definition description 列表的列表项，如果不需要它，可以不加

dl：自定义列表

div：盒子标签

th：定义表头

tr：定义表行

td：定义单元格数据

分支主题

table：表格标签

定义表单被提交的时发生的动作，提交给服务器处理程序的地址

action

作用：定义表单提交数据时的方式

默认值，明文提交。所提交的数据可以显示在地址上，安全性低

提交数据有大小限制，最大为2KB

get

隐式提交，所提交的内容不会显示到地址栏上，安全性高

无大小限制

post

取值

method

编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器

application/x-www-form-urlencoded：默认，允许将普通字符、特殊字符都提交给服务器，不允许提交文件

multipart/form-data：允许将文件提交给服务器

text/plain：只允许提交普通字符。特殊字符、文件都无法提交

enctype

注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data

作用：允许用户录入多行数据到表单控件中

cols：指定文本域的列数，变相设置当前元素的宽度

rows：指定文本域的行数，变相设置当前元素的高度

属性

textarea：文本域

size：取值大于1的话，则为滚动列表，默认属性值为1，即下拉视图。

multiple：设置多选，该属性出现在<select>中，那么就允许多选，没有属性值。

select属性

value 选项的值

selected 默认选中。注意：如果不设置selected属性的话，那么选项框中的第一项会默认被选中

option属性

select和option选项框

普通按钮，与form表单没有任何关系

button

text：明文显示用户输入的数据

password：密文显示用户输入的数据

checked设置值后被选中

radio：单选按钮，CheckBox 复选框

submit：功能固定化，负责将表单中的表单控件提交给服务端

file：上传文件

type

value 控件的值既要提交给服务器的数据

name 控件的名称，服务端用

disabled 该属性只要出现在标签中，表示的是禁用该控件

input组元素

for属性表示与该label相关联的表单控件元素的ID值

表单控件分类

form：表单标签

<img> 标签用于展示 HTML 页面中的图像，使得页面能够“图文并茂”

img：图像标签

br：换行标签

hr：分割线标签

href 属性，用于创建指向另外一个文档的链接（或超链接）。

a：超链接标签

无语义的行内元素，它可以对元素进行分组，使它们以不同的样式显示

span

button：按钮标签

在一行内显示

不能设置宽高

特点

span、a

可以设置宽高

img、input

行内块是属于行内标签

行内标签

独占一行

可以设置宽高，如果不设置宽高，默认为父级元素的100宽度

块级标签

body标签

html标签

超文本标记语言

定义

标准文档流

HTML

<div>        我是一个段落 </div>

行内样式

内接样式

链接式

导入式

外接样式

css的引入方式

/*标签选择器*/ p{     color: red;     font-size: 20px; } span{      color: yellow; }

标签选择器

同一个页面中id不能重复

任何的标签都可以设置id

id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

#box{       background:green; }

id选择器

任何的标签都可以加类，但是类是可以重复

同一个标签中可以携带多个类，用空格隔开

.line{      text-decoration: underline; }

<div>     段落1     段落2     段落3 </div>

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

每个类要尽可能的小，有公共的概念，能够让更多的标签使用

总结

类选择器

基础选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{     color: red; } .container .item p{     color: yellow; }

后代选择器

.container>p{      color: yellowgreen;  }

子代选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

并集选择器

第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.active

h4{     width: 100px;     font-size: 14px; } .active{     color: red;     text-decoration: underline; } /* 交集选择器 */     h4.active{     background: #00BFFF; }

交集选择器

根据标签中的属性，选中当前的标签。

/*找到for属性的等于username的元素字体颜色设为红色*/ [for='username']{ color: yellow; } /*以....结尾 $*/ /*[for$='vvip']{ color: red; }*/ /*包含某元素的标签*/ /*[for*="vip"]{ color: #00BFFF; }*/ /**/ /*指定单词的属性*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }

属性选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器

/*没有被访问的a标签的样式*/ .box ul li.item1 a:link{     color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{     color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{     color: green; } /*鼠标摁住的时候a标签的样式*/ .box ul li.item4 a:active{     color: yellowgreen; }

伪类选择器

/*设置第一个首字母的样式*/ p:first-letter{     color: red;     font-size: 30px; } /* 在....之前添加内容这个属性使用不是很频繁了解使用此伪元素选择器一定要结合content属性*/ p:before{     content:'alex'; } /*在....之后添加内容，使用非常频繁通常与咱们后面要讲到布局有很大的关联（清除浮动）*/ p:after{     content:'&';     color: red;     font-size: 40px; }

伪元素选择器

高级选择器

css的选择器

给父级设置一些属性，子级继承了父级的该属性

盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

继承性

权重大的标签覆盖掉了权重小的标签

谁的权重大，浏览器就会显示谁的属性

数：id的数量 class的数量标签的数量，顺序不能乱

权重比较办法

/*1 0 0 */显示红色 #box{     color: red; } /*0 1 0*/ .container{     color: yellow; } /*0 0 1*/ p{     color: purple; }

权重都是0:那么就是"就近原则" ：谁描述的近，就显示谁的属性

!important 不影响继承来的权重，只影响选中的元素

!important:设置权重为无限大

2.如果没有被选中标签元素，权重为0。 如果属性都是被继承下来的权重都是0 。权重都是0:"就近原则" ：谁描述的近，就显示谁的属性

层叠性

css的特性

"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

标准模型

IE模型

分类

盒模型示意图

width：内容的宽度

height: 内容的高度

padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;

/*上右下左*/ padding: 20px 30px 40px 50px ; /*上左右下*/ padding: 20px 30px 40px; /* 上下左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;

写综合属性，用空格隔开

描述的方法

padding：内边距，边框到内容的距离

粗细

线性样式

颜色

三个要素

border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */

border: 10px solid red;

border: 边框，就是指的盒子的宽度

/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; /*表示盒子向上移动了100px*/ margin-bottom: 100px;

margin：0 auto;

1.外边距合并只会发生在上下两个方向上，并且只有块级元素上

2.当两个垂直外边距相遇时，会形成一个外边距，称为外边距合并 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。 毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔

1.父级或子元素使用浮动或者绝对定位absolute

2.父级overflow:hidden;

3.父级设置padding（破坏非空白的折叠条件）

4.父级设置border

解决办法：

3.父子嵌套设置垂直外边距之后，会形成外边距合并，影响页面布局

注意：外边距合并的情况

margin：外边距，盒子边框到附近最近盒子的距离

盒模型的属性

盒模型

宏观的讲，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

多个空格会被合并成一个空格显示到浏览器页面中。

空白折叠现象

文字还有图片大小不一，都会让页面的元素出现高矮不齐的现象，但是在浏览器查看页面总会发现底边对齐

高矮不齐，底边对齐

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

自动换行，一行写不满，换行写

微观现象

行内元素： 与其他行内元素并排； 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素： 霸占一行，不能与其他任何元素并列； 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

区别

display: inline;

块级元素可以转换为行内元素

display: block;

行内元素转换为块级元素

块级元素和行内元素的相互转换

块级元素和行内元素

float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

左浮动左侧为起始。从左往右依次排列

float：left

右浮动右侧为起始。从右往左依次排列

float：right

默认不浮动

float:none

文档流的概念：可见元素在文档中的显示位置

浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止

浮动产生的效果

浮动效果

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果

4.收缩的效果

浮动可以是元素脱离文档流，它可以是元素并排显示，1.有贴边现象 2.有收缩现象（块元素转换成行内元素）3.只要盒子浮动了不区分行内还是块级标签，可以任意的设置宽高。但是大家记住，要浮动一起浮动，要不一起不浮动

特性

在页面布局中，一般情况父元素的高度是不设置的，通过子元素来填充它的高度。 但是子元素设置浮动之后，不会撑开父元素的高度。因为子元素不占位置

浮动产生的问题

缺点：不灵活

1.给父盒子设置固定高度

缺点：结构冗余，无缘无故添加了一个块级元素

2.给浮动元素最后一个子元素后面添加一个空的块级元素，且该元素不浮动，设置clear:both

3.官方写法：建议大家这样去写给父盒子设置： .clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}

浮动解决方案

浮动

正常字体

normal

斜体字体

italic

倾斜字体

oblique

指定文本的样式

font-style

none(默认值，标准粗细)

bold(粗体)

border(更粗）

lighter(更细)

100~900（设置具体粗细，400等同于normal，而700等同于bold）

inherit（继承父元素字体的粗细值）

表示设置字体的粗细

font-weight

表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。

font-size

指定文本使用某个字体

font-family

字体属性

left 内容左对齐

center 内容居中对齐

right 内容右对齐

justify 内容两端对齐只适应于英文

设置元素中的文本的水平对齐方式。

text-align

text-indent 属性规定元素首行缩进的距离，单位建议使用em

none 文字无装饰 

underline 下划线

overline 上划线

line-through 删除线

inherit(继承父元素的text-decoration属性的值)

text-decoration

指定文本字体的行高，字体最底端与字体内部顶端之间的距离，设置行高=盒子的高度，使文本垂直居中

line-height

文本text属性

red

yellow

blue

black

green

······

16个基础颜色关键字

yellowgreen

扩展关键字

Color Name

RR：红色

GG：绿色

BB：蓝色

以上三个参数，取值范围为：00-FF

参数必须是两位数。对于只有一位数的，应在前面补零

如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。 例如：#FF8800 可以缩写为 #F80

此色彩模式与RGB色彩模式不同

十六进制记法

#RRGGBB或#RGB

十六进制

以上三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%

RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的

RGB记法

RGB

RGBA

颜色 color

transparent 默认透明

表示背景颜色

background-color

none 无背景图

background-image: url(./1.jpg)

设置该元素的背景图片

background-img

默认。背景图像将在垂直方向和水平方向重复。

repeat

背景图像将在水平方向重复。

repeat-x

背景图像将在垂直方向重复。

repeat-y

背景图像不平铺

no-repeat

规定应该从父元素继承 background-repeat 属性的设置

inherit

设置该元素平铺的方式

background-repeat

x y

background-position

背景background

相对于自己原来的位置定位

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

现象和使用

1.不脱标

2.形影分离

3.老家留坑

1.微调元素位置

2.做绝对定位的参考（父相子绝）

3.可以提升层级关系

用途

relative：相对定位

1.无父级元素定位时，以页面的左上角为基准

2.有父级元素的情况下，父级设置相对定位，子级设置绝对定位，是以最近的父辈盒子为基准进行定位

参考点

1.提成层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

2.脱离标准流

*{     padding: 0;     margin: 0; } .box{     width: 100%;     height: 69px;     background: #000; } .box .c{     width: 960px;     height: 69px;     background-color: pink;     /*margin: 0 auto;*/     position: relative;     left: 50%;     margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。 当做公式记下来设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/ }

绝对定位的盒子居中

absolute：绝对定位

固定当前的元素不会随着页面滚动而滚动

1.脱标

2.遮盖，提升层级

3.固定不变

1.返回顶部栏

2.固定导航栏

3.小广告

作用

fixed：固定定位

定位

z-index 值表示谁压着谁，数值大的压盖住数值小的，

z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

z-index

行内显示

inline

块

block

行内块

inline-block

不显示

none

display

层叠样式表

CSS

（1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。

（2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。

（3）基于对象：内置大量现成对象，编写少量程序可以完成目标

变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。

var  变量的声明

弹出警告框

alert("")

控制台输出

console.log("")

网页中输出信息

（1）JavaScript对换行、缩进、空格不敏感。 备注：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。

（2）所有的符号，都是英语的。比如括号、引号、分号。

// 我是注释

单行注释

/* 多行注释1 多行注释2 */

多行注释

（3）JavaScript的注释：

语法规则

var a = 123; //typeof 检查当前变量是什么数据类型 console.log(typeof a) //特殊情况 var a1 = 5/0; console.log(typeof e1) //Infinity 无限大. number类型

number：数字

var str = '123' console.log(typeof str)

string：字符串

var b1 = false; console.log(typeof b1)

boolean：布尔

var c1 = null;//空对象. object console.log(c1)

null：空

var d1; //表示变量未定义 console.log(typeof d1)

undefined：未定义

基本数据类型

Function

Object

Arrray

String

Date

引用数据类型

数据类型

=

+=

-=

*=

/=

%=

赋值运算符

加

+

减

-

乘

*

除

/

自增

++

自减

--

取余

%

算数运算符

等于

==

等同于（值和类型都相等）

===

不等于

!=

不等同于（值和类型有一个不相等或两个都不相等）

!===

大于

>

小于

<

大于等于

>=

小于等于

<=

比较运算符

运算符

var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 隐式转换 console.log(typeof n3);

隐式转换

强制类型转换

将数值类型转换成字符串类型

var stringNum = '789.123wadjhkd'; var num2 = Number(stringNum); console.log(num2) // parseInt()可以解析一个字符串并且返回一个整数 console.log(parseInt(stringNum)) console.log(parseFloat(stringNum));

将字符串类型转换成数值类型

var b1 = '123'; var b2 = 0; var b3 = -123 var b4 = Infinity; var b5 = NaN; var b6; //undefined var b7 = null; // 非0既真 console.log(Boolean(b7))

任何数据类型都可以转换为boolean类型

数据类型转换

var ji = 20; if(ji >= 20){ console.log('恭喜你，吃鸡成功，大吉大利') } alert('alex');//下面的代码还会执行

var ji = 20; if(ji>=20){ console.log('恭喜你，吃鸡成功，大吉大利') }else{ console.log('很遗憾下次继续努力') }

if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行 }

1.if 、if-else、if-else if-else

//1.模拟如果总分 >400 并且数学成绩 >89分被清华大学录入 //逻辑与&& 两个条件都成立的时候才成立 if(sum>400 && math>90){ console.log('清华大学录入成功') }else{ alert('高考失利') }

//2.模拟如果总分>400 或者你英语大于85 被复旦大学录入 //逻辑或只有有一个条件成立的时候才成立 if(sum>500 || english>85){ alert('被复旦大学录入') }else{ alert('高考又失利了') }

2.逻辑与&&、逻辑或||

var gameScore = 'better'; switch(gameScore){ //case表示一个条件满足这个条件就会走进来遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你吃鸡成功') break; default: console.log('很遗憾') }

3.switch

1.初始化循环变量 2.判断循环条件 3.更新循环变量

var i = 1; //初始化循环变量 while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件 }

4.while循环

//不管有没有满足while中的条件do里面的代码都会走一次 var i = 3;//初始化循环变量 do{ console.log(i) i++;//更新循环条件 }while (i<10) //判断循环条件

5.do-while

for(var i = 1;i<=10;i++){ console.log(i) }

for(var i=1;i<=3;i++){ 　　for(var j=0;j<6;j++){ document.write('*') } document.write(' ') }

双重fo循环

6.for循环

流程控制

使用构造函数（后面会讲）的方式创建使用new关键词对构造函数进行创建对象  var colors2 = new Array();

创建方式

数组的合并

concat()

将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串

join() 

将数组转换成字符串

toString()

返回数组的一段，左闭右开

删除数组的最后一个元素并返回删除的元素

pop()

向数组末尾添加一个元素或多个元素，并返回新的长度

push()

翻转数组

reverse()

对数组排序

sort()

判断是否为数组

布尔类型值 = Array.isArray(被检测的值) ;

isArray()

删除并返回数组的第一个元素

shift()

向数组的开头添加一个或更多元素，并返回新的长度

unshift()

获取数组长度

length()

常用方法

数组Array

返回指定索引的位置的字符

var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l

charAt()

返回字符串值，表示两个或多个字符串的拼接

将字符串a替换成字符串b

查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样

var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-1

indexof()

左闭右开分割字符串

slice(start，end)

以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度

左闭右开

转小写

var str = 'XIAOMAGE'; console.log(str.toLowerCase())；//xiaomage

toLowerCase()

转大写

var str = 'xiaomage'; console.log(str.toUpperCase());

toUpperCase()

提取字符串中介于两个指定下标之间的字符。返回的子串包括开始处的字符，但不包括结束处的字符

去除字符串两边的空白

trim()

可在字符串内检索制定的值。或找到一个或多个正则表达式的匹配。

match()

字符串String

//创建了一个date对象 var myDate = new Date();

Date日期对象

向上取整，'天花板函数'

var x = 1.234; //天花板函数表示大于等于 x，并且与它最接近的整数是2 var a = Math.ceil(x); console.log(a);//2

Math.ceil()

向下取整，'地板函数'

var x = 1.234; // 小于等于 x，并且与它最接近的整数 1 var b = Math.floor(x); console.log(b);//1

Math.floor()

求两个数的最大值和最小值

Math.max() Math.min()

随机数

min - max之间的随机数:  min+Math.random()*(max-min)

Math.random()

Math 内置对象

将一些语句进行封装，然后通过调用的形式，执行这些语句。

将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。

简化编程，让编程模块化。

add();

普通函数

没有名字的函数在js中称为匿名函数

var add=function(){}

函数对象

构造函数

Function函数

伪数组 arguments

常用内置对象

ECMAScript5基础语法

文档对象模型，操作网页上的元素的API

事件源：引发后续事件的html标签。

事件：js已经定义好了。

事件驱动程序：对样式和html的操作。也就是DOM。

事件的三要素

DOM树

document.getElementById()

docuemnt.getElementsByClassName()

docuemnt.getElementsByTagName()

获取DOM的三种方式

DOM访问关系的获取

文本内容，只包含文本不包含标签

innerText

渲染标签也可以设置文本

innerHTML

对于标签中有value属性的设置，表单控件

value

值的操作

对于style对象的操作，css中的属性都可以设置，注意margin-left属性，使用js设置值的时候是oDiv.style.marginLeft = '30px';

样式操作

比如标签中的id，class，title属性的设置，img标签的src属性，a标签中的href属性的属性 注意：设置class的时候使用className

myNode.src = "images/2.jpg" //修改src的属性值 myNode.className = "image2-box"; //修改class的name

属性操作

document.createElement('div');

创建DOM

适用于父DOM插入子DOM

父.appendChild(子标签)

适用于兄弟之间

父.insertBefore(要插入的节点，参考的节点)

追加DOM

父.removeChild(子)

node1.parentNode.removeChild(node1);

删除自己这个节点

删除DOM

DOM的操作

var student = new Object(); student.name = "easy"; student.age = "20";

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

function Student() { this.name = 'easy'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); //easy stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数

4.原型模式创建对象

创建对象的几种常用方式

JS中的面向对象

只在指定时间后执行一次

1.setTimeOut()

在指定时间为周期循环执行

2.setInterval()

定时器

DOM

浏览器对象模型，操作浏览器部分功能的API

BOM的结构图

alert(1)是window.alert(1)的简写

alert(); //不同浏览器中的外观是不一样的

confirm(); //兼容不好

prompt(); //不推荐使用

弹出系统对话框

url：要打开的地址

target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。

打开窗口、关闭窗口

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

href：跳转

hash 返回url中#后面的内容，包含#

host 主机名，包括端口

hostname 主机名

pathname url中的路径部分

protocol 协议一般是http、https

search 查询字符串

location对象的属性

location.reload()：重新加载

location对象的方法

location对象

window.navigator 的一些属性可以获取客户端的一些信息。

console.log(navigator.userAgent);

userAgent：系统，浏览器)

console.log(navigator.platform);

platform：浏览器支持的系统，win/mac/linux

navigator对象

history.back()

history.go(-1)：0是刷新

1、后退

history.forward()

history.go(1)

2、前进

history对象

为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

sessionStorage（临时存储）

与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

localStorage（长期存储）

1.保存数据到本地

var data1 = JSON.parse(sessionStorage.getItem('key')); var data2 = JSON.parse(localStorage.getItem('key'));

2.从本地存储获取数据

sessionStorage.removeItem('key'); localStorage.removeItem('key');

3.本地存储中删除某个保存的数据

sessionStorage.clear(); localStorage.clear();

4.删除所有保存的数据

Storage 发生变化（增加、更新、删除）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

5.监听本地存储的变化

HTML5 存储技术 localStorage sessionStorage

clientTop 内容区域到边框顶部的距离，说白了，就是边框的高度 clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度

client系列

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> // 屏幕的可视区域 window.onload = function(){ // document.documentElement 获取的是html标签 console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); // 窗口大小发生变化时，会调用此方法 window.onresize = function(){ console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); } } </script> </html>

屏幕的可视区域

offset系列

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} </style> </head> <body style="width: 2000px;height: 2000px;"> <div style="height: 200px;background-color: red;"></div> <div style="height: 200px;background-color: green;"></div> <div style="height: 200px;background-color: yellow;"></div> <div style="height: 200px;background-color: blue;"></div> <div style="height: 200px;background-color: gray;"></div> <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;"> 学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界学习新技能，达成人生目标，开始用自己的力量影响世界 </div> </body> <script type="text/javascript"> window.onload = function(){ //实施监听滚动事件 window.onscroll = function(){ // console.log(1111) // console.log('上'+document.documentElement.scrollTop) // console.log('左'+document.documentElement.scrollLeft) // console.log('宽'+document.documentElement.scrollWidth) // console.log('高'+document.documentElement.scrollHeight) } var s = document.getElementById('scroll'); s.onscroll = function(){ // scrollHeight : 内容的高度+padding 不包含边框 console.log('上'+s.scrollTop) console.log('左'+s.scrollLeft) console.log('宽'+s.scrollWidth) console.log('高'+s.scrollHeight) } } </script> </html>

scroll系列

client、offset、scroll系列

BOM

JavaScript

链式编程：比如.show()和.html()可以连写成.show().html()。

隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用自己再进行循环，简化操作，方便调用。

jQuery 的两大特点

引包

入口函数

功能实现代码（事件处理）

使用 jQuery 的基本步骤

//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(document).ready(function () { alert(1); })

//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(function () { alert(1); });

//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 $(window).ready(function () { alert(1); })

jQuery的入口函数

通过 jQuery 获取的元素是一个伪数组，数组中包含着原生JS中的DOM对象。

DOM对象和jQuery对象比较

$(js对象);

1、DOM 对象转为 jQuery对象

jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2

2、jQuery对象转为 DOM 对象

$('div')[1].style.backgroundColor = 'yellow'; $('div')[3].style.backgroundColor = 'green';

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能

DOM对象与jQuery对象转换

jQuery 的基本选择器

层级选择器

基本过滤选择器

筛选选择器

jQuery的选择器

无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

$("div").show();

通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

$('div').show(3000);

slow 慢：600ms

normal 正常：400ms

fast 快：200ms

$("div").show("slow");

动画执行完后，立即执行回调函数。

显示动画

$(selector).hide();

$(selector).hide(1000);

$(selector).hide("slow");

隐藏动画

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

开关式显示隐藏动画

下拉动画，显示元素。

滑入动画效果

上拉动画，隐藏元素。

滑出动画效果

滑入滑出切换动画效果

滑入和滑出

淡入动画效果

$(selector).fadeOut(1000);

淡出动画效果

淡入淡出切换动画效果

淡入淡出动画

第一个参数表示：要执行动画的CSS属性（必选）

第二个参数表示：执行动画时长（可选）

第三个参数表示：动画执行完后，立即执行的回调函数（可选）

自定义动画

true：后续动画不执行。

false：后续动画会执行。

第一个参数

true：立即执行完成当前动画。

false：立即停止当前动画。

第二个参数

默认两个都是false

停止动画

jQuery动画效果

设置属性值或者，返回被选元素的属性值

attr()

移除属性

//删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //删除多个属性 $('#box').removeAttr('name class');

removeAttr()

返回属性的值

$(selector).prop(property)

设置属性和值

设置多个属性和值

设置或返回被选元素的属性和值

prop()

$(selector).removeProp(property)

移除由 prop() 方法设置的属性。

removeProp()

html属性操作

$('div').addClass("box");//追加一个类名到原有的类名

为每个匹配的元素添加指定的类名

$('div').addClass("box box2");//追加多个类名

为匹配的元素添加多个类名

添加多个类名

addClass()

$('div').removeClass('box')；

移除指定的类（一个或多个）

$('div').removeClass();

移除全部的类

从所有匹配的元素中删除全部或者指定的类

removeClass()

toggleClass('box')

$('span').click(function(){ //动态的切换class类名为active $(this).toggleClass('active') })

如果存在（不存在）就删除（添加）一个类

toggleClass()

类样式操作

$('#box').html();

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

设置值：设置该元素的所有内容会替换掉标签中原来的内容

获取选中标签元素中所有的内容

html()

$('#box').text();

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

设置值：设置该所有的文本内容

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

获取匹配元素包含的文本内容

text()

val()用于表单控件中获取值，比如input textarea select等等

$('input').val('设置了表单控件中的值')；

设置值

获取值

val()

值操作

操作input的value值

追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app'));

父元素.append(子元素)

追加到某元素子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active');

子元素.appendTo(父元素)

前置添加，添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>');

父元素.prepend(子元素)；

$('<a href="#">路飞学诚</a>').prependTo('ul');

子元素.prependTo(父元素)；

父子之间

$('ul').after('<h4>我是一个h3标题</h4>');

兄弟元素.after(要插入的兄弟元素)；

$('<h5>我是一个h2标题</h5>').insertAfter('ul');

要插入的兄弟元素.inserAfter(兄弟元素)；

在匹配的元素之后插入内容

$('ul').before('<h3>我是一个h3标题</h3>');

兄弟元素.before(要插入的兄弟元素)；

$('<h2>我是一个h2标题</h2>').insertBefore('ul');

要插入的兄弟元素.inserBefore(兄弟元素)；

在被选元素前插入指定的内容

兄弟之间

插入操作

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>'); //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));

替换所有。将所有的h2标签替换成p标签。

$(' <hr/><button>按钮</button>').replaceAll('h4');

$('哈哈哈').replaceAll('h2');

$(selector).replaceWith(content);

替换操作

删除节点后，事件也会删除

$('ul').remove();

$(selector).remove();

删除节点后，事件会保留

var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)

$(selector).detach();

清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul $('ul').empty()

$(selector).empty();

删除操作

DOM属性操作

jQuery的属性操作

.width()

为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回 一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width()方法。

获取宽度

给每个匹配的元素设置CSS宽度。

.width( value )

设置宽度

.height()

获取匹配元素集合中的第一个元素的当前计算高度值。这个方法不接受任何参数

获取高度

.height( value )

设置每一个匹配元素的高度值

设置高度

宽度和高度

.innerWidth()

获取内部宽

.innerWidth(value);

为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

设置内部宽

.innerHeight();

获取内部高

.innerHeight(value);

为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

内部宽内部高

.outerWidth( [includeMargin ] )

获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）

includeMargin (默认: `false`) 类型： `Boolean` 一个布尔值，表明是否在计算时包含元素的margin值。

这个方法不适用于`window` 和 `document`对象，可以使用`.width()`代替

获取外部宽

.outerWidth( value )

为匹配集合中的每个元素设置CSS外部宽度。

设置外部宽

.outerHeight( [includeMargin ] )

获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）

.outerHeight( value )

为匹配集合中的每个元素设置CSS外部高度。

设置外部高

外部宽和外部高

返回值：[Object]。.offset()`返回一个包含`top` 和 `left`属性的对象。

在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。

.offset()

获取偏移

设置匹配的元素集合中每一个元素的坐标，坐标相对于文档。

coordinates 类型: [Object] 一个包含`top` 和 `left`属性的对象，用整数指明元素的新顶部和左边坐标。

.offset( coordinates )

设置偏移

偏移

.scrollLeft()

获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）

水平方向获取

.scrollLeft( value )

设置每个匹配元素的水平方向滚动条位置。

水平方向设置

.scrollTop()

获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）

垂直方向获取

设置每个匹配元素的垂直方向滚动条位置。

垂直方向设置

滚动距离

jQuery的位置信息

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等， 可以向文档或者文档中的元素添加事件侦听器来预订事件

事件

事件流描述的是从页面中接收事件的顺序

事件流的定义

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

事件流的三个阶段

解决单双击的冲突问题

事件流

利用冒泡的原理，把事件加到父级上，触发执行效果。

原理

1.性能要好

2.针对新创建的元素，直接可以拥有事件

事件源

为DOM中的很多元素绑定相同事件；

为DOM中尚不存在的元素绑定事件；

使用情景

事件委托

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

$('#btn').click(function(){ //只传一个url，表示在id为#new-projects的元素里加载index.html $('#new-projects').load('./index.html'); })

jQuery的load()方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中

url参数：为请求加载json格式文件的服务器地址

可选项data参数：为请求时发送的数据

callback参数：为数据请求成功后执行的函数

参数解释

jquery的getJSON方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

url参数：规定你请求的路径，是必需参数

jquery的$.get()方法

post()方法用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面

url参数：规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据

可选的callback参数：为数据请求成功后执行的函数

jquery的post()方法

1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

json：返回JSON数据。

jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

7.dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

8.beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }

(1)由服务器返回，并根据dataType参数进行处理后的数据。

10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

12.contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

15.global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。