首页  思维导图  详情

前端开发学习框架培训方案

2022-10-13 10:11:46   0  举报





AI智能生成

前端开发学习框架培训方案

前端开发

前端

作者其他创作

大纲/内容

HTML

html标签

head标签

title标签：显示网站的标题

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

style标签：定义内部样式表

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

script标签：链接js脚本文件

body标签

h1~h6：标题标签

p：段落标签

ul：无序标签

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

ol：有序标签

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

dl：自定义列表

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

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

div：盒子标签

table：表格标签

th：定义表头

tr：定义表行

td：定义单元格数据

分支主题

form：表单标签

action

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

method

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

取值

get

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

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

post

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

无大小限制

enctype

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

取值

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

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

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

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

表单控件分类

textarea：文本域

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

属性

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

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

select和option选项框

select属性

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

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

option属性

value 选项的值

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

input组元素

type

button

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

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

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

radio：单选按钮，CheckBox 复选框

checked设置值后被选中

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

file：上传文件

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

name 控件的名称，服务端用

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

lable 功能：关联文本与表单元素的,点击文本时,如同点击表单元素一样

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

img：图像标签

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

br：换行标签

hr：分割线标签

a：超链接标签

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

span

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

button：按钮标签

行内标签

特点

在一行内显示

不能设置宽高

span、a

行内块是属于行内标签

在一行内显示

可以设置宽高

img、input

块级标签

独占一行

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

div、h1~h6,、ul、li、ol等

定义

超文本标记语言

标准文档流

CSS

css的引入方式

行内样式

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

内接样式

外接样式

链接式

导入式

css的选择器

基础选择器

标签选择器

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

id选择器

同一个页面中id不能重复

任何的标签都可以设置id

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

#box{       background:green; }

类选择器

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

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

.line{      text-decoration: underline; }

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

总结

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

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

高级选择器

后代选择器

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

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

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{      color: yellowgreen;  }

并集选择器

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

/*并集选择器*/ h3,a{     color: #008000;     text-decoration: none; }

交集选择器

第一个标签必须是标签选择器，第二个标签必须是类选择器语法：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; }

/*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色隔行换色 隔4换色就是5n+1,隔3换色就是4n+1 */ div ul li:nth-child(5n+1){ font-size: 50px; color: red; }

伪元素选择器

/*设置第一个首字母的样式*/ 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 不影响继承来的权重，只影响选中的元素

总结

1.先看标签元素有没有被选中，如果选中了，就数数（id,class,标签的数量）谁的权重大就显示谁的属性。权重一样大，后来者居上

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

盒模型

定义

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

分类

标准模型

IE模型

盒模型示意图

分支主题

盒模型的属性

width：内容的宽度

height: 内容的高度

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

描述的方法

写小属性,分别设置不同方向的padding

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;

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

三个要素

粗细

线性样式

颜色

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;

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

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

margin：0 auto;

注意：外边距合并的情况

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

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

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

解决办法：

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

2.父级overflow:hidden;

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

4.父级设置border

标准文档流

定义

宏观的讲，我们的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}

4.给父元素添加overflow:hidden 推荐使用,不要忘记它本身的意思

字体属性

font-style

指定文本的样式

normal

正常字体

italic

斜体字体

oblique

倾斜字体

font-weight

表示设置字体的粗细

none(默认值，标准粗细)

bold(粗体)

border(更粗）

lighter(更细)

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

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

font-size

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

font-family

指定文本使用某个字体

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

文本text属性

text-align

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

left 内容左对齐

center 内容居中对齐

right 内容右对齐

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

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

text-decoration

none 文字无装饰 

underline 下划线

overline 上划线

line-through 删除线

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

line-height

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

颜色 color

Color Name

16个基础颜色关键字

red

yellow

blue

black

green

······

扩展关键字

yellowgreen

······

十六进制

#RRGGBB或#RGB

RR：红色

GG：绿色

BB：蓝色

十六进制记法

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

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

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

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

RGB

RGB(R,G,B)

RGB记法

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

超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析为rgb(255,0,0)

正整数值255对应百分比数值100%，如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF

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

RGBA

背景background

background-color

表示背景颜色

transparent 默认透明

background-img

设置该元素的背景图片

none 无背景图

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

background-repeat

设置该元素平铺的方式

repeat

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

repeat-x

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

repeat-y

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

no-repeat

背景图像不平铺

inherit

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

background-position

设置或检索对象的背景图像位置,必须先指定background-image属性

x y

如果是正值,表示调整背景图的位置

如果为负值,表示精灵图技术

定位

relative：相对定位

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

现象和使用

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

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

特性

1.不脱标

2.形影分离

3.老家留坑

用途

1.微调元素位置

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

3.可以提升层级关系

absolute：绝对定位

参考点

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等于元素宽度的一半，实现绝对定位盒子居中*/ }

fixed：固定定位

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

特性

1.脱标

2.遮盖，提升层级

3.固定不变

作用

1.返回顶部栏

2.固定导航栏

3.小广告

z-index

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

只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

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

display

inline

行内显示

block

块

inline-block

行内块

none

不显示

定义

层叠样式表

JavaScript

特点

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

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

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

ECMAScript5基础语法

var  变量的声明

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

网页中输出信息

alert("")

弹出警告框

console.log("")

控制台输出

语法规则

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

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

（3）JavaScript的注释：

单行注释

// 我是注释

多行注释

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

数据类型

基本数据类型

number：数字

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

string：字符串

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

boolean：布尔

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

null：空

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

undefined：未定义

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

引用数据类型

Function

Object

Arrray

String

Date

运算符

赋值运算符

算数运算符

加

减

乘

除

自增

自减

取余

比较运算符

等于

===

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

不等于

!===

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

大于

小于

大于等于

小于等于

数据类型转换

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

隐式转换

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

强制类型转换

// 强制类型转换String(),toString() var str1 = String(n1); console.log(typeof str1); var num = 234; console.log(num.toString())

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

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

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

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))

流程控制

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

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{ //满足条件执行 }

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

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

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

3.switch

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('很遗憾') }

4.while循环

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

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

5.do-while

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

6.for循环

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

双重fo循环

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

常用内置对象

数组Array

创建方式

字面量方式创建 var colors = ['red','color','yellow'];

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

常用方法

concat()

数组的合并

var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north.concat(south); console.log(newCity)

join() 

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

var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//98|78|76|100|0

toString()

将数组转换成字符串

var score = [98,78,76,100,0]; //toString() 直接转换为字符串每个元素之间使用逗号隔开 var str = score.toString(); console.log(str);//98,78,76,100,0

slice(start,end)

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

var arr = ['张三','李四','王文','赵六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]

pop()

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

var arr = ['张三','李四','王文','赵六']; var item = arr.pop(); console.log(arr);//["张三", "李四"，"王文"] console.log(item);//赵六

push()

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

var arr = ['张三','李四','王文','赵六']; var newLength= arr.push('小马哥');//可以添加多个，以逗号隔开 console.log(newLength);//5 console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]

reverse()

翻转数组

var names = ['alex','xiaoma','tanhuang','angle']; //4.反转数组 names.reverse(); console.log(names);

sort()

对数组排序

var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

isArray()

判断是否为数组

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

shift()

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

unshift()

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

length()

获取数组长度

字符串String

常用方法

charAt()

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

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

concat()

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

var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex

replace(a,b)

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

var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****755

indexof()

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

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

slice(start，end)

左闭右开分割字符串

var str = '小马哥'; console.log(str.slice(1,2));//马

split('a',1)

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

var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

substr(start,end)

左闭右开

var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(0,4));//我的天呢

toLowerCase()

转小写

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

toUpperCase()

转大写

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

substring(from,to)

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

trim()

去除字符串两边的空白

match()

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

Date日期对象

创建日期对象只有构造函数一种方式,使用new关键字

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

常用方法

分支主题

Math 内置对象

Math.ceil()

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

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

Math.floor()

向下取整，'地板函数'

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

Math.max() Math.min()

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

//求两个数的最大值最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2

Math.random()

随机数

var ran = Math.random(); console.log(ran);[0,1)

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

Function函数

定义

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

作用

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

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

普通函数

function add(x,y){};

add();

函数对象

var add=function(){}

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

构造函数

在es5中是没有class的概念,创建对象使用new关键字,建议构造函数的第一个字母为大写

伪数组 arguments

有数组的索引和length属性 ,但是没有数组的方法,称这种对象叫伪数组

DOM

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

事件的三要素

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

事件：js已经定义好了。

分支主题

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

DOM树

分支主题

获取DOM的三种方式

document.getElementById()

docuemnt.getElementsByClassName()

docuemnt.getElementsByTagName()

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

元素节点.setAttribute(属性名, 新的属性值);

DOM的操作

创建DOM

document.createElement('div');

追加DOM

父.appendChild(子标签)

适用于父DOM插入子DOM

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

适用于兄弟之间

删除DOM

父.removeChild(子)

删除自己这个节点

node1.parentNode.removeChild(node1);

JS中的面向对象

创建对象的几种常用方式

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

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

var sutdent = { name : "easy", age : 20 };

2.工厂模式创建对象

function createStudent(name, age) { var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("easy1", 20); var student2 = createStudent("easy2", 20); ... var studentn = createStudent("easyn", 20);

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

var v1 = new Student("easy", 20); var v2 = new Fruit("apple", "green");

4.原型模式创建对象

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 二者共享同一函数

定时器

1.setTimeOut()

只在指定时间后执行一次

/定时器异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器

2.setInterval()

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

/实时刷新时间单位为毫秒 setInterval('refreshQuery()',8000); /* 刷新查询 */ function refreshQuery(){ console.log('每8秒调一次') }

BOM

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

BOM的结构图

分支主题

弹出系统对话框

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

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

confirm(); //兼容不好

prompt(); //不推荐使用

打开窗口、关闭窗口

window.open(url,target)

url：要打开的地址

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

location对象

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

location对象的属性

href：跳转

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

host 主机名，包括端口

hostname 主机名

pathname url中的路径部分

protocol 协议一般是http、https

search 查询字符串

location对象的方法

location.reload()：重新加载

setTimeout(function(){ //3秒之后让网页整个刷新 window.location.reload(); },3000)

navigator对象

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

userAgent：系统，浏览器)

console.log(navigator.userAgent);

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

console.log(navigator.platform);

history对象

1、后退

history.back()

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

2、前进

history.forward()

history.go(1)

HTML5 存储技术 localStorage sessionStorage

分类

sessionStorage（临时存储）

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

localStorage（长期存储）

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

1.保存数据到本地

let info = { name: 'Lee', age: 20, id: '001' }; sessionStorage.setItem('key', JSON.stringify(info)); localStorage.setItem('key', JSON.stringify(info));

2.从本地存储获取数据

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

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

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

4.删除所有保存的数据

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

5.监听本地存储的变化

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

window.addEventListener('storage', function (e) { console.log('key', e.key); console.log('oldValue', e.oldValue); console.log('newValue', e.newValue); console.log('url', e.url); })

client、offset、scroll系列

client系列

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

屏幕的可视区域

<!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系列

offsetWidth占位宽内容+padding+border offsetHeight占位高 offsetTop: 如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值 offsetLeft：如果盒子没有设置定位到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值

scroll系列

<!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>

jQuery

jQuery 的两大特点

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

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

使用 jQuery 的基本步骤

引包

入口函数

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

分支主题

jQuery的入口函数

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

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

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

DOM对象和jQuery对象比较

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

DOM对象与jQuery对象转换

1、DOM 对象转为 jQuery对象

$(js对象);

2、jQuery对象转为 DOM 对象

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

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

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

jQuery的选择器

jQuery 的基本选择器

分支主题

层级选择器

分支主题

基本过滤选择器

分支主题

属性选择器

分支主题

筛选选择器

分支主题

jQuery动画效果

显示动画

$("div").show();

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

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

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

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

slow 慢：600ms

normal 正常：400ms

fast 快：200ms

//show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); });

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

隐藏动画

$(selector).hide();

$(selector).hide(1000);

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

$(selector).hide(1000, function(){});

开关式显示隐藏动画

$('#box').toggle(3000,function(){});

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

$('#btn').click(function(){ $('#box').toggle(3000,function(){ $(this).text('盒子出来了'); if ($('#btn').text()=='隐藏') { $('#btn').text('显示'); }else{ $('#btn').text('隐藏'); } }); })

滑入和滑出

滑入动画效果

$(selector).slideDown(speed, 回调函数);

下拉动画，显示元素。

滑出动画效果

$(selector).slideUp(speed, 回调函数);

上拉动画，隐藏元素。

滑入滑出切换动画效果

$(selector).slideToggle(speed, 回调函数);

淡入淡出动画

淡入动画效果

$(selector).fadeIn(speed, callback);

淡出动画效果

$(selector).fadeOut(1000);

淡入淡出切换动画效果

$(selector).fadeToggle('fast', callback);

自定义动画

$(selector).animate({params}, speed, callback);

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

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

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

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自定义动画 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html>

停止动画

$(selector).stop(true, false);

第一个参数

true：后续动画不执行。

false：后续动画会执行。

第二个参数

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

false：立即停止当前动画。

默认两个都是false

jQuery的属性操作

html属性操作

attr()

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

//获取值：attr()设置一个属性值的时候只是获取值 var id = $('div').attr('id') console.log(id) var cla = $('div').attr('class') console.log(cla) //设置值 //1.设置一个值设置div的class为box $('div').attr('class','box') //2.设置多个值，参数为对象，键值对存储 $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除属性

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

prop()

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

$(selector).prop(property)

返回属性的值

$(selector).prop(property,value)

设置属性和值

$(selector).prop({property:value, property:value,...})

设置多个属性和值

removeProp()

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

$(selector).removeProp(property)

分支主题

类样式操作

addClass()

添加多个类名

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

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

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

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

removeClass()

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

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

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

移除全部的类

$('div').removeClass();

toggleClass()

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

toggleClass('box')

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

值操作

html()

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

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

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

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

text()

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

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

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

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

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

val()

获取值

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

设置值

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

操作input的value值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> 男 <input type="radio" name="sex" checked=""> 女 <input type="radio" name="sex"> <select> <option>张三</option> <option text='test'>李四</option> <option>王五</option> </select> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // $('input[type=radio]').get(1).checked = true; //设置value=2的项目为当前选中项 $("input[type=radio]").eq(1).attr("checked", true); $('input[type=radio]').change(function (event) { /* Act on the event */ alert(1); // console.log($(this).select()); console.log($(this).select().prop('checked')); var item = $("input[type=radio]:checked").val(); console.log(item); // 获取select被选中项的文本 var item2 = $("select option[selected]").text(); console.log(item2); }); $('select').change(function () { console.log($(this).val()); //1.获取选中项的值 console.log($('select')); // 2.获取选中项的文本 console.log($("select option:selected").text()); // 或者 console.log($("select").find("option:selected").text()); // 3.获取选中项的索引 console.log($("select").get(0).selectedIndex); }); // 设置值：两种方式设置值 $("select option").get(1).selected = true; $("select").get(0).selectedIndex = 2; }); </script> </body> </html>

DOM属性操作

插入操作

父子之间

父元素.append(子元素)

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

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

子元素.appendTo(父元素)

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

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

父元素.prepend(子元素)；

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

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

子元素.prependTo(父元素)；

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

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

兄弟之间

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

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

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

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

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

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

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

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

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

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

替换操作

$(selector).replaceWith(content);

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

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

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

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

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

删除操作

$(selector).remove();

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

$('ul').remove();

$(selector).detach();

删除节点后，事件会保留

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

$(selector).empty();

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

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

jQuery的位置信息

宽度和高度

获取宽度

.width()

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

设置宽度

.width( value )

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

获取高度

.height()

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

设置高度

.height( value )

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

内部宽内部高

获取内部宽

.innerWidth()

为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。 ps:这个方法不适用于`window` 和 `document`对象，对于这些对象可以使用`.width()`代替。

设置内部宽

.innerWidth(value);

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

获取内部高

.innerHeight();

为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。 ps:这个方法不适用于`window` 和 `document`对象，对于这些对象可以使用`.height()`代替。

设置内部宽

.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）

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

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

设置外部高

.outerHeight( value )

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

偏移

获取偏移

.offset()

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

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

设置偏移

.offset( coordinates )

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

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

滚动距离

水平方向获取

.scrollLeft()

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

水平方向设置

.scrollLeft( value )

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

垂直方向获取

.scrollTop()

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

垂直方向设置

.scrollLeft( value )

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

事件流

事件

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

事件流的定义

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

事件流的三个阶段

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

分支主题

解决单双击的冲突问题

//定义setTimeout执行方法 var time = null; $('div').click(function () { // 取消上次延时未执行的方法 clearTimeout(time); //执行延时 time = setTimeout(function(){ //do function在此处写单击事件要执行的代码 },300); }); $('div').dblclick(functin () { // 取消上次延时未执行的方法 clearTimeout(time); //双击事件的执行代码 });

事件委托

原理

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

作用

1.性能要好

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

事件源

跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景

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

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

jQuery的ajax

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

作用

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

jQuery的load()方法

$("selector").load(url,data,callback);

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

$('#btn').click(function(){ //只传一个url，导入的index.html文件含有多个传递参数，类似于：index/html?name='张三' $('#new-projects').load('./index.html',{"name":'张三',"age":12}); })

//加载文件之后，会有个回调函数，表示加载成功的函数 $('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){ });

jquery的getJSON方法

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

$.getJSON(url,[data],[callback])

参数解释

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

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

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

$.getJSON("./data/getJSON.json", function (data) { var str = "";//初始化保存内容变量 $.each(data, function(index,ele) { $('ul').append("<li>"+ele.name+"</li>") }); })

jquery的$.get()方法

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

$.get(URL,callback);

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

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

$.get('./data/getJSON.json',function(data,status){ console.log(status); //success 200状态码 ok的意思 })

jquery的post()方法

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

$.post(URL,data,callback);

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

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

$.post('/index',{name:'张三'},function(data,status){ console.log(status); })

jquery的$.ajax()方法

$.ajax({ url:'http://localhost:8080/course', type:'get', dataType:'json', success:function (data) { console.log(data.name); // $('body').html(data); $('.box').text(data.name); },error:function (err) { console.log(err); } })

参数

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将不会从浏览器缓存中加载请求信息。

6.data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2

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

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

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

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

json：返回JSON数据。

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

text：返回纯文本字符串。

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

9.complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

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

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

(2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等

11.error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

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

13.dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

14.dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

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。

21.scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用

分支主题