web前端知识点总结

最新推荐文章于 2022-10-26 20:08:41 发布

weixin_45057705

最新推荐文章于 2022-10-26 20:08:41 发布

阅读量911

点赞数 1

分类专栏：前端文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_45057705/article/details/115108550

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Axure

下载元件库网址 https://www.axure.com.cn/5216/

二、vscode

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGOUFkJO-1616458490622)(file:///C:\Users\asus\Documents\Tencent Files\1264657821\Image\Group2\A6\NS\A6NSAXZHIH7N]NOIB21UN$L.png)]

html:5 或者！出现相应头部结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8ScSYqF-1616458490628)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\1614654069426.png)]

点此进行预览

三、html（结构）

超文本标记语言，是一种用于创建网页的标准标记语言

1、基本语法

三、 HTML基本语法

注释 <!--------------!>

常规标记（双标记）（标签标记元素）

<标签属性=“属性值” 属性=“属性值属性值”></标签>

空标记（单标记）

<标签属性=“属性值” 属性=“属性值”/>

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭，用“/”代替。

5.一个属性可以有多个属性值，多个属性值之间用空格隔开，不分先后顺序。

代码解释

//换行

// 下划线

class(.） id(#) //标签
border-radius：50% // 圆角效果
calss=“div1 div2” //属性值与属性值之间用空格隔开
//倾斜行内元素
//加粗行内元素（行内元素即不能换行）
//不能设置宽高，由字体大小长度决定只能左右margin和padding ,行内元素
display :inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

target="_blank" //在新窗口打开 _self //当前窗口打开

2、超链接的应用

语法：

链接文本/图片

属性：target 页面打开方式 //a是行内元素
属性值：_blank 新窗口打开； _self 当前窗口打开

新页面打开
 链接空链接

拓展：

定义书签：第一处
我在这^_
邮箱跳转：1342802646@qq.com
文件下载：最好是压缩包；下载飞秋

3、图片

alt 图片没了用文本替换 title鼠标悬停绝对路径相对路径

当前文件所处的文件夹与目标文件在同一目录下（…/目标文件文件名+扩展名）

当前文件与目标文件所处的文件夹在同一目录下（文件夹名/目标文件全称+扩展名）

插入图片

注:所要插入的的图片必须放在站点下

路径：绝对路径、相对路径；

绝对路径：不需要参照物，放哪里都能找到，可以跨盘符（本地的图片不可跨电脑）；—本地，网络
相对路径：当前文件为参照物，从当前文件出发去寻找目标文件，不可跨盘符；

*相对路径的写法：

1)当当前文件与目标文件在同一目录下，直接书写目标文件（文件名+扩展名）；
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
…/目标文件文件名+扩展名；
…/…/ 出两层的情况

title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的

alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，
它会直接输出在原本加载图片的地方。

width 图片宽度
height 图片高度

为了保证图片不发生变形，width和height最好只写一个；

img是inline元素，但是他同时也是replace元素，他有着特殊的表现：

\1. 可以设置width/height;
\2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置
\3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是里面包含的
\4. 所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素

Eric Meyer曾经很详细的解释过替换元素的概念，请参考他的CSS权威指南

4、表格

无序列表ul 有序ol 自定义dl list-style: none;去掉前面的符号

8）列表(ul,ol,dl)
HTML中有三种列表，分别是：无序列表，有序列表，自定义列表
*无序列表
无序列表组成：

．．．．．．

属性 type=“square(实心方块)/circle（空心圆）/disc（实心圆）”
*有序列表
有序列表组成：

．．．．．．

属性 type=“1/a/A/i/I” start=“数字”

*自定义列表

名词

解释

．．．．．．

一个dl里面只能有一个dt，可以有多个dd；
多应用于图文混排；

1、无序列表ul

属性type square(实心方块) disc(实心圆)

花生
花生
- 袋装
- 散装
花生

2、有序ol

属性type=“1/a/A/i/I” start = “开始数字” ； start后面的值只为数字

3、自定义dl

   <dt>名词</dt>  （一个<dl>只能有一个dt）
   <dd></dd>     （一个<dl>可以多个dd）

代表行

代表列

cellspacing 单元格与单元格之间间距 
cellpadding 单元格与文字之间距离

algin 对齐方式

bgcolor 背景颜色

1280元颜色设置为红色

rowspan=“2” 合并行

colspan=“2” 合并列

表格的基本结构：

：定义表格定义表格中的表头内容定义表格对的行

...
定义表格对的列 .....

属性：

width: 宽度
height: 高度
bgcolor: 背景颜色
border: 边框的宽度

align: 表格内容水平方向调整
left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进行伸展

valign: 表格内容竖直方向调整
top 对内容进行上对齐
middle（默认）对内容进行居中对齐
bottom 对内容进行下对齐
baseline 与基线对齐

如果要实现跨行和跨列需要设置以下两个属性：
colspan( x ) 跨x列
rowspan( y ) 跨y行

4、属性定义及使用说明

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

padding:10px 5px 15px 20px;
- 上填充是 10px
- 右填充是 5px
- 下填充是 15px
- 左填充是 20px
padding:10px 5px 15px;
- 上填充是 10px
- 右填充和左填充是 5px
- 下填充是 15px
padding:10px 5px;
- 上填充和下填充是 10px
- 右填充和左填充是 5px
padding:10px;
- 所有四个填充都是 10px

11）数据表格的作用及组成
作用：显示数据

注：1个tr表示一行;一个td表示一列(一个单元格)
*数据表格的相关属性

1）width=“表格的宽度”
2）height=“表格的高度”
3）border=“表格的边框”
4）bgcolor=“表格的背景色”
5）cellspacing=“单元格与单元格之间的间距”
6）cellpadding=“单元格与内容之间的间距”
7）水平对齐方式：align=“left/center/right”;（写在td身上）

5、表单

账号： // 使可以选中后面的

// text文本框

密码：

// password 密码*
性别：
男
女

// radio 单选框
爱好：
学习
骑车
<input type=“checkbox” name=“hobby” id="hobby"checked/> 打球
学习

// checkbox复选框 checked默认选中 disabled默认选不了

18岁以下 18-28岁 28-38岁 38岁以上

//下拉列表 selected 被默认选中

//文本框

邮箱： //可以检验邮箱格式

网址
提交
//可以检验网址格式

最大数最小数

//日

//月

//周

//时间

//搜索

表单
作用：收录用户信息
form 表单框

1）文本框

2)密码框

3）单选框/单选按钮
男
女(默认选中)
4）复选框/复选按钮
游泳
敲代码 (禁用)
当属性值与属性名相同时，属性值可以省略不写
5）按钮

6）下拉菜单

7）多行文本域

此处为红色 //改变相应颜色

6、html5拓展内容

//定义一个页面或者区域头部

//用在文档中插入图片

//插入音频

//controls 属性是一个布尔属性。如果属性存在，它指定音频控件的显示方式。
音视频控件包括

您的浏览器不支持 audio 元素。//插入音频 //插入视频 //内联标签

一个画布在网页中是一个矩形框，通过元素来绘制.

注意: 默认情况下元素没有边框和内容。

简单实例如下:

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

**提示:**你可以在HTML页面中使用多个元素.

使用 style 属性来添加边框:

首先，找到元素:

var c=document.getElementById(“myCanvas”);

然后，创建 context 对象：

var ctx=c.getContext(“2d”);

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

四、css（表现、层叠样式表）

注释：单行 /注释内容/

实例化三属性：width height background

1、文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

.align-center{
margin:0 auto; /* 居中这个是必须的，，其它的属性非必须 /
width:500px; / 给个宽度顶到浏览器的两边就看不出居中效果了 /
background:red; / 背景色 /
text-align:center; / 文字等内容居中 */
}

实例化三属性： width height background

样式表三种：内部、外部、内联（优先级排序：内联>内部>外部）后写的覆盖前面写的

2、多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 { color:red; text-align:left; font-size:8pt; }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 { text-align:right; font-size:20pt; }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red; text-align:right; font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

3、选择符

我是类型选择符

我是id选择符

我是class选择符

//可以放两个class选择器

font-style:italic; //通配符控制所有选择器

}

#div1,#p1,#p2{

height: 400px;

width: 400px;

background: darkblue;

} //群组选择符

你好

.hello p{

}

.hello h1{

} //包含选择符

div.div1{

} //指定选择符 (单独指定一个标签)

a{background: darkgreen;}

a:hover{ background: turquoise;

} //伪类选择符（在原基础上进行变换）

权重

类型选择符权重：0001

class : 0010

id :0100

内联样式权重：1000

伪类选择符权重：0010 加上***！important*** 变成最大的

padding:0 4 个内边距

padding:10px 5px 15px 20px;

上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

padding:10px 5px 15px;

上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px

padding:10px 5px;

上内边距和下内边距是 10px
右内边距和左内边距是 5px

padding:10px;

所有 4 个内边距都是 10px

margin:0 外边距

margin:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px
margin:10px;
- 所有四个边距都是 10px

文本大小 font-size:value

谷歌浏览器识别的最小字体为 12px

4、文字

3、文本字体：{font-family:“中文字体1”，字体2，字体3；}
拓展：
衬线体------有额外修饰的字体–宋体
非衬线体------没有额外修饰的字体–黑体，微软雅黑

说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字
体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

当字体是中文字体时，需加双引号；

当英文字体中有空格时，需加双引号如（“Times New Roman”）

当英文字体只有一个单词组成是不加双引号；如：（Arial）；

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

系统字体所在位置：C:\Windows\Fonts

font-weight:bold; //加粗

4、加粗：{font-weight:bolder(更粗)、lighter（更细）/bold（加粗）/normal（常规）/100—900;}

说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的
字体变形，

一般
500常规字体
600-900加粗字体
100-400变细（常规）

bold 加粗
100 变细

h1-h6{font-weight:normal}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0yBU2Ube-1616458490631)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\1614839878396.png)]

//引入字体

其他的也不多废话了直接上代码：

<! 这里的图片路径我放在网页的当前目录> ————————————————

5、CSS核心属性

A、关于文本的css声明

1、文本大小：{font-size:value;}

例：div{font-size：12px；}

div{font-size：14px；}

说明：

1）属性值为数值时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，pt是绝对单位，在dpi是96的情况下，9pt=12px,12pt=16px。
3）单位还可以是em，1em叫一个字节,默认情况下，1em=16px,0.75em=12px;

px
px是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。

em
em：即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。，一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。
在一个页面上给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

pt
PT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。

4)使用关键字(不是绝对相等的)
xx-small = 9px
x-small = 11px
small = 13px
medium = 16px
large = 19px
x-large = 23px
xx-large = 27px

以 medium 作为基础参照，
xx-small：相当于medium 3/5 ，
x-small: 相当于medium 3/4 (h6)，
small: 相当于medium 8/9 (h5)，
medium: 相当于medium 1 (h4)，
large: 相当于medium 6/5 (h3)，
x-large: 相当于medium 3/2 (h2)，
xx-large: 相当于medium 2/1 (h1)

谷歌浏览器识别最小字体为12px;

当字体是中文字体时，需加双引号；

当英文字体中有空格时，需加双引号如（“Times New Roman”）

当英文字体只有一个单词组成是不加双引号；如：（Arial）；

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

系统字体所在位置：C:\Windows\Fonts

4、加粗：{font-weight:bolder(更粗)、lighter（更细）/bold（加粗）/normal（常规）/100—900;}

说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的
字体变形，

一般
500常规字体
600-900加粗字体
100-400变细（常规）

bold 加粗
100 变细

h1-h6{font-weight:normal}

5、倾斜：font-style：italic(倾斜)/normal（常规显示）;

i,em{ font-style:normal;}

6、水平对齐方式{text-align:left/right/center/justify(两端对齐，存在一定的兼容性问题);}

7、垂直对齐方式{vertical-align:top/bottom/middle;}

vertical-align对单元格显示方式：table-cell 的元素才会起作用.

要实现上下垂直居中对齐，可以采用如下样式

display（元素类型的转换）:table-cell; /*按照单元格的样式显示元素*/

vertical-align:middle; top和bottom  /*垂直居中对齐*/

//display 和vertical-align一起用才会起作用

10、文字属性简写：font:12px（字号）/100px（行高）

font属性的简写：

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-style font-weight font-size / line-height font-family

(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时

才起作用,你没有设定font-weight , font-style,他们会使用缺省值（默认值）。

11、字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和字母）

12、词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距）

// 文字下划线

text-decoration: none/underline/overline/line-through;

去掉下划线下划线上划线删除线

p
  {
     text-indent:50px;   2em  //将段落的第一行缩进 50 像素：  2个字符
     line-height：50px;            //行高
  }


p{
    width: 400px;
    height: 400px;
    background-color: chartreuse;
    line-height: 400px; 
    /* 1)当单行文本的行高( line-height)等于容器高时，可实现单行文本在容器中垂直方向居中对齐
    2）当单行文本的行高小于容器高时，可实现单行文本在容器中垂直方向居中对齐以上任意位置的定位
    3）当单行文本的行高大于容器高时，可实现单行文本在容器中垂直方向居中对齐以下任意位置的定位  */
}

line-height=height             //可实现单行文本在容器中垂直方向居中对齐

6、伪类选择器(伪类选择符)

语法：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态; */

7、对于列表的css

list-style: none //没有列表符号

一）、list-style 列表符号
list-style:none; 去掉列表符号
ul{list-style-type:square/circle/disc/none;}
ul{list-style-position:inside/outside;} li的里和外 li和文字一体（inside） li和文字不一体（outside）
li{ list-style-image:url(images/list.jpg);}

8、关于背景图片

）、关于背景的css声明
1、背景颜色
语法：选择符{background-color:颜色值;}
2、背景图片的设置
语法：background-image：url(背景图片的路径及全称)；
说明：
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构，以内容的形式呈递。
背景图：属于网页的表现，主要用来装饰页面。
3、背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满容器；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
4、背景图片平铺属性
语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
no-repeat:不平铺 repeat：平铺（默认值）repeat-x：横向平铺 repeat-y ：纵向平铺
5、背景图片的位置
语法：选择符{background-position:水平方向垂直方向;}
水平方向上的对齐方式（left/center/right）或具体数值
垂直方向上的对齐方式(top/center/bottom)或具体数值
用英文关键字时，方向可以对调；top right。只要有数字就不能对调。
只写一个值，第二个默认是center。
6、背景属性的缩写语法：background:属性值1 属性值2 属性值3；
背景缩写：background:#f60 url（背景图片的路径及全称） no-repeat center top；
注意：背景定位的两个值要挨着，并且顺序不能颠倒。

在css标签内**，使用background-size调整背景图片的大小**，第一个参数值是宽度，第二个参数值是高度，例如，这时设置背景图片的高宽为原来一半，即50%。

background-size:100% 100% //铺满屏幕或者 background-size:cover

background-attachment: fixed; //使背景固定不随着鼠标移动而滑动

img {

width: 100%;

height: 100%;

} //使图片充满盒子

9、浮动

float : left / rigth /none;

一直向左或向右，直到遇到父盒子边缘或者浮动盒子的边缘为止

clear:both;清除浮动（放在不想被浮动影响的盒子身上）

10、内边距和外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-clVCjwz2-1616458490636)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\1615164522684.png)]

四）盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含：外边距、边框、内边距、内容区，这就是盒模型。
margin border padding content(width height)

1） padding的使用方法
内边距：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。
也称补白、填充。
用法：
1、用来调整内容在容器中的位置关系
2、用来调整子元素在父元素中的位置关系。
3、padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding值。（width height-----容积）（子元素不变，父元素变动）
4、支持背景
属性值的4种方式：
四值法：上右下左 {padding:10px 20px 30px 40px;}
三值法：上右左下 {padding:10px 20px 30px ;}
二值法：上下右左 {padding:10px 20px ;}
一值法：四个方向 padding:2px;/定义元素四周填充为2px/
说明：可单独设置一方向填充（内边距），
如：padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

//做之前先对浏览器所有边距清0

* {

margin: 0px;

padding: 0px;

}

3） margin的使用方法
边界：margin,在元素外边的空白区域，被称为外边距。

属性值的4种方式：
四个值：上右下左
三个值：上左右下
二个值：上下左右
一个值：四个方向

margin:0 auto; /*定义元素上、下边界为0px，在浏览器中横向居中。

说明：可单独设置单一方向边界，
如：
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

总结:margin一般在平级盒子，padding一般在嵌套盒子之间

2） border的使用方法 border:3px solid red; (1px solid #ccc)

边框border:线型（solid/dashed/dotted/double）粗细（数值+单位）颜色;

solid:实线，dashed:线状虚线，dotted:点状虚线，double:双线(至少3px)，

border按功能分：
边框大小 border-width;
边框类型 border-style;
边框颜色 border-color;

border按方向分：
右边框 border-right；
左边框 border-left；
上边框 border-top；
下边框 border-bottom:

继承：子盒子继承父盒子的字体各种属性，但是父盒子背景大小不继承

11、定位（相对、绝对、固定）

position 定位属性
一、语法：position：static /relative(相对)/absolute/fixed
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则（标准流）；
2、relative ：相对定位，将依据right，top，left，bottom（相对自己定位）等属性在正常文档流中偏移位置；
3、absolute：绝对定位，将对象从文档流中脱离出来，使用left/right/top/bottom等属性相对其相对定位（绝对定位）的父盒子进行定位；如果不存在这样的父对象，则依据body对象；
4、fixed：固定定位，相对窗口定位；

各个定位的特点

相对定位——脱标占位，相对自身（标准流里的位置）定位，跟父盒子毫无关系

绝对定位——脱标不占位，
如果不写坐标，脱标留原位（标准流里的位置）
子绝父相，
如果父盒子没有相对定位，那么就相对body定位

固定定位——相对窗口定位（如：返回顶部，定位在上方的导航）

display:block; //转化成块

z-index

12、定位元素层叠属性：

z-index : auto |
表示一个元素在叠加顺序上的上下立体关系。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
说明：
1）z-index值较大的元素将叠加在值小的元素之上，对于未指定此属性的定位元素，z-index值为正数的对象会在其之上，而z-index值为负数的对象在其之下。
2）这个属性适用于定位元素，用来确定定位元素在垂直于显示屏方向的层叠顺序，也就是说如果元素没有定位，设置这个属性是无效的。
3）如果两个元素z-index相同，那么按文档流顺序，后面的覆盖前面的。
4）如果两个元素没有设置z-index，一个定位一个没定位，那么定位的覆盖不定位的。
5）如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父盒子上方，即使子元素的z-index比父盒子的小，也会在父盒子上方，如果父元素的z-index失效，那么子元素生效。

13、关于溢出:

1、溢出属性（容器的）
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible: 默认值，内容不会被修剪，会出现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的;
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。

/* 在文档流中，
父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高。
但是当子元素设置浮动之后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 */

解决方法在父元素中加入 overflow:hidden;

/* 文本溢出：text-overflow:clip/ellipsis
clip:不显示省略号（…），而是简单的裁切
ellipsis:当对象内文本溢出时，显示省略标记

    text-overflow属性仅是...，当文本溢出时是否显示省略标记，
    并不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需定义

    1、容器宽度:width.value;
    2、强制文本在一行内显示：white-space:nowrap;
    3、溢出内容为隐藏:overflow:hidden;
    4、溢出文本显示省略号:text-overflow:ellipsis */

opacity: .5; //透明度指定不透明度。从0.0（完全透明）到1.0（完全不透明）
filter: alpha(opacity=50); // ie浏览器兼容性

大小盒子一起向下解决方法在父元素中加入 overflow:hidden;

14、结构伪类 IE9+

E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E:root 选择匹配元素E所在文档的根元素（多只html）
E F:nth-child(n) 选择父元素E的第n个子元素F
E F:nth-last-child(n) 选择元素E的倒数第n个元素F
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type 选择父元素内具有指定类型的第1个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E:only-child 选择父元素内只包含一个子元素，且匹配为E元素
E:only-of-type 选择父元素只包含一个同类型的子元素，且匹配为E元素
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

：root 选择匹配元素E所在文档的根元素

nth-child用在父子关系

nth-of-type(n)type指同级关系（只去找同级的关系）

15、/* 层级选择符

1、后代选择器（E F）包含选择器
2、子代选择器（E > F）其中E为父元素，F为子元素，一定是父子元素
3、相邻兄弟选择器（E+F） E和F是兄弟是同辈，F在E后面，并且相邻
4、通用选择器（E~F） E后面所有兄弟F */

用到啥标签就 padding margin0

图片display block

li list-style

body文字三属性大小文字颜色

a text decoration none

公共部分

写好注释

16、display用法

1.inline 行内元素元素会在一行内显示，超出屏幕宽度自动换行，
不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
2.block 块级元素会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，
可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
3、inline-block 行内块元素与行内元素一样可以再一行内显示，而且可以设置宽高，
可以设置margin和padding。
示例元素：input,button,img
4.none 此元素不会被显示，

line和line-block 属性都可在一行显示

box-shadow: 2px 2px 0 blue //阴影效果右、下、模糊度、颜色

17、渐变色彩

background: linear-gradient();

/* 从上到下，蓝色渐变到红色 */ *

linear-gradient(blue, red); /

渐变轴为45度，从蓝色渐变到红色 */ *

linear-gradient(45deg, blue, red); /

从右下到左上、从蓝色渐变到红色 /

linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

一、渐变 IE10+

线性渐变linear-gradient
background-image：linear-gradient（方向，起始颜色，结束颜色）

处理兼容：
background-image：-webkit-linear-gradient（to top，red，yellow）
background-image：-moz-linear-gradient（to top，red，yellow）
background-image：-o-linear-gradient（to top，red，yellow）
background-image：-ms-linear-gradient（to top，red，yellow）
background-image：linear-gradient（to top，red，yellow）

方向可以使用角度（30deg）也可以使用关键字（to right等）；

多色线性渐变，只需在后面添加更多的颜色即可；
background-image：linear-gradient（to top，red，yellow，blue，green，orange）

自定义线性渐变
background-image：linear-gradient(
to top,
rgba(255,206,0,.5) 0%,
rgba(255,255,0,.4) 10%,
rgba(255,104,0,.6) 15%,
rgba(255,0,255,.5) 20%,
rgba(255,0,206,.8) 40%,
rgba(255,0,200,.5) 50%,
rgba(255,0,222,.9) 60%,
rgba(255,123,0,.2) 80%,
rgba(255,108,0,.5) 100%
)

重复线性渐变
background-image：repeating-linear-gradient(
to top,
rgba(255,206,0,.5) 40px,
rgba(255,255,0,.4) 80px
)

径向渐变radial-gradient
background-image：radial-gradient（形状 at 圆心坐标，颜色）

background-image:radial-gradient(主要半径次要半径 at 水平垂直,red,yellow)
background-image:radial-gradient(50px 100px at 200px 250px,red,yellow)

background-image:radial-gradient(主次半径相等就是圆 at 水平垂直,red,yellow)
background-image:radial-gradient(circle at right bottom,red,yellow)

background-image:radial-gradient(主次半径不相等是椭圆 at 水平垂直,red,yellow)
background-image:radial-gradient(ellipse at top,red,yellow)

background-image:radial-gradient(圆心与中心重合,red,yellow)
background-image:radial-gradient(circle,red,yellow)

重复径向渐变
background-image：repeating-radial-gradient(
to top,
rgba(255,206,0,.5) 40px,
rgba(255,255,0,.4) 80px
)

关于浏览器前缀：

现在的规范还不是最终版本，在执行中有一些漏洞，因此执行这些功能时，使用供应商的前缀提供数值，并且使用无前缀声明来提供每个属性的永久版本，当规范成为最终版本且经过完善后，浏览器前缀将会被取消。

firefox(gecko) -moz-
chrome(webkit) -webkit-
IE(trident) -ms-
opera(presto) -o-

18、二、过渡 IE10+

//只有宽高和盒子里的背景图片能设置过度效果主要在子类里写不在父类里写的

transition:all 2s linear 1s;

transition：过渡属性过渡所需时间过渡动画函数过渡延迟时间；
transition：property duration timing-function delay;

各个属性可以分开写，一次可以过渡多个属性：
-webkit-transition-property:background,width,height;
-webkit-transition-duration:1s,1s,1s;
-webkit-transition-timing-function:linear,linear,linear;
-webkit-transition-delay:1s,0s,2s;

-moz-transition-property:background,width,height;
-moz-transition-duration:1s,1s,1s;
-moz-transition-timing-function:linear,linear,linear;
-moz-transition-delay:1s,0s,2s;

-ms-transition-property:background,width,height;
-ms-transition-duration:1s,1s,1s;
-ms-transition-timing-function:linear,linear,linear;
-ms-transition-delay:1s,0s,2s;

-o-transition-property:background,width,height;
-o-transition-duration:1s,1s,1s;
-o-transition-timing-function:linear,linear,linear;
-o-transition-delay:1s,0s,2s;

transition-property:background,width,height;
transition-duration:1s,1s,1s;
transition-timing-function:linear,linear,linear;
transition-delay:1s,0s,2s;

过渡动画函数timing-function
ease 先快后慢，逐渐变慢
linear 匀速
ease-in 速度越来越快，称为渐显效果
ease-out 速度越来越慢，称为渐隐效果
ease-in-out 先加速再减速，称为渐显渐隐效果
cubic-bezier(.61,.17,.92,.1) 三次贝塞尔曲线

19、四）3D变形

3D位移
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);

3D旋转
transform：rotate3d（x,y,z,a）;

transform：rotate3d（1,0,0,45deg）;
transform：rotateX（45deg）;

transform：rotate3d（0,1,0,45deg）;
transform：rotateY（45deg）;

transform：rotate3d（0,0,1,45deg）;
transform：rotateZ（45deg）;

20、动画

四、动画

**、写页面的注意事项：

任何线上案例都需要在书写css之前做3步准备工作；（作用：这3步准备工作可以让你在后期的代码当中省很多时间）

1.清空默认的边距和列表样式；

2.设置正文的全局样式----指的就是给body设置文字三属性；

3.设置超链接的默认样式；

总结：这是写任何网站都必须要设置的3步工作；

/=reset部分===/
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
p,
span,
img,
input,
dl,
dd,
dt {
padding: 0;
margin: 0;
}

ul,
ol {
list-style: none;
}

img {
display: block;
border: 0;
}

input {
outline: none;
}

body {
font-size: 12px;
color: #666;
font-family: “微软雅黑”;
background: url(…/images/bg.jpg) no-repeat #f3f3f3 top;
}

a {
text-decoration: none;
}

a:hover {
color: #53cac3;
}

/=public部分===/
.w {
width: 1000px;
margin: 0 auto;
}

.l {
float: left;
}

.r {
float: right;
}

.clear_both {
clear: both;
}

。

五、js（行为）

window.alert(“hellow”); //弹出警告框

document.write("

hello

");//将内容写到html文档中

document.getElementById(“hello”).innerHTML = “helloasdasd”; //写入到html元素

console.log(“你真帅”); //写入到浏览器控制台

注释 //

1、命名规则

变量的命名不能以数字开头，

var message = “helloWorld”;

console.log(message);

var name = “王蒙”;

var age = “18”;

console.log(name + “今年” + age);

2、数据类型

基本类型（undefine,null,boolean,number,string）

/*值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。/
/
1.undefined
取值：undefined
含义：当声明了变量，未对其初始化的时候会被赋值
注意：包含了undefined值的变量与尚未定义的变量还是不一样的
*/

1、undefine定义一个变量，不赋值，即undefine

var aa;

console.log(aa);

2、null 表示一个空对象指针，因此如果定义了一个变量，想让这个变量将来用来保存对象，最好初始化为null

var bb = null;

console.log(bb);

3、布尔类型取值 true 或 false

4、字符串

var hello = " hello zhengrong"

console.log(hello);

var helloh = ‘hello wanmeng’;

console.log(helloh);

var helloa = ’ “hello wanmeng” '; //单引号可以放双引号

console.log(helloa);

var hellob = "‘hello wanmeng’ "; //双引号可以放单引号

console.log(hellob);

var message = " “asd” "; //双引号放单引号需要转义符

console.log(message);

var message1 = ’ ‘asd’ ';

console.log(message1); //单引号放双引号也需要转义符

5、number类型

取值：整数、浮点数、NaN、infinity

含义：代表一个有意义或者无意义的数字

var a1 = 100;

console.log(a1);

var a2 = 1.1;

console.log(a2);

var a3 = 100e6;

console.log(a3);

NaN是数字类型，但不是一个数字

var x=Number(“abcd”);

console.log(x) NaN

console.log(Number.isNaN(x)); true

任何两个NaN都是不相同的，所以"NaN==NaN"返回false

var x=Number(‘abcd’);

var y=Number(‘abcd’);

console.log(x==y); //false

Number()数据类型转换
Number()
如果是 Boolean 值, true和false将分别被转换为1和0。如果是数字值，只是简单的传入和返回。
如果是null值，返回0。
如果是undefined，返回NaN。如果是字符串，遵循下列规则:
如果字符串中只包含数字（包括前面带正号或负号的情况)，则将其转换为十进制数值，即"1"会变成1，“123"会变成123，而"011"会变成11 (注意:前导的零被忽略了) ﹔
如果字符串中包含有效的浮点格式，如"1.1”，则将其转换为对应的浮点数值(同样，也会忽略前导零);
如果字符串中包含有效的十六进制格式，例如"Oxf"，则将其转换为相同大小的十进制整数值;
如果字符串是空的(不包含任何字符)，则将其转换为0;
如果亨符串中包含除上述格式之外的字符，则将其转换为NaN。

/*产生：将其他类型向Number类型转换时
Infinity：
含义：无穷大
判断方法：
Number.isFinite() === Infinity
产生：超出 1.7976931348623157E+103088 的数值即为Infinity，
小于 -1.7976931348623157E+103088 的数值为无穷小。
Infinity 有正负 */

infinity 无穷大

var y = 46;

console.log(Number.isFinite(y)); //有穷返回true

console.log(Number.isFinite(Infinity)); //无穷返回false

console.log(Number.isFinite(NaN)); // false

console.log(Number.isFinite(“0”)); //字符串返回false

只有数值类型，且是有穷的（finite）返回true,其他全返回false

var a=“2”;

var b=1;

a+b=“21” 转化为字符串

引用数据类型

var obj = {}

obj.name = “asd”;

obj.age = 18;

console.log(obj);

var person = {}

person.sex = “男”;

person.age = 18;

person.sex = “女”; //下面覆盖上面

console.log(person);

console.log(person.sex); //取数据

//通过构造函数创建对象

var person_1 = new Object();

person_1[‘name’] = “longlong”;

person_1[‘age’] = 18;

console.log(person_1);

console.log(person_1[‘name’]); //取数据

//typeof 判断数据类型

console.log(typeof “joj”); //string

console.log(typeof 3.14);

console.log(typeof NaN); //number

console.log(typeof false); //boolean

console.log(typeof [1, 2, 2, 4]); //object 数组

console.log(typeof { name: ‘asd’ }); //object 对象

console.log(typeof new data()); //object

console.log(typeof function () { }); //function

console.log(typeof null); //object

NaN、Array、Date、null 都为object

未定义为undefined

//constructor

console.log(“joj”.constructor); //string

console.log(3.14.constructor); //number

console.log(NaN.constructor); //number

console.log(false.constructor); //boolean

console.log([1, 2, 2, 4].constructor); //array

console.log({ name: ‘asd’ }.constructor); //object

console.log(new Date().constructor); //date

console.log(function () { }.constructor); //function

3、数组

//构造函数创建数组

var arr = new Array(“张三”, “李四”, “王二”)

console.log(arr);

var arr1 = new Array(5) //可直接设置数组属性

console.log(arr1);

//字面量创建数组

var arr3 = [“ad”, “asd”, “asdasd”]

console.log(arr3);

//push（）返回数组中元素的个数,向尾部增加元素，括号有多少加多少

var a = [1, 2, 3, 4, 5];

var b = a.push(6, 7, 8, 9);

console.log(a);

//unshif() 返回数组中元素的个数,向尾部增加元素，括号有多少加多少

var a = [1, 2, 3, 4, 5];

var b = a.unshift(6, 7, 8, 9);

console.log(a);

var a = [1, 2, 3, 4, 5];

var b = a.pop();

console.log(a);

//shift从数组的头部删除一个元素，返回删除后的元素，不接受参数

var a = [1, 2, 3, 4, 5];

var b = a.shift();

console.log(a);

//splice().把原数截断，一个参数，从输入的下标到数组结束，两个参数第一个输入下标，第一个截取长度

var a = [1, 2, 3, 4, 5];

var b = a.splice(2);

console.log(a); //1，2

console.log(b); //3，4，5

var a = [1, 2, 3, 4, 5]; b

var b = a.splice(2, 1); //包括自己

console.log(b); //3

console.log(a); //1，2，4，5

//添加，第一个是起始位置，第二个为长度，第三个到后面是数，

var a = [1, 2, 3, 4, 5];

var b = a.splice(2, 1, 3, 6, 7); //将第三个位置包括（2），换成3，6，7

console.log(a); //1，2，3，6，7，4，5

var a = [1, 2, 3, 4, 5];

var b = a.splice(2, 0, 3, 6, 7); //将第三个位置不包括（2），以前加上3，6，7

console.log(a); //1，2，3，6，7，3，4，5

//是数组反转,会改变原来的数组，不会创建新的数组

var a = [1, 2, 3, 4, 5];

var b = a.reverse();

console.log(b); //【5，4，3，2，1】

console.log(a); //【5，4，3，2，1】

//sort()无参数默认从小到大排序，判断方法，不会创建新的数组，直接在原数组上面改

var x = [1, 5, 8, 9, 7];

var y = x.sort();

console.log(x);

console.log(y);

x.sort(function (a, b) {

return a < b ? 1 : -1 //>号小到大，<从大到小

})

console.log(x);

join() 方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。//不改变原数组

使用不同的分隔符：

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
var energy = fruits.join(" and ");

energy 结果输出：

Banana and Orange and Apple and Mango

4、函数

//函数 function

// 当调用函数时候，会执行函数被的代码

function myFunction() {

var x = 5;

return x;//通过return关键字，为函数指定返回指

}

var myVar = myFunction();

console.log(myVar);

5、类型转换

//数字类型转换为字符串

var i = 10;

var s = i.toString();

console.log(typeof s);

var a = 10 + 3;

var b = a.toString();

console.log(typeof b);

//布尔转字符串

var a = true;

var b = a.toString();

console.log(typeof b);

console.log(b);

//将布尔值转换为数字

var test1 = new Boolean(false);

document.write(Number(test1) + “
”);

//日期转化为数字

var test3 = new Date();

console.log(test3);

document.write(Number(test3) + “
”);

6、变量的计算

var a = 1;

console.log(a + b); //1aaa

var a = 1;

var b = “30”;

var c = true;

console.log(a + b + c); //130true

var a = 10;

var b = 3;

console.log(a % b); //1

7、变量的比较

1、===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；

2、==：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；

/* 关系运算（返回Boolean型的值）
<、>、<=、>=
1、如果都是数字，就直接比较
2、如果都是字符串，就比较字符编码（ASCII）
3、如果一个是数字，则将另一个转换为数字
4、如果一个是布尔值，则将其转换为数字

    ==、！=、！==、===
    5、如果一个是Boolean，则将Boolean转换为数值
    6、如果一个是字符串，一个是数值，则将字符串转换成数值
    7、null和undefined相等，不向其他值转换
    8、NaN跟任何值都不相等
    
    赋值操作：=； *=； /=;  %=;  +=;  -=;*/
    //1、
    var a=1;
    var b=2;
    console.log(a<b);  //true




    //2、
    var a="a";
    var b="b";
    console.log(a<b);    //true 都是字符 比较阿斯克码




    //3、
    var a=1;
    var b=Number('2');
    console.log(a>b);   //false
    
    //4、
    var a="124";
    var b=Number(false);
    console.log(a<b);   //false  
    
    //5、
    var a="124";
    var b=Number(false);
    console.log(a==b); //false

    //6、
    var a=Number("1");
    var b=123;
    console.log(a!=b);   //true
    
    //7、
    var a=null;
    var b=undefined;  
    console.log(a==b);   //true



    //8、
    var a=NaN;
    var b=NaN;
    console.log(a==b);   //false

8、逻辑运算

/* 逻辑运算
&&与 ||或！否 */

    //&&操作符（逻辑与），操作符两边的值均为true，则返回true，否则返回false
    // console.log(true&&true);  //true
    // console.log(true&&false); //false
    // console.log(false&&false);  //false
    // console.log(false&&true);  //false

    //||操作符（逻辑或），操作符两边的值均为false，则返回false，否则返回true
    // console.log(true||true); //true
    // console.log(true||false);  //true
    // console.log(false||true);  //true
    // console.log(false||false); //false

    //!
    /* 1、如果运算数是true，返回值为false
    2、如果运算数是false，返回值是true
    3、如果运算时是0，返回值是true
    4、如果运算数是非零数值，返回值是false
    5、如果运算数是null，返回值是true
    6、如果运算数是NaN，返回值是true
    7、如果运算数是对象，返回值是false
    8、如果运算数是undefined，返回值是true */

9、字符串对象

//通过[index]获取对应位置的字符，第一个字符的index必须为0

var ss = “hello”;

console.log(ss[4]); // o

var aa = ‘hello’;

console.log(aa.charAt(4)); // o

//通过charCodeAt查找第n个字符的阿斯克吗

var aa = ‘hello’;

console.log(aa.charCodeAt(3)); //l的字符编码108

//index查找，返回第一个匹配字符在原字符串中的索引，从0开始

var ss = “hello”;

console.log(ss.indexof(“h”)); // 0

//lastindexof 从头到尾检索a,看他是否含有字串 “hao”,找不到返回-1

，找到返回"hao"的第一个字符在a中的位置

var a=“ni hao me”

document.write(a.lastindexof(“hao”));

//concat()将一个或多个字符串拼接起来，返回拼接得到新的字符串

var a=“aaa”;

var b=“bbb”;

var c=“ccc”;

console.log(a.concat(b,c)); aaabbbccc

//str.slice(a,b) 字符串截取从a(包含)截取到b(不包含),不改变原有的字符串

var str = “abcdef”;

console.log(str.slice(0, 3));

// substring()字符串截取，只有一个参数，输出a（包括）到结尾的string

var str = “abcdef”;

console.log(str.substring(2));

console.log(str.substring(2, 4)); //(a包含 b不包含)

console.log(str.substring(4, 2)); //（当a>b的情况，系统会自动调整a,b的位置并输出）

console.log(str.substring(1, -1)); // （如果b是负值，直接输出a（不包含）之前的字符串）

// substr(index,length)

var str = “abcdef”;

console.log(str.substr(0, 2)); //从0（包括）开始，截取2个

// trim()会创建一个字符串副本，删除迁至以及后缀的所有空格

var str = " abcdef ";

console.log(str); //有空格

console.log(str.trim()); //无空格

// replace()替换

var str = “abcdef world aa aa aa”;

console.log(str.replace(/world/, “王蒙”)); //换world

console.log(str.replace(/aa/g, “王蒙”)); // 后面加入g(全局)则替换所有匹配换所有的 aa

//不加g ，只换第一个aa

//match()用于原字符串是否匹配给定的字符串或正则表达式，返回一个数组

var str = “abcdef 123456789”;

console.log(str.match(/[0-9]+/g)); //【123456789】

var str = “abcdef 123456789”;

console.log(str.replace(/[0-9]+/g, “王蒙”)); // abcdef 王蒙

//search()返回到匹配的第一个字符串的索引，没有返回-1

var str = “abcdef 123456789”;

console.log(str.search(/[0-9]+/g));

//split()将字符串按照给定的字符切割成数组

var str = “11 22 33 44 55 66”;

console.log(str);

console.log(str.split(" "));

10、函数

function functionName(name, age) {

alert(“姓名:” + name + “年龄：” + age);

}

functionName(“王蒙”, 18); // 姓名:王蒙年龄：18

//函数返回值 return后面代码不再执行

function eat(a, b) {

var c = a + b;

return c;

}

console.log(eat(“泡椒”, “凤爪”));

/* 使用function来声明
    functionName函数名（可选）
    param1、param2参数列表
    
    形参和实参
    形参：定义函数时，规定的参数  （a,b）
    实参：函数调用时，传递的参数   （2,3）
    在函数调用时，实际上是把实参的值复制了一个副本给形参
    函数调用时传递的参数个数，不是必须与函数定义时传递的参数个数一致 */

    // function functionName(param1,param2) {
    //     //函数体
    //     alert("hello world")
    // }
    // functionName(2,3)  //定义函数名

    /* 函数在定义的时候，函数体内的语句是不会被执行的，只有函数在调用的时候
    才会执行函数体

    调用方法functionName函数定义时的名字  param1，param2函数定义时的函数 */
//     function functionName(name,age) {
//         //函数体
//         console.log("姓名:"+ name +":年龄:"+ age );
//     }
//     functionName("xiaoming");  //年龄那里是undefined
//     functionName("xiaoming","18");  //姓名:xiaoming:年龄:18
//     functionName("xiaoming","20","aaa");  //姓名:xiaoming:年龄:age,aaa不显示
//    //函数调用时传递的参数个数，不是必须与函数定义时传递的参数个数一致



    //函数的返回值
    /* 通过return关键字，可以为函数指定返回值
    作用：可以将函数内部的计算或者操作的结果，返回给函数外部
    特别：函数内部执行return后，函数将退出，return之后的所有代码将不再执行
    可以只写return，函数按照返回undefined处理 */
    // function eat(a,b) {
    //     debugger;
    //     var c = a+b;
    //     return c;
    // }
    // var receive = eat(3,6);
    // console.log(receive);

    //创建一个变量
    var a = 10;
    var b = 11;
    function fun() {
        var a = "我是fun函数中的变量a";
        var b = 20;
        d = 50;  //没有使用var关键字，则会设置为全局变量
        console.log("a = "+a);
        function fun2() {
            console.log("a = "+ window.a);
        }
        fun2();
    }
    fun();
    console.log("b = "+b);
    console.log("d = "+d);

js 的指数表示法，浮点数字面值(Floating-point_literals)简单描述就是0的个数，比如 1e3 就是 1000，12e5 就是 1200000，就是0的个数。相反 1e-3 就是 0.001 3个零跑到前面去了，12e-5 要从2开始算位数0.00012，而不是 0.000012。

//选择结构

var a = 500000;

if (a < 100) {

console.log(“汇丰为” + 1 + “元”);

}

else if (a >= 100 && a < 5000) {

console.log(“汇丰为” + a * 0.01);

}

else {

console.log(“汇丰为” + 1e3);

}

//switch

var b = 6;

switch (b) {

case 6:

console.log(“asd”);

break;

default:

break;

}

11、循环

console.log(sum);

var obj = {

“name”: “小明”,

“age”: “12”,

“hobby”: “swim”,

}

var person;

for (person in obj) {

console.log(obj[person]); //person只能代指key或者数组下标

}

var arr = [1, 2, 3, 4, 5, 6, 7];

arr.forEach(function (a) {

console.log(a); //代表每一个值

}

)

var arr = [4, 2, 3, 4, 5, 6, 7];

arr.forEach(function (index, a) {

console.log(a, index);

}

) //索引和数值

var arr = [1, 2, 3, 4, 5, 6, 7];

arr.forEach((a) => { //与function作用一直

console.log(a);

}

)

for (var i = 0; i <= this.checkGroup.length - 1; i++) {

all += this.checkGroup[i].number * this.checkGroup[i].price;

}

12、dom元素对象（取对象）

asd
123
点我

function myFunciton() {

var list = document.getElementsByTagName(“ul”)[0];

list.getElementsByTagName(“li”)[1].innerHTML = “new”;

} //取类型
asd
123
点我

function myFunciton() {

var list = document.getElementsByClassName(“example”)[0];

list.getElementsByClassName(“child”)[1].innerHTML = “new”; //去class

对象

我要变了

点我

function myFunciton() {

var a1 = document.getElementsByTagName(“a”)[0];

document.getElementById(“demo”).innerHTML = a1.getAttribute(“target”); //取属性值

}

function myFunciton() {

var a1 = document.getElementsByTagName(“a”)[0];

var a2 = document.getElementById(“demo”);

a2.innerHTML = a1.getAttributeNode(“target”).value; //获取节点，value如果是class，获取到class属性值

// getAttributeNode() 方法从当前元素中通过名称获取属性节点。
仅想返回属性值请使用 getAttribute 方法

}

元素添加事件
```

```
document.getElementById(“myBth”).addEventListener(“click”, function () {

document.getElementById(“demo”).innerHTML = “hello world”;

}

// element.calssName设置或返回元素的class属性

var x = document.getElementsByTagName(‘div’)[0];

document.write(“div元素css类为:” + x.className);

document.write("
");

document.write(“另一种方式:”);

document.write(document.getElementById(‘myid’).className);
coffee
tea

单机按钮将项目添加到列表中

点我

//elem.appendchild 为元素添加子节点

alert(“asd”)

var node = document.createElement(“li”); //createElement(“li”) 创建一个li节点

var textnode = document.createTextNode(“water”) //创建一个文本节点

node.appendChild(textnode); //然后将文本节点添加到li节点

document.getElementById(“myList”).appendChild(node);

}

单机按钮显示第一个属性的名称

点我

var btn = document.getElementsByTagName(“button”)[0];

var x = document.getElementById(“demo”);

x.innerHTML = btn.attributes[0].name;

console.log(btn.attributes);

}

hello world

单机按钮改变上面标题样式

点我

function myFuntion() {

var h = document.getElementsByTagName(“h1”)[0];

h.getAttributeNode(“style”).value = “color:green”; //改变颜色

}

双机按钮改变上面标题样式

// 点我 //ondblclick双击

单机改变颜色

elmnt.style.color = clr;
}

<img οnmοuseenter=“bigImg(this)” οnmοuseleave=“normalImg(this)” border=“0” src="…/images网页/li4.png" alt=""

width=“32” height=“32”>

function bigImg(x) {

x.style.height = “64px”;

x.style.width = “64px”;

}

function normalImg(x) {

x.style.height = “32px”;

x.style.width = “32px”;

}

Document

<!-- <p>单击按钮触发函数</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p> -->

<!-- <p ondblclick="myFunction()">双击点我</p>
<p id="demo"></p> -->

<!-- <p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
单击文本改变颜色，触发一个带参数函数</p> -->

<img onmouseenter="bigImg(this)" onmouseleave="normalImg(this)" border="0" src="cat-011.jpg"
width="32" height="32">
<p>bigImg() 函数在用户将鼠标指针移动到该图像时触发</p>
<p>normalImg() 函数在用户将鼠标指针移出图像时触发</p>

<!-- <p>当你在输入框内按下一个按键是函数被触发</p>
<input type="text" onkeydown="myFunction()"> -->

<!-- <p>当用户在输入字段释放一个按键时触发函数，函数将字符转换为大写</p>
输入你的名称：<input type="text" id="fname" onkeyup="myFunction()"> -->

<!-- 7.某个键盘按下并松开  onkeypress -->
<p>当用户在输入框内按下一个按键时函数被触发</p>
<input type="text" onkeypress="myFunction()">




<script type="text/javaScript">

/* 1.点击事件 onclick当用户点击某个对象时调用的句柄 */
// function myFunction() {
// document.getElementById(“demo”).innerHTML=“Hello World”;
// }

/* 2.双击事件 ondblclick */
// function myFunction() {
// document.getElementById(“demo”).innerHTML=“Hello World”;
// }

/* 3.鼠标按钮抬起，按下 onmouseup onmousedown */
// function myFunction(elmnt,clr) {
// console.log(elmnt);
// console.log(clr);
// elmnt.style.color=clr;
// }

/* 4.鼠标移入移出 onmouseenter onmouseleave */
// function bigImg(x) {
// console.log(x);
// x.style.height=“64px”;
// x.style.width=“64px”;
// }
// function normalImg(x) {
// x.style.height=“32px”;
// x.style.width=“32px”;
// }

/* 5.onkeydown 键盘按下事件 */
// function myFunction() {
// alert(“你在输入框内按下一个键”);
// }

/* 6.某个键盘键被松开 */
// function myFunction() {
// var x=document.getElementById(“fname”);
// x.value=x.value.toUpperCase(); //将字符转为大写
// //toLocaleLowerCase() 将字符转为小写
// }

/* 7.某个键盘按下并松开 onkeypress */
function myFunction() {
alert(“你在输入框内按下一个按键”);
}

</script>

13、正则表达式

//1.\b 单词的开始或结束
//2… 任意[一个]非换行字符
//3.* 前面的字符(可以是普通字符，也可以是元字符)重复
//4.\d 任意[一个]数字
//5.{n} 前面的字符，重复n次(n是一个数字)
//6.{n,m} 前面的字符，重复n到m次(m,n都是数字)
//7.^ 字符串开始的位置
//8.$ 字符串结束的位置

//元字符（meta character）

// .匹配除换行符以外的任意字符
// \w 匹配字母或数字或下划线或汉字等价于 ‘[^A-Za-z0-9_]’。
// \s 匹配任意的空白符
// \d 匹配数字
// \b 匹配单词的开始或结束
// ^ 匹配字符串的开始
// $ 匹配字符串的结束
// \w能不能匹配汉字要视你的操作系统和你的应用环境而定

// 2.表示重复次数
// */

\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，‘n’ 匹配字符 “n”。’\n’ 匹配一个换行符。序列 ‘\’ 匹配 “” 而 “(” 则匹配 “(”。
^	匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 ‘\n’ 或 ‘\r’ 之后的位置。
$	匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 ‘\n’ 或 ‘\r’ 之前的位置。
*	匹配前面的子表达式零次或多次。例如，zo* 能匹配 “z” 以及 “zoo”。* 等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，‘zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。
?	匹配前面的子表达式零次或一次。例如，“do(es)?” 可以匹配 “do” 或 “does” 中的"do" 。? 等价于 {0,1}。
{n}	n 是一个非负整数。匹配确定的 n 次。例如，‘o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个 o。
{n,}	n 是一个非负整数。至少匹配n 次。例如，‘o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有 o。‘o{1,}’ 等价于 ‘o+’。‘o{0,}’ 则等价于 ‘o*’。
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，“o{1,3}” 将匹配 “fooooood” 中的前三个 o。‘o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。
?	当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 “oooo”，‘o+?’ 将匹配单个 “o”，而 ‘o+’ 将匹配所有 ‘o’。
.	匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符，请使用象 ‘[.\n]’ 的模式。
(pattern)	匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 ‘(’ 或 ‘)’。
(?:pattern)	匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 “或” 字符 (\|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y\|ies) 就是一个比 ‘industry\|industries’ 更简略的表达式。
(?=pattern)	正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，‘Windows (?=95\|98\|NT\|2000)’ 能匹配 “Windows 2000” 中的 “Windows” ，但不能匹配 “Windows 3.1” 中的 “Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern)	负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如’Windows (?!95\|98\|NT\|2000)’ 能匹配 “Windows 3.1” 中的 “Windows”，但不能匹配 “Windows 2000” 中的 “Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
x\|y	匹配 x 或 y。例如，‘z\|food’ 能匹配 “z” 或 “food”。’(z\|f)ood’ 则匹配 “zood” 或 “food”。
[xyz]	字符集合。匹配所包含的任意一个字符。例如， ‘[abc]’ 可以匹配 “plain” 中的 ‘a’。
[^xyz]	负值字符集合。匹配未包含的任意字符。例如， ‘[^abc]’ 可以匹配 “plain” 中的’p’。
[a-z]	字符范围。匹配指定范围内的任意字符。例如，’[a-z]’ 可以匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符。
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，’[^a-z]’ 可以匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符。
\b	匹配一个单词边界，也就是指单词和空格间的位置。例如， ‘er\b’ 可以匹配"never" 中的 ‘er’，但不能匹配 “verb” 中的 ‘er’。
\B	匹配非单词边界。‘er\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配 “never” 中的 ‘er’。
\cx	匹配由 x 指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 ‘c’ 字符。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 [^0-9]。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。
\w	匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。
\W	匹配任何非单词字符。等价于 ‘[^A-Za-z0-9_]’。
\xn	匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，’\x41’ 匹配 “A”。’\x041’ 则等价于 ‘\x04’ & “1”。正则表达式中可以使用 ASCII 编码。.
\num	匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，’(.)\1’ 匹配两个连续的相同字符。
\n	标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为向后引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
\nm	标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式，则 nm 为向后引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。
\nml	如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。
\un	匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。

var telNo = “012-12345678”;

var telReg = /^0\d{2,3}-\d{7,8}$/

//以0开头，随机一个数重复2_{3次，中间有-，随机一个数重复7}8次

console.log(telReg.test(telNo)) //true

var telNo = “1123asd”;

var telReg = /^\w{6,20}$/

//数字可以开头，6-20位，数字、字母、下划线

console.log(telReg.test(telNo)) //true

var telNo = “11313”;

var telReg = /¹+$/ //+是重复一次或者更多,[]其中一个

//匹配一个奇数数字

console.log(telReg.test(telNo)) //true

// 试一下

var userReg = /²\w{5,19}$/

document.querySelector(‘button’).onclick = function () {

var username = document.querySelector(‘input’).value;

//queryselector返回文档中匹配指定css选择器的一个元素

console.log(userReg.test(username));

}

var mood = “xihahaxi”

var moodRef = /^xi((ha){2}|he)xi$/

console.log(moodRef.test(mood)); //true

14、json

var text = ‘{“sites”:[’ + ‘{“name”:“runoob1”,“url”:“www.runoob.com1”},’ +

‘{“name”:“runoob2”,“url”:“www.runoob.com2”},’ +

‘{“name”:“runoob3”,“url”:“www.runoob.com3”}] }’;

obj = JSON.parse(text); //JSON.parse()将json文本转化为 js

console.log(obj);

document.getElementById(“demo”).innerHTML = obj.sites[1].name + obj.sites[2].url;

console.log(str_pretty1);

document.write(“只有一个参数情况：”);

document.write("
");

document.write("

" + str_pretty1 + “

”);

str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩放

document.write(“只有一个参数情况：”);

document.write("
");

document.write("

" + str_pretty2 + “

”); //pre代表保留空格和换行符

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

value:

必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

返回值：

返回包含 JSON 文本的字符串。

六、vue

构建数据驱动的应用开发框架，改变数据就能驱动页面的一个更新，再也不需要开发者自己去操作dom

1、数据更新原理，响应式原理

Object.defineProperty(myvue, “name”, {
            get: function () {
                console.log(“get”);  //返回经过处理后的变量
                return obox.innerHTML
            },

set: function (value) {
                console.log(value);
                console.log(“set”);
                return obox.innerHTML = value;
            }})

var vm = new Vue({
            el: “#app”,   //element需要获取的元素，一定是html的根元素
            data: {       //data:用于数据的存储
                site: “vue”,
                url: “asdasas”,
                alexa: “none”,

methods: {  //方法
                detail: function () {
                    return this.site + “-学的不仅是技术，更是梦想”
                }

}

}
)

// v-html一个是自动识别标签 {{}}一个不识别

var vm = new Vue({
            el: “#box”,
            data: {
                myhtml: “

啊大苏打

”, //,必须有
a: “asd”

}

})

2、bind对属性的绑定

动态更改class名字

</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            imgsrc: "https://www.baidu.com/img/flexible/logo/pc/result.png",

            mystyle: {
                background: "red",
                fontSize: "lighter",           //font-size 对比 fontSize
                height: "70px"
            },

            classObj: {
                red: false,
                blue: true                  //true  改div的calss名字classObJ为red,并且调用css中的red

            }
        }
    })
</script>

3、对于事件的绑定 v-on:

        增加1
        <button @click=“subtract()”>减少1

我是{{number}}

}

})

//传入参数

增加10

}

})

//鼠标移动、双击、input弹出

<div id=“box” :style=“mystyle” @mousemove=“updateXY”>{{x}} {{y}}

<div @dblclick=“dbFunc()”>双击我有惊喜

var vm = new Vue({

el: “#box”,

data: {

number: 50, //只有data里定义了数值,后面用到都要加this

x: 0,

y: 0,

mystyle: {

width: “100px”,

height: “100px”

}

methods: {

//鼠标移动的时候取到x轴,y轴的值

updateXY: function () {

this.x = event.offsetX;

console.log(event.offsetX);

console.log(event.offsetY);

this.y = event.offsetY;

dbFunc: function () {

alert(“你好啥比”)

logName: function () {

alert(“正在输入”)

}

})

4、v-show（做显示和隐藏，style=“display:none”）

<button @click=“handleClick()”>点我

我是v-show的被人

el: “#box”,
            data: {
                myShow: false
            },
            methods: {
                handleClick: function () {
                    this.myShow = true
                }

}
})

区别

v-show:只是简单的css隐藏显示

v-if：消除数据

5、v-if(直接后台被销毁)

<button @click=“handleClick()”>点我

我是v-show的被人

6、v-if-else

相等

不相等

//销毁和重新生成dom,

var vm = new Vue({

el: “#box”,

data: {

type: ‘B’

methods: {

}

})

7、v-for

<li v-for="(zdata,zindex) in dataList" :key=“zindex” @click=“handleClick(zindex)”

:class="currentIndex==zindex?‘active’:’’ ">{{zdata}}

//销毁和重新生成dom,

var vm = new Vue({

el: “#box”,

data: {

dataList: [“首页”, “详情页”, “列表页”],

currentIndex: 0,

handleClick: function (index) {

this.currentIndex = index;

console.log(this.currentIndex);

}

})

7、methods( methods方法，每当触发重新渲染时，调用方法将总是再次执行函数 )

age + a={{addToA()}}

age + b={{addToB()}}

addToA() {
                        console.log(“ADD TO A”);
                        return this.a + this.age;
                    },
                    addToB() {
                        console.log(“ADD TO B”);
                        return this.b + this.age;
                    }

}

})

8、计算属性computed

–>

<button type=“primary” @click=“a++”>ADD TO A

<button type=“primary” @click=“b–”>ADD TO B

A:{{a}}

B:{{b}}

age + a={{addToA}}

//addToA不能加括号

age + b={{addToB}}

//销毁和重新生成dom,

var vm = new Vue({

el: “#app”,

data: {

a: 0,

b: 0,

age: 20

computed: {

addToA() {

console.log(“ADD TO A”);

return this.a + this.age;

addToB() {

console.log(“ADD TO B”);

return this.b + this.age;

}

})

9、vue监听

counter: 1
},

methods: {
            },
            watch: {
                counter: function (nval, oval) {
                    console.log(nval);
                    console.log(oval);
                    alert(“计数器由” + oval + “变为” + nval);
                }

}

})

vm.$watch(‘counter’, function (nval, oval) { //对全局进行实例化

console.log(nval);

console.log(oval);

alert(“计数器由” + oval + “变为” + nval);

v-model可以将表单输入绑定到对应的模型数据。

10、表单绑定

记住用名户

//销毁和重新生成dom,

var vm = new Vue({

el: “#box”,

data: {

mytext: “”,

isChecked: true

methods: {

react

vue

jquery

var vm = new Vue({

el: “#box”,

data: {

checkedngroup: [],

methods: {

react

vue

//销毁和重新生成dom,

var vm = new Vue({

el: “#box”,

data: {

checkedngroup: “asd”,

picked: “vue”

methods: {

11、修饰符

lazy

number

})

trim

})

self

<ul @click.self=“clickUL”>
我是ul

我是li

})

stop(组织了从下往上冒泡传递)

<div @click=“div1”>
            我是div1
            <div @click=“div2”>我是div2
                <p @click.stop=“p1”>我是p1

capture

<div @click=“div1”>
            我是div1
            <div @click.capture=“div2”>我是div2
                <p @click=“p1”>我是p1

prevent

        <a href=“http://www.baidu.com” @click.prevent=“a1”>点我直达

})

once

        <a @click.once=“a1”>点我直达

})

*keyup

})

12、自定义指令

13、全局组件（`反斜杠很重要）

老师文件：

Document

Vue.component(“hello”, {
template: <div>我是hello组件</div>
})

Vue.component(“hello-compoment”, {
template: ` //里面的内容最外层一定要套一个div

                    {{name}}
                    <button @click=“handleclick”>点击

data() {
                return {
                    name: “我是组件”
                }
            },

methods: {
                handleclick() {
                    this.name = “我是组件修改”
                }
            }
        })

el: “#box”,
            data: {
                name: “”,
                color: “red”,
                fontsiz: “green”
            },
            methods: {

})

14、局部组件

老师文件：

Document

},
            components: {
                “hello1”: {
                    template: <div>我是hello1组件</div> //里面的内容最外层一定要套一个div
                },
                “hello2”: {
                    template: <div>我是hello2组件</div>

}
}

})

15、prop父子通信

老师文件：

Document

我是父组件

<script type="text/javaScript">
    Vue.component("hello",{
        template:
            `<button @click="myClick()">点我</button>`,
            props: ['msg'],
            // 儿子在实例中的props属性获取
            methods:{
                myClick:function(){
                    console.log(this.msg);
                }
            }
    }),
    new Vue({
     el: '#box'
    })                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
</script>

16、组件props

老师文件：

Examples

我是父亲

el: “#box”,
            data: {
                name: ‘我是父组件’,
                myobj: {
                    name: “王蒙”,
                    age: 18,
                    hobby: “guitar”
                }
            },
            methods: {

components: {
“child”: {
template: `

data() {
                        return {
                            message: “我是子组件”
                        }

obj: {
                            type: Object,
                            default: “”
                        }
                    }
                }

}

17、子传父（组件自定义事件）

老师文件：

Examples

Vue.component(“hello”, {
            template:
                <div>我父组件                        <hellochild  @myEvent="handleParent"></hellochild>                                 </div>,
            //接收儿子给的myEvent
            methods: {
                handleParent(val) {
                    console.log(“子组件传来的值是:”, val)
                }
            },

var vm = new Vue({

el: “#box”,
data: {

})

18、solt

老师文件：

slot

我是slota

我是slotb

</div>



<script type="text/javascript">
    var hello = {
        template: `
        <div>
           <slot name="slota"></slot>
           hello 组件
            <slot name="slotb"></slot>
        </div>
      `
    }
    new Vue({
        el: "#box",
        data: {
            // isShow: true
        },
        components: {
            hello
        }
    })
</script>

我是slota

我是slotb

var hello = {
template: `

            hello 组件

`
}

var vm = new Vue({

el: “#box”,
data: {

hello
}

})

19、search 和indexOf

search找到返回0 找不到返回-1 用于字符串查找

indexof 检索字符串是否出现，如果没有检索到返回-1

console.log(this.dataList[0].name.indexOf("")) //如果是空字符串返回0 相当于都能查到

console.log(this.dataList[0].name.search ("")) //如果是空字符串返回0 相当于都能查到

20、动态数组

Document

    <keep-alive>
        <!-- component元素,动态地绑定多个组件到它的is属性 -->
        <component :is='current'></component>
    </keep-alive>
    <!-- keep-alive保留状态,避免重新渲染,多用于手机端
    不用keep-alive 节省内存,但浪费性能,用户切换时等待时间长 -->
    <footer>



        <ul>
            <li><a @click="current='home'">首页</a></li>
            <li><a @click="current='list'">列表页</a></li>
            <li><a @click="current='shopcar'">购物车页面</a></li>
        </ul>

    </footer>
</div>



<script type="text/javascript">
    var home = {
        template: `

        <div>home页面
            <input type="text"/>
        </div>
      `
    }
    var list = {
        template: `

        <div>list页面</div>
      `
    }
    var shopcar = {
        template: `

        <div>shopcar页面</div>
      `
    }
    var vm = new Vue({
        el: "#box",
        data: {
            current: 'home'
        },

        components: {
            home,
            list,
            shopcar
        }
    })
</script>

21、生命周期（beforecreate指的是内部的new Vue）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r0vz8Y3K-1616458490641)(file:///C:\Users\asus\Documents\Tencent Files\1264657821\Image\Group2\JA\9E\JA9EX$N1EII9TQ039BXLBSR.png)]

node -v

npm run dev 运行服务器

vue 各文件介绍

bulid ========= 构建脚本目录
1）bulid.js =========生产环境构建简本
2) check-versions.js ======= 检查 npm node.js 版本
3）tuils.js =======构建相关工具方法
4）vue-loader.conf.js ======= 配置css 加载器以及编译css之后自动添加前缀
5）weback.base.conf.js ====== webpack 基本配置
6）webpack.dev.js ======= webpack 开发环境配置
7）webpack.prod.conf.js ====== webpack 生产环境配置
config ==========项目配置
1）dev.env.js =========开发环境变量
2）index.js ========= 项目配置文件
3）prod.env.js ======== 生产环境变量
node_modules =======npm 加载的项目依赖模块
src ===============这里就是我们要开发的目录，开发基本要做的事情都在这里
1. assets 静态文件包括图片，字体等， webpack 打包，重新编译。
  2）components ===== 组件目录，要写的组件放在这个目录里
  3）app.vue ========= 根组件
  4）router= 前端路由我们需要配置的路由写在index.js里面
  5）main.js ========== 入口js文件
static ===============静态资源目录，如图片，字体等，打包后不会被wabpack处理。
.xxxxx文件============= 包括语法配置，git配置等
index.html =============首页入口文件
package.json ===========npm 配置文件,定义了项目的npm脚本，依赖包等信息
README.md ============ 项目的说明文档

vue 路由嵌套注意斜杆问题

如果路由组件是一个另一个路由组件的子路由组件的话：

在配置路由规则是，path 路径，前面不能添加 /，他代表根路径；加上他就不会拼接上

父路由组件的 path 路径的，如：

演员：Hone.vue (父)， New(子)， Message(子)

2个子路由组件想要显示在父路由组件中；

router > index.js

import Home from ‘…/views/Home.vue’
import New from ‘…/views/New.vue’
import Message from ‘…/views/Message.vue’

const router = new VueRouter({
routers:[
{
path: ‘/home’,
component: Home,
children:[
// 全写
{ path: ‘/home/new’, component: New },
// 也可以简写，不过前面不能添加斜杠
{ path: ‘message’, component: Message },
]
}
]
})

view > Home.vue

home

new message

*scoped //只对当前界面有效，防止界面污染

path: ‘/’, 只写一个/ 表明直接跳这个相当于8080 就是这个

router路由详解

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’ // @等于src

import Home from ‘@/components/Home’

import Card from ‘@/components/Card’

import Film from ‘@/components/Film’

import NowPlaying from ‘@/components/NowPlaying’

import ComingSoon from ‘@/components/ComingSoon’

import Detail from ‘@/components/Detail’

import Hello from ‘@/components/Hello’

import Table from ‘@/components/Table’

Vue.use(Router)

export default new Router({

// 路由有两种模式，一种hash模式，一种history模式，如果用原始的a标签跳转，会出现兼容问题，只支持hash模式，history模式会失效

routes: [

{

path: ‘/’,

name: ‘table’,

component: Table

{

path: ‘/hello’, //path后面是路径

name: ‘hello’,

component: Hello //组件

{

path:"/home",

name:“home”,

component:Home

{

path:"/card",

name:“card”,

component:Card

{

path:"/film",

component:Film,

children:[{

path:“nowplaying”,

component:NowPlaying

{

path:“comingsoon”,

component:ComingSoon

{

path:"/",

redirect:"/film/nowplaying" //重定向，跳转到指定界面

{

path:"/detail/:id", // /detail/dwa 动态路由

name:“detail”,

component:Detail

}

]

}

]

})

app

home

card

film

vuex

安装

vuex （全局状态管理）
管理的数据是多页面需要共享的数据

安装
\1. npm install vuex --save

\2. 在src 下新建store文件夹，然后新建 index.js 文件

\3. main.js 引入注册

import Vue from ‘vue’

import Vuex from ‘vuex’

const store = new Vuex.Store({

state:{

//存放的键值就是管理状态

name:“xiaomenb”,

age:18,

sex:“女”,

hobby:“sing”

}

vuex （全局状态管理）
管理的数据是多页面需要共享的数据

安装

1. npm install vuex --save

2. 在src 下新建store文件夹，然后新建 index.js 文件
3. main.js 引入注册
   4.挂载vuex
    vue.use(Vuex)

// 创建vuex对象
const store = new Vuex.Store({
state: {
// 存放的键值对就是管理状态
name: “hello”
}
})
取数据
this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotstate.message {{$ store.state.message}}

this.$router.push({path:"/home"}) //编程时路由

router-link //声明式路由