概述
一、Axure
下载元件库网址 https://www.axure.com.cn/5216/
二、vscode
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGOUFkJO-1616458490622)(file:///C:UsersasusDocumentsTencent Files1264657821ImageGroup2A6NSA6NSAXZHIH7N]NOIB21UN$L.png)]
html:5 或者!出现相应头部结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8ScSYqF-1616458490628)(C:UsersasusAppDataRoamingTyporatypora-user-images1614654069426.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)
代表行
代表列 |
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、表单
//
// password 密码*
男
女
// radio 单选框
学习
骑车
<input type=“checkbox” name=“hobby” id="hobby"checked/> 打球
学习
// checkbox复选框 checked默认选中 disabled默认选不了
//下拉列表 selected 被默认选中
//文本框
邮箱: //可以检验邮箱格式网址
提交
//可以检验网址格式
最大数最小数
//日
//月
//周
//时间
//搜索
表单
作用:收录用户信息
form 表单框
1)文本框
2)密码框
3)单选框/单选按钮
男
女(默认选中)
4)复选框/复选按钮
游泳
敲代码 (禁用)
当属性值与属性名相同时,属性值可以省略不写
5)按钮
6)下拉菜单
7)多行文本域
此处为红色 //改变相应颜色
6、html5拓展内容
//插入音频
//controls 属性是一个布尔属性。如果属性存在,它指定音频控件的显示方式。
音视频控件包括
一个画布在网页中是一个矩形框,通过 元素来绘制.
注意: 默认情况下 元素没有边框和内容。
简单实例如下:
注意: 标签通常需要指定一个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、选择符
*{
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:WindowsFonts
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:UsersasusAppDataRoamingTyporatypora-user-images1614839878396.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;
3、文本字体:{font-family:“中文字体1”,字体2,字体3;}
拓展:
衬线体------有额外修饰的字体–宋体
非衬线体------没有额外修饰的字体–黑体,微软雅黑
说明:浏览器首先会寻找字体1、如存在就使用改字体来显示内容,如在字体1不存在的情况下,则会寻找字体2,如字
体2也不存在,按字体3显示内容,如果字体3 也不存在;则按系统默认字体显示;
当字体是中文字体时,需加双引号;
当英文字体中有空格时,需加双引号如(“Times New Roman”)
当英文字体只有一个单词组成是不加双引号;如:(Arial);
Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.
系统字体所在位置:C:WindowsFonts
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:UsersasusAppDataRoamingTyporatypora-user-images1615164522684.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、动画
四、动画
相关动画属性:
animation:动画名称 动画所需时间 动画播放方式 动画开始时间 循环次数 播放方向 播放状态 动画时间外属性
animation-name:动画名称-----声明的动画名称
animation-duration:动画所需时间—完成0%-100%动画所需时间
animation-timing-function:动画播放方式 ----同过渡
step-start 马上跳到动画每一结束桢的状态
animation-delay:等待动画的时间
animation-iteration-count:循环次数----默认为1,infinite循环播放
animation-direction:播放方向----默认normal,向前播放;alternate,播放次数为偶数则向前播放,为奇数时向反方向播放;
animation-play-state:播放状态-----running播放和pause暂停
animation-fill-mode:动画时间外属性----forwards动画结束后保持最后状态;backforwards会向元素应用动画样式时迅速应用动画初始值。
四、动画
相关动画属性:
animation:动画名称 动画所需时间 动画播放方式 动画开始时间 循环次数 播放方向 播放状态 动画时间外属性
animation-name:动画名称-----声明的动画名称
animation-duration:动画所需时间—完成0%-100%动画所需时间
animation-timing-function:动画播放方式 ----同过渡
step-start 马上跳到动画每一结束桢的状态
animation-delay:等待动画的时间
animation-iteration-count:循环次数----默认为1,infinite循环播放
animation-direction:播放方向----默认normal,向前播放;alternate,播放次数为偶数则向前播放,为奇数时向反方向播放;
animation-play-state:播放状态-----running播放和pause暂停
animation-fill-mode:动画时间外属性----forwards动画结束后保持最后状态;backforwards会向元素应用动画样式时迅速应用动画初始值。
关键帧声明动画@keyframes:
@keyframes name{
from{
css样式;
}
percentage{
css样式;
}
to{
css样式;
}
}
@keyframes name{
0%{
css样式;
}
percentage{
css样式;
}
100%{
css样式;
}
}
**、写页面的注意事项:
任何线上案例都需要在书写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 方法 }
元素添加事件
<!-- <p>元素添加事件</p> <button id="myBth">click</button> <p id="demo"></p> -->
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 匹配一个单词边界,也就是指单词和空格间的位置。例如, ‘erb’ 可以匹配"never" 中的 ‘er’,但不能匹配 “verb” 中的 ‘er’。 B 匹配非单词边界。‘erB’ 能匹配 “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 匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ fnrtv]。 S 匹配任何非空白字符。等价于 [^ fnrtv]。 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 = /^0d{2,3}-d{7,8}$/
//以0开头,随机一个数重复23次,中间有-,随机一个数重复78次
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 = /1+$/ //+是重复一次或者更多,[]其中一个
//匹配一个奇数数字
console.log(telReg.test(telNo)) //true
// 试一下
var userReg = /2w{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;
}})//
{{site}}
//{{detail()}}
var vm = new Vue({
el: “#app”, //element需要获取的元素,一定是html的根元素
data: { //data:用于数据的存储
site: “vue”,
url: “asdasas”,
alexa: “none”,},
methods: { //方法
detail: function () {
return this.site + “-学的不仅是技术,更是梦想”
}}
}
)// v-html一个是自动识别标签 {{}}一个不识别
{{myhtml}}
{{a}}
var vm = new Vue({
el: “#box”,
data: {
myhtml: “啊大苏打
”, //,必须有
a: “asd”}
})
2、bind对属性的绑定
11动态更改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()”>双击我有惊喜
<input type=“text” @keyup=“logName”>
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、表单绑定
{{mytext}}
记住用名户
{{isChecked}}
//销毁和重新生成dom,
var vm = new Vue({
el: “#box”,
data: {
mytext: “”,
isChecked: true
},
methods: {
},
react
vue
jquery
{{checkedngroup}}
var vm = new Vue({
el: “#box”,
data: {
checkedngroup: [],
},
methods: {
},
react
vue
{{picked}}
//销毁和重新生成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
//
<input type=“text” @keyup=“handleky”>
<input type=“text” @keyup.enter=“handleky”>
<input type=“text” @keyup.alt.enter=“handleky”>
})
12、自定义指令
13、全局组件(`反斜杠很重要)
老师文件:
Document //
Vue.component(“hello”, {
template:<div>我是hello组件</div>
})Vue.component(“hello-compoment”, {
template: ` //里面的内容最外层一定要套一个div
- asd
- asd
- asd
- asd
{{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>
//
{{name}}
},
16、组件props
老师文件:
Examples 我是父亲
//
{{name}}
el: “#box”,
data: {
name: ‘我是父组件’,
myobj: {
name: “王蒙”,
age: 18,
hobby: “guitar”
}
},
methods: {},
components: {
“child”: {
template: `
{{message}}
{{obj}}
`,
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:UsersasusDocumentsTencent Files1264657821ImageGroup2JA9EJA9EX$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 ===============这里就是我们要开发的目录,开发基本要做的事情都在这里
- assets 静态文件 包括图片,字体等, webpack 打包,重新编译。
2)components ===== 组件目录 ,要写的组件放在这个目录里
3)app.vue ========= 根组件
4)router= 前端路由 我们需要配置的路由写在index.js里面
5)main.js ========== 入口js文件
- assets 静态文件 包括图片,字体等, webpack 打包,重新编译。
-
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 --save2. 在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: …tate.message {{store.state.message}}
this.$router.push({path:"/home"}) //编程时路由
router-link //声明式路由
安装element
npm i element-ui -S
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’
Vue.config.productionTip = false
Vue.use(ElementUI);
13579 ↩︎
a-zA-Z ↩︎
最后
以上就是粗犷绿茶为你收集整理的web前端知识点总结一、Axure二、vscode三、html(结构)四、css(表现、层叠样式表)五、js(行为)hello world六、vue{{site}}{{detail()}}{{a}}啊大苏打home的全部内容,希望文章能够帮你解决web前端知识点总结一、Axure二、vscode三、html(结构)四、css(表现、层叠样式表)五、js(行为)hello world六、vue{{site}}{{detail()}}{{a}}啊大苏打home所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复