前端学习笔记 h5+c3+js+ES6+Less+移动端

前端

HTML + CSS

初始HTML

HTML基本结构

  • 分为头部和主体部分
  • <body></body>等成对出现的标签叫开放标签 和闭合标签
  • 单独呈现的标签（空标签），如<hr/>；意为用/来关闭空标签
  • <!DOCTYPE html> 代表html的版本
  • <html lang="en"> 网页默认语言，中文 lang="ch-CN"或 lang="zh"
  • <meta charset="UTF-8"> 默认的编码规则
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> 我的第一个网页 </title>
    </head>
    <body> 
        我的第一个网页
    </body>
</html>

网页的基本标签

块级标签：独占一行；行级标签：不会独占一行

标题标签
  • <h1> 一级标题 </h1>……<h6> 六级标题 </h6>
  • 标题标签共分六级：<h1>最大，<h6>最小
  • 标题标签独占一行
段落标签
  • <p></p>段落标签独占一行
换行标签
  • <br/>标签后面的内容自动换行
  • / 写在后面表示自关闭
水平线标签
  • <hr/>标签在网页中转换成一条分割线
字体样式标签
  • <strong></strong>字体加粗标签
  • <em></em>斜体标签
注释和特殊符号（转义）
  • HTML注释 <!-- 注释内容 -->
  • 空格符号 &nbsp;
  • 大于符号 > &gt; 小于符号 < &lt;
  • 引号 “” &quot;
  • 版权符号 @&copy;
图像标签
  • <img src="path" alt="text" title="text" width="x" height="y"/>
  • src中传入图片地址，alt表示图片的替代文字，title是图片悬停的提示文字
链接标签
  • <a href="path" target="目标窗口位置"> 显示内容 </a>
  • href内存放链接地址；target值：_self、_blank；

常用的超链接

  • 使用cursor: pointer;模拟链接；鼠标放上变小手
页面链接
  • 从一个页面跳转到另外一个页面
  • <a href="跳转链接地址" target="网页打开方式"> 内容 </a>
锚链接
  • 从从本页面特定位置跳转到本页面下一位置
  • 从本页面特定位置跳转到其他页面特定位置
  • 创建跳转标记 <a name="aign">A位置</a>
  • 创建跳转链接 <a href="#sign">B位置</a>
功能性链接
  • 电子邮件、QQ、MSN
  • <a href="mailto:2452791011@qq.com">联系我们</a>

列表的分类

无序列表
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
  • 列表项可以包括图片、文本、还可以嵌套列表和其他标签
  • 使用 ul 声明无序列表
  • ul{list-style: none;} 去除列表前的小黑点
有序列表
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
  • 有序列表默认以数字序号排列显示
  • 使用 ol 声明有序列表
定义列表
<dl>
    <dt>声明列表项</dt>
    <dd>列表项1</dd>
    <dt>声明列表项2</dt>
    <dd>列表项2</dd>
</dl>
  • 在以后网页制作过程中经常会用到定义列表，特别是图文混淆的情况
  • 定义列表用 dl 声明， 使用 dt 声明列表项， 使用 dd 定义列表项内容

表格

简单通用，结构稳定

表格的基本语法
<table>
    <tr>
    	<th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
         <td>内容1</td>
         <td>内容2</td>
         <td>内容3</td>
     </tr>
     <tr>
         <td>内容4</td>
         <td>内容5</td>
         <td>内容6</td>
     </tr>
</table>

  • 创建表格标签 <table></table>；行标签 <tr></tr>；单元格标签 <td></td>；标题标签 <th></th>

  • <table border="1" height="100%" width="100%">设置表格宽高

  • td 设置边框，边框之间会有空隙。给table 设置 boder-collapse

    table{
	text-align: center;
	border-collapse: collapse;
}
table td{
	border: 1px solid #00000080;
}

  • 表格行（rowspan）、列合并（colspan）

表单语法

<form method="post" action="result.html">
        <p>名字：<input name="name" type="text" /> </p>
        <p> 密码：<input name="password" type="text"> </p>
        <p>
            <input type="submit" name="Button" value="提交">
            <input type="reset" name="Reset" value="重填">
        </p>
</form>
  • method规定如何发送表单数据 get | post, action 表示向何处发送表单数据
  • post提交数据安全性要高于get
表单元素格式
  • <input type="text" name="fname" value="text"/>
  • type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
  • name 指定表单元素的名称，同一组radio标签name值必须相同；checkbox同理
  • value 元素的初始值。type为radio时必须指定一个值
  • size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
  • maxlength type为text或password时，输入的最大字符
  • checked type为radio或checkbox时，指定按钮是否是被选中
input元素类型
  • text 文本框；password 密码框；radio 单选按钮；checkbox 复选框
  • select、option 列表框；reset、submit、button按钮；
  • textarea 多行文本域；可设置宽：clos=""高: rows=""
  • file 文件域
  • label 扩大按钮点击区域
  • 按钮设置为图片 <input type="image" src=""/>
  • input{outline:none} 选中输入框没有提示框
  • outline: none; 点击输入框输入文字不加载边框
  • 给input type="text" 标签设置 required 表示必须填写
<p>
	性别：
	<label for="gen1">
	<input name="gen" type="radio" class="input" valur="男" id="gen1" 		            checked/>男
	</label>
    
	<label for="gen2">
	<input name="gen" type="radio" calss="input" value="女" id="gen2"/>女
	</label>
</p>
表单的高级应用
隐藏域
  • <input type="hidden" value="666" name="userid">
  • type="hidden" 隐藏域，只是把type的值设置为hidden
只读
  • <input name="name" type="text" value="张三" readonly>
禁用
  • <input type="submit" disabled value="保存"

HTML新增元素及属性

HTML5

  • HTML5是用于取代HTML和XHTML的标准版本
  • 新的语义化标签，比如 header、footer、nav
  • 新的表单控件，比如 email、url、search
  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素

HTML5新增结构元素

header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息
nav 可以作为页面导航的链接组
section 页面中的一个内容区块，通常由内容及其标题组成
article 代表一个独立的、完整的相关内容块，可独立于页面其它内容使用
aside 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容
footer 页面或页面中某一个区块的脚注 
<div class="box">
        <header class="header">头部</header>
        <main class="main">
            <nav class="nav">导航</nav>
            <div class="container">
                <aside class="aside">侧边栏</aside>
                <article class="article">正文</article>
            </div>
        </main>
        <footer class="footer">底部</footer>
    </div>

HTML5新增网页元素

标签 说明
audio 定义音频，如音乐或其他音频流
video 定义视频，如电影片段或其他视频流
canvas 定义图形
datalist 定义可选数据的列表
time 标签定义日期或时间
mark 在视觉上向用户呈现那些需要突出的文字

音频播放

<audio src="路径"> </audio>

属性 值 说明
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放
loop loop 如果出现该属性，则当音频结束时重新开始播放
preload auto/meta/none 如果出现该属性，则音频在页面加载时进行加载，并预备播放 
<h2>在html5中播放音频：</h2> 
<audio controls="controls">
       <source src="vedio/song.ogg"/>
       <source src="vedio/song.mp3"/>
         您的浏览器不支持audio元素播放的音频
</audio>

视频播放

  • <video src="路径"> </video>
属性 值 说明
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放
loop loop 如果出现该属性，则当视频结束时重新开始播放
preload auto 如果出现该属性，则视频在页面加载时进行加载，并预备播放
width/height length(px) 设置视频播放器的宽度/高度 
<h2>在html5中播放音频：</h2> <video controls="controls">      <source src="video/video.mp4"/>      <source src="video/video.ogg"/>      <source src="video/video.webm"/>     您的浏览器不支持video播放的视频</video>

source元素

  • audio、video元素允许多个source元素
  • source可链接不同的音频、视频文件

Canvas概念

  • HTML5的Canvas元素使用JavaScript在网页上绘制图像
  • 画布是一个矩形区域，可以控制其每一个像素
  • Canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法

HTML5新增全局属性

标签 说明
contentEditable 规定是否允许用户编辑内容
designMode 规定整个页面是否可编辑
hidden 规定对元素进行隐藏
spellcheck 规定是否必须对元素进行拼写或语法检查
time 标签定义日期或时间
tabindex 规定元素的tab键迭制次序

HTML5新增input类型

类型 说明
email 电子邮件地址文本框，提交表单时会自动验证email的值
url 网页的URL，提交表单时会自动验证url的值
color 主要用于选取颜色
search 用于搜索引擎（搜索框）
number 只包含数值的字段，能够设定对所接受的数字的限定
range 滑动条，特定值范围内的数值选择器
Date pickers 拥有多个可供选取日期的新输入类型

表单初级验证方法

  • placeholder 字段提示
  • required 必须填写字段
  • pattern 正则表达式，输入内容必须符合正则规则

CSS点击展开折叠效果

<label class="drop" for="_1">Collapse 1 </label>
<input id="_1" type="checkbox"> 
<div>Content 1</div>

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}
.drop + input{
 display: none; /* hide the checkboxes */
}
.drop + input + div{
  display:none;
}
.drop + input:checked + div{
  display:block;
}

CSS( less 动态设置样式 )

  • 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
  • 由选择器和声明构成一条完整的css语句

HTML中引入CSS样式

行内样式
  • 在 html 代码标签中直接写上 style 属性
<h1 style="color:red; font-size: large;">一级标题</h1>
内部样式
  • CSS 代码写在 <header></header> 中的 <style></style> 里面
外部样式

​ css 代码保存在外部通过代码导入到 html 代码中

  • 链接式 <link href="style.css" rel="stylesheet" type="text/css" />"
  • 导入式 @import url("style.css");

CSS样式优先级

  • 行内样式 > 内部样式表 > 外部样式表
  • 就近原则：后面写的属性会覆盖前面设置的属性

CSS基本选择器

标签选择器
  • 设置一个标签属性所有同名标签的属性值都会随之改变
  • 所有html标签都能作为标签选择器被选中
类选择器
  • 每个标签都可以有多个class，可以通过给不同类名设置属性赋给同一个标签
  • 引用class一定要加.
  • class命名：只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
ID选择器
  • 在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
  • id选择器命名规范与类选择器一致
  • 每个标签仅可设置唯一一个id
基本选择器的优先级
  • ID选择器 > 类选择器 > 标签选择器

层次选择器

并集选择器
  • .one, .two{color:red;} 类名用逗号隔开
后代选择器
  • 通过父代限定范围；先查找父类标签再查后代
  • body div{background: red;} 父代与后代之间用空格隔开
子选择器
  • body>div{background: red;} 父代与子代之间用大于号连接
  • 只限定子代的标签，不限定更多后代
相邻兄弟选择器
  • .active+p{background: green;} 选择相邻弟辈标签进行对应属性赋值
通用兄弟选择器
  • .active~p{background: green;} 改变所有弟辈的属性值

属性选择器

  • a[id]{background: yellow;} 带 id 属性的 a 标签改变样式
  • a[id=first]{ background: red;} id 属性值为 first 的 a 标签改变样式
  • a[href^=http] { background: green;} 属性 href 里以 http 开头的元素改变样式
  • a[href$=pdf] { background: red;} 属性 href 里以 pdf 结尾的元素改变样式
  • a[href*=pdf] { background: red;} 属性 href 里包含 pdf 的元素改变样式
  • body p:nth-of-type(2){background: yellow;} 伪类选择器，body父元素里第二个类型为p的孩子元素

span标签

  • 让某几个文字或者某个词语凸显出来
  • span 标签 title 属性：鼠标悬停在span标签上会显示title值

字体、文本样式

字体样式
属性 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
  • em 相对单位，以父亲字体的大小为参照
  • rem 相对单位，以根元素字体大小为参照
文本样式
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
文本颜色
  • 十六进制表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
  • rgb(r,g,b)：正整数的取值为0～255
  • RGBA：在RGB基础上增加了控制alpha透明度的参数，取值范围为0~1
文本段落设置
  • 水平对齐方式：text-align:
  • 首行缩进：text-indent:em 或 px
  • 行高：line-height:px
水平对齐方式 text-align
值 说明
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
文本装饰
  • text-decoration属性
值 说明
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
垂直对齐
  • vertical-align属性：middle、top、bottom 图片与文本垂直居中对齐

超链接伪类

  • 伪类样式
a:hover{    color:#B46210;    text-decoration:underline;}
  • 使用css设置伪类
伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

列表样式

  • 清除无无序列表前面的小黑点：list-style:none;

盒子模型

  • 用于封装HTML元素
  • 它包括：外边距(margin)，边框(border)，填充(padding)和实际内容(contet)
  • 默认没有填充物，盒子里面的填充物不会影响盒子呈现的尺寸
  • 边框线占实际尺寸
  • 内边距会影响盒子里面放标签的数量
  • 内外看的角度不同，内：从父往子看；外：从子往父看。
  • 外边距会占空间，标签实际呈现的时候的尺寸
边框

  • 边框颜色：border-color

  • 边框粗细：border-width

  • 边框样式：border-style

    • dotted：点状；solid：实线；double：双线；dashed：虚线

  • border简写： border:width style color;

外边距
  • margin是指从自身边bai框到另一du个容器zhi边框之间的距离，dao就是容器外距离
  • margin有四个值，分别表示上右下左的值；三个值的时候分别表示上，左右，下
  • margin也可以分别给 margin-top、margin-left、margin-bottom、margin-right 赋值
  • css中经常使用 *{margin:0; padding:0;}清除所有标签的边距
  • 也可以使用 margin:0px auto;来使得网页居中对齐
内边距
  • padding是指自身边bai框到自身内部另一个容器边框之间的距离，就是容器内距离
  • padding取值和 margin 取法一致

display

  • 行级标签设置高宽不起作用
  • sblock 可以把行级元素变成块级元素
  • inline 可以把块级元素变成行级元素
  • inline-block 使标签具有行级和块级的特征，把块的独占一行特征取消了

浮动-float属性

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动
  • 浮动元素遇到障碍物则不浮动
  • 浮动元素的位置会被其他元素占用
  • 浮动的元素脱离文档流的标准布局格式
  • 如果后面有不浮动的元素，那么这些不浮动的元素还按照标准文档流的格式布局
  • 非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，块级元素边框和背景在浮动元素之下显示，只有内容在浮动元素“之上”显示，如果内容显示不出来，找个其他的地方显示
  • 浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示。
清除浮动
  • 不清除浮动会导致边框塌陷
  • 使用 clear：both; 清除浮动

定位（position）

属性值 说明
static 默认值，没有定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
相对定位（relative）
  • 相对自身原来位置进行偏移
  • 设置了相对定位的元素初始位置会被保留不会被其他元素占用
  • 偏移位置设置：top、left、right、bottom
  • 优先级：top > bottom ; left > right
  • 可以把标准流和浮动元素覆盖在下面
绝对定位（absolute）
  • 以父类元素为参照，否则以浏览器窗口为参照
  • 绝对定位的元素设置参照父级需要设置相对定位，但是不能设置偏移
  • 设置绝对定位的元素位置会被其他元素占用
  • 当参照对象是浏览器时，以整个页面做定位
固定定位（fixed）
  • 偏移设置：top、right、bottom、left
  • 类似于绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
  • 以当前浏览器视口做参照

CSS3基础及动画

下拉菜单实现

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

css边框

border-radius 圆角边框
  • border-radius: 20px 10px 50px 30px; 分别设置四个值，左上右上右下左下
  • 圆角值也能设置百分比大小，当值为50%时会呈现一个圆形，需要正方形
box-shadow 盒子阴影
box-shadow:(	h-shadow  /* 水平阴影的位置 */	v-shadow  /* 垂直阴影的位置 */	blur 	  /* 模糊距离 */	spread 	  /* 阴影的大小 */	color 	  /* 阴影的颜色 */	inset;	  /* 阴影类型内阴影 */);

背景

background-size 背景图片的尺寸
  • length 设置图片高度和宽度，第一个值是宽度，第二个是高度；如果只有一个值，第二个值默认为 auto
  • percentage 计算相对于背景定位区域的百分比，第一个值是宽度，第二个是高度；如果只有一个值，第二个值默认为 auto
  • cover 保持图像的纵横比并将图片缩放成完全覆盖背景定位区域的最小大小
  • contain 保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
background-origin 背景图片的区域
background-clip 背景图片的绘制区域
值 background-origin值说明 background-clip值说明
padding-box 背景图像相对于内边距框来定位 背景被裁剪到内边距框
border-box 背景图像相对于边框盒来定位 背景被裁剪到边框盒
content-box 背景图像相对于内容框来定位 背景被裁剪到内容框

z-index

z-index：num; num值越大，优先级越高，就会显示在最上面

不透明度设置

  • opacity: num; num值在0~1之间，默认为1即完全不透明 filter: alpha(opacity=50); 兼容IE
  • color: #00000050; 直接在16进制颜色后面加数值，数值取0~100之间的十位整数

渐变

线性渐变—— Linear Gradients

  • 颜色沿直线过度：从上至下、从左至右等

    linear-gradient(    position, /* 渐变的方向；默认从上至下；to right就是从左至右 */    color1,/* 第一种颜色 */    color2,/* 第二种颜色 */    ……);
径向渐变—— Radial Gradients

  • 圆形或椭圆形渐变，颜色从一个起点朝所有方向混合

    radial-gradient(    start-color, …… last-color);

文本效果

text-shadow 属性
值 说明
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
color 可选，阴影的颜色
text-overflow 属性
  • white-space:nowrap 文本不会换行，在同一行继续
  • overflow:hidden 溢出隐藏
  • text-overflow:ellipsis 用省略号来代表被修剪的文本

艺术字体

@font-face {          font-family: 必需。规定字体的名称          src: 必需。定义字体文件的 URL          font-weight: 可选。定义字体的粗细。默认是 "normal"          font-style: 可选。定义字体的样式。默认是 "normal"}

<style>		@font-face{			font-family: myfont;			src: url(fonts/shimesone_personal-webfont.eot);            src: url(fonts/shimesone_personal-webfont.svg);            src: url(fonts/shimesone_personal-webfont.ttf);            src: url(fonts/shimesone_personal-webfont.woff);            font-weight: normal;            font-style: normal;		}		h1{			font-family: myfont;			font-size: 80px;		}</style><body>	<h1>This is a long text</h1></body>

CSS3变形

  • 变形是一些效果的集合，如：平移、旋转、缩放、倾斜等

    transform:	transform-function;  /* 变形函数 可以是多个 中间以空格隔开 */
变形函数
  • translate()：平移函数，基于X，Y坐标重新定位元素的位置
  • scale()：缩放函数，可以使任意元素对象尺寸发生变化
  • rotate()：旋转函数，取值是一个度数值（deg）
  • skew()：倾斜函数，取值是度数值
2D位移（translate）
translate(tx,  /* X轴，横坐标的位移长度 */	ty); /* 纵坐标的位移长度 */
  • 单方向位移 translate(0, 100px) 只移动Y轴坐标
2D缩放(scale)
  • scale(sx, sy);
  • sanle 函数可以只接收一个值，只有一个值时第二个值默认与第一个值相等
2D倾斜(skew)
  • skew(sx, sy);
  • 可以仅设置一个值，表示只有 X或者Y 倾斜
2D旋转
  • rotate(a) 参数 a 单位使用 deg 表示
  • 参数 a 取正值时，元素相对原位置顺时针旋转
  • div:hover{transform:rotate(20deg) ;}
  • animation语法
  • img

CSS3过渡

transition 呈现的时一种动画转换过程，如渐现、渐弱、动画快慢等。 transition 通过一些CSS的简单动作触发样式 平滑过渡

transition: 	transition-property /* 过渡或动态模拟的css属性 */	transition-duration /* 完成过渡需要的时间 */	transition-timing-function /* 指定过度函数 */	transition-delay /* 过渡开始出现的延迟时间 */

/* 示例 */div{	background-color: red;	width: 200px;	height: 200px;	transition: background-color 3s ease-in-out;}div:hover{	background-color: yellow;}
过渡属性（transition-property）
  • 定义转换动画的CSS属性名称
  • 指定的CSS属性：width、height、background-color 等属性
  • 一般为了方便都会使用 all
过渡所需的时间（transition-duration）
  • 定义转换动画的时间长度，即从旧属性转换到新属性需要的时间
  • 单位为秒 （S）
过渡动画函数（transition-timing-function）

  • 指定浏览器的过渡速度，以及过渡周期的操作进展情况

  • 通过给过渡添加一个函数来指定动画的快慢方式

值 说明
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
过渡延迟时间（transition-delay）
  • 指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
  • 正值：元素过渡效果不会立即触发，当过了设置事件后才触发
  • 负值：元素过渡效果从该时间点开始显示，之前的动作被截断
  • 0：默认值，元素过渡效果立即执行
过渡的触发机制

  • 伪类触发：:hover,    :active,    :focus,    :checked

  • 媒体查询：通过 @media 属性判断设备尺寸、方向等

  • JavaScript触发：通过 JavaScript 脚本触发

CSS3动画

JavaScript（typescript）

JavaScript基础

JavaScript 是一种基于对象和事件驱动的、具有安全性能的脚本语言
JavaScript 的特点

向HTML页面添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

JavaScript组成：ECMAScript + DOM + BOM

JavaScript基本结构

<script type="text/javascript"/>
    执行语句;
</script>

JavaScript的应用

<script type="text/javascript">
	document.write("hello, world");    
</script>
  • document.whrite() 起到输出数据的作用
  • <script>...</script> 可以包含在文档的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

网页中引用JavaScript文件的方式

  • 使用 <script>标签引入，放在网页标签后，等待网页标签加载完成再加载JS
  • 外部 JS 文件 <script src="export.js type="text/javascript></script>；外部文件不能包含<script>标签
  • 直接在 HTML 标签中写
<input name="btn" type="button" value="清除缓存" 
 onclick="javascript:alter("清除成功");"/>

JavaScript 核心语法

变量

​ 变量就是一个助记符号，帮助我们记忆计算机内存地址

​ js的数据类型由变量当前值进行判断（弱类型）

  • 变量名区分大小写

先声明变量在赋值 var width; width = 5;

var - 用于声明变量的关键字；width - 变量名

同时声明和赋值变量

var catName="皮皮"; var x,y,z = 10;

不声明直接赋值

不声明直接赋值容易出错，且不易排查，不推荐使用

JavaScript 区分大小写，特别是变量的命名、语句关键字等

数据类型
  • undefined var width; 变量width没有初始值，将被赋予值undefined
  • null 表示一个空值，与undefined值相等
  • number var iNum = 23;整数 var iNum="23.0";浮点数
  • boolean 布尔值，true和false
  • string 一组被引号(单、双引号)括起来的文本， var string1="this is a string";
typeof运算符

typeof 运算符返回值如下

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

Boolean：true 或false

number：整数或浮点数

object：JavaScript 中的对象、数组和null

运算符

  • += 、-=、*=、/= 赋值运算符

  • == 和 === 双等只要求相等，三等号需要

  • 用于一般比较，=用于严格比较，在比较的时候可以转换数据类型，
    =严格比较，只要类型不匹配就返回false。
    举例说明：
    "1" == true
    类型不同，"    "将先做类型转换，把true转换为1，即为 "1" == 1；
    此时，类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1；
    此时，"    " 左右两边的类型都为数值型，比较成功！
    如果比较："1" === true 左侧为字符型，右侧为bool布尔型，
    左右两侧类型不同，结果为false；
    如果比较："1" === 1 左侧为字符型，右侧为int数值型，
    左右两侧类型不同，结果为false；
    如果比较： 1 === 1 左侧为int数值型，右侧为int数值型，
    左右两侧类型相同，数值大小也相同，结果为true；
    如果比较： 1 === 2 左侧为int数值型，右侧为int数值型，
    左右两侧类型相同，但数值大小不同，结果为false；
    简而言之就是 "" 只要求值相等; "=" 要求值和类型都相等

数值交换

  • 位运算

    var num1 = 12, num2 = 13;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
alert(num1 +"_"+ num2);
string 对象

字符串对象.方法名()；

lenght 属性：返回字符串的长度；

var str="hello"; document.write(str.lenght); 返回 5

charAt(index)：返回在指定位置的字符

var str="hello"; document.write(str.charAT(2)); 返回 e

indexOf(str, index)：自 index 后查找 str 首次出现的位置；如果字符串不存在则返回 -1

var str="hello"; document.write(str.indexOf("e")); 返回1

substring(index1, index2)：返回位于index1和index2之间的字符串，包含index1，不包含index2

var str="hello"; document.write(1,4); 返回 ell

split(str)：将字符串分割为字符串数组

var string1="hello"; document.write(string1.split("")); 返回 h,e,l,l,o

str.substring()方法：提取字符串介于指定下标之间的字符

let str="0123";str = str.substring(str.length,1); 输出 123

数组
  • 数组具有地址连续性的特征
  • 数组下标不存在越界的问题，数组本身会动态扩容，值为undefined
  • 同一个数组里面的元素类型可以是不相同的
创建数组
  • var Aname = new Array(size);
  • Array 表示数组的关键字； size 表示数组中可存放的元素总数
  • var arr1= [1,2,3,4];
为数据元素赋值

  • 直接赋值 var fruit= new Array("apple", "orange", "peach","banana");

  • <script>	var fruit = new Array(4);	fruit [0] = " apple ";	fruit [1] = " orange ";	fruit [2] = " peach ";	fruit [3] = " banana ";   </script>
访问数组
  • 数组名[下标]
  • document.write(fruit[0]) 返回 apple
数组操作

  • 修改数组内容 var arr= [1,2,3]; arr[1]= 5;

  • 删除数组元素 splice(index, num, "替换值")

    var arr = ['a','b','a','b','c','a','d','d'];	var j = 0;	while (j < arr.length){		for(var i = j + 1; i < arr.length; i++){			if(arr[j] === arr[i]){				arr.splice(i,1);			}		}		j++;	}
数组的常用属性和方法
  • length 属性 设置或返回数组中元素的数量

方法

join()：把数组的所有元素放入一个字符串，通过一个分隔符进行分隔

<script>  var arr1=[1,2,3,4];  alert(arr1.join("·"));</script>

sort()：对数组排序

pop()：删除数组末尾的元素

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

<script>      var arr1=[5,9,3,4];  alert(arr1.push("0")); //返回 5  alert(arr1) //返回5，9，3，4，0</script>
逻辑控制语句
if条件语句
  • 第一次遇到条件成立，就立即执行
  • 前面条件成立，后面的条件就不会继续判断，直接终止选择
switch多分支语句
var i= 1;        switch(i){            case 1:                alert("1");                break;            case 10:                alert("10");                break;            default:                alert("None");}

switch (operator){	case "-":		var sum = (num0 - num1);		break;	case "+":		var sum = parseInt(num0) + parseInt(num1);        //强制类型转换，在获取到值后乘一再计算也可以做到强制类型转换		break;	case "*":		var sum = (num0 * num1);		break;	case "/":		var sum = (num0 / num1);		break;	default:  //可以不带后续内容		break;}
  • 等值判断
  • 每条语句结束都要加上 break终止循环 ，不加就会依次执行
  • default语句 在所有条件都不满足的时候默认执行
for循环
  • for(初始化; 条件; 增量) 三者可以随机组合，若不带则是死循环
while循环语句
var i = 0;        while(i < 5){        alert(i);        i++;}
for-in
var fruit = ["apple", "orange", "peach", "banana"];		for(var i in fruit){			document.write(fruit[i] + "<br/>");		}
循环中断
break
  • 完全终止循环
continue
  • 终止本次循环，继续下一轮循环
注释
  • 单行注释 //以双斜线开始，行末自动结束
  • 多行注释 /* 里面的内容不被解析 */
常用的输入/输出

alert()：在浏览器页面弹窗输出

console.log()：浏览器控制台输出

prompt()；弹窗显示输入框

prompt("提示信息", "输入框默认展示信息")

var year= prompt("请输入年份");alert(year);

程序调试

  • 错误代码定位，在正常运行的代码后加上分割代码
  • 浏览器设置断点

函数

  • 函数的含义：是完成特定任务的代码语句块
  • 使用简单：不用定义属于某个类，直接使用
  • 函数分类：系统函数和自定义函数
常用系统函数
parselnt(“字符串”)
  • 将字符串转换为整型数字 parseInt("99");
  • var str="88"; var num = parseInt(str); num的类型为number型
parseFloat("字符串")
  • 将字符串转换为浮点型数字
isNaN()
  • 用于检查其参数是否为数字
自定义函数

  • 定义函数parameter：传入参数，相当于前提，可以有多个也可以不带

    function name(parameter.) //不带parameter是无参函数 {    //javascript 语句    [return返回值]  //可以不要}

  • 调用函数

    函数调用一般和表单元素事件一起使用

    调用格式 event_name= "function_name()";

调用无参函数
<form>	    <input type="button" value="点击就做俯卧撑" onclick="study()"/></form><script type="text/javascript">	    function study(){			for (var i= 0; i< 9999;i++){		    	alert(i +"个");			}	    }</script>
调用有参函数
<form>    <input type="button" value="输出"onclick="study(prompt('输入次数：'))"/></form><script>    function study(count){        for(i=0; i<count;i++){            alert(i);        }    }</script>

变量的作用域

var i = 20; //全局变量    function first(){      var i = 5;  //局部变量      for(var j = 0; j < i; j++){          document.write("&nbsp;&nbsp;&nbsp;&nbsp;" + j);      }    }     function second(){        var t = prompt("请输入一个数：", '');        if(t > i)             document.write(t);        else             document.write(i);        	 first();      }
全局变量
局部变量
  • 如果出现全局和局部变量同名，在函数里局部变量优先使用
  • 局部变量只能在本函数内使用

事件

  • 事件就是用户对网页或浏览器做出的动作
名称 说明
onload 一个页面或一幅图像完成加载
onlick 鼠标单击某个对象
onmouseover 鼠标指导移到某元素上
onkeydown 某个键盘按键被按下
onchange 域的内容被改变
onmouseout 鼠标从某元素上移开 
<input type="button" value="按钮0" onclick="alert('onclick')"/><br/><input type="button" value="按钮1" onmouseover="alert('onmouseover')"/><br/> <input type="button" value="按钮2" onmouseout="alert('onmouseout')"/><br/><input type="button" value="按钮3" onmousedown="alert('onmousedown')"/><br/>
  • 键盘按键事件，输出可打印字符。
<input type="text" onkeydown='fn()'/><br/><input type="text" onkeyup='fn()'/><br/><input type="text" onkeypress='fn()'/><br/><script>   function fn(){       alert(event.key);       alert(event.keyCode);   }</script>
  • 焦点事件
<input type="text" value="change" onchange="fn1()"/> //内容发生改变并丢失焦点时触发<input type="text" value="foucus" onfocus="fn2()"/> //获取到焦点时触发<input type="text" value="blur" onblur="fn3()"> //焦点丢失后触发<script>    function fn1(){        alert('change');    }    function fn2(){        alert('focus');    }    function fn3(){        alert('blur');    }</script>

JavaScript操作BOM对象

BOM模型

image-20210323132817777

浏览器对象模型
BOM可实现功能
  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 页面的前进、后退

window对象

控制窗口，通过操作对象上的属性和方法，达到控制窗口对象的目的

window.属性名 = "属性值";

  • 常用属性

history: 有关客户访问过的URL

window.history.back(); //返回上一级页面
history常用方法

back() 加载history对象前一个URL链接地址

forward() 加载history对象下一个URL链接地址

go() 加载history对象中的某个具体的URL链接地址

history.back() === history.go(-1);

history.forward() === history.go(1);

location：有关当前URL的信息

window.location = "http://www.baidu.com",'_self';//'_self'  在当前页面打开，不带则是跳转到一个新窗口
location常用属性

host 设置或返回主机名和当前URL的端口号

hostname 设置或返回当前URL的主机名

href 设置或返回完整的URL

var href = window.location.href;
location常用方法

reload() 重新加载当前文档

replace() 用新的文档替换当前文档

location和history对象的应用
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  <a href="javascript:location.reload()">刷新本页</a><a href="javascript:history.back()">返回主页面</a>//方法前面带上 javascript：提示浏览器
  • 常用方法
方法名称 说 明
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) **显示一个带有提示信息、确定和取消按钮的对话框 **
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式

confirm()方法弹出一个确认对话框

confirm() 与 alert()、prompt() 的区别

alert()：一个参数,仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt()：两个参数，输入对话框，用来提示用户输入一些信息，单击 取消 按钮则返回null，单击 确定 按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。

confirm()：一个参数，确认对话框，显示提示对话框的消息、确定 按钮和 取消 按钮，单击 确定 按钮返回 true，单击 取消 按钮返回 false，因此与 if-else 语句搭配使用

setTimeout()方法 在规定时间后执行某个操作就停止

window.setTimeout('alert("你等了两秒")',2000); //输出一次：你等了两秒

setInterval()方法 会一直按照时间周期循环

time = window.setTimeout('alert("你等了两秒")',2000); //每两秒输出一次：你等了两秒clearInterval(time); //停止循环

Document对象

常用属性
名称 说 明
referrer (document.referrer) 返回载入当前文档的URL
URL (document.URL) **返回当前文档的URL **
Document对象的常用方法
名称 说 明
getElementById() 返回对拥有指定id的第一个对象的引用 （对象的ID唯一性）
getElementsByName() 返回带有指定名称的对象的集合 （相同name属性）
getElementsByTagName() 返回带有指定标签名的对象的集合 （相同的元素）
write() 向文档写文本、HTML表达式或JavaScript代码
动态改变层、标签中的内容
document.getElementById("book").innerHTML="现象级全球畅销书";// innerHTML 替换原标签中的内容
document.querySelector()方法
  • queryselector()方法只会返回匹配选择器的第一个元素
  • 获取文档中 id = "demo" 的元素：document.querySelector("#demo");
document.querySelectorAll()方法
  • 返回文档中匹配指定的所有元素，返回NodeList对象
  • 返回的数组可以通过下标访问，通过获取下标实现元素调用

JavaScript内置对象

  • Array：用于在单独的变量名中存储一系列的值
  • String：用于支持对字符串的处理
  • Math：用于执行常用的数字任务，它包含了若干个数字常量和函数
  • Date：用于操作日期和时间
Date对象

  • var日期对象 = new Date();

    • var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");
常用方法
方法 说 明
getDate() 返回 Date 对象的一个月中的每一天，其值介于1~31之间
getDay() 返回 Date 对象的星期中的每一天，其值介于0~6之间
getHours() 返回 Date 对象的小时数，其值介于0~23之间
getMinutes() 返回 Date 对象的分钟数，其值介于0~59之间
getSeconds() 返回 Date 对象的秒数，其值介于0～59之间
getMonth() 返回 Date 对象的月份，其值介于0～11之间
getFullYear() 返回 Date对象的年份，其值为4位数
getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
Math对象
常用方法
  • 四舍五入方法：fiexed(2) 取小数点后两位
  • 生成一个 x-y的随机数： Math.round(Math.random()*(y-x)+x);
方法 说 明 示例
ceil() 对数进行上舍入 Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor() 对数进行下舍入 Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round() 把数四舍五入为最接近的数 Math.round(25.5);返回26 Math.round(-25.5);返回-26
random() 返回0~1之间的随机数 Math.random();例如：0.6273608814137365

  • 实现整数返回范围为 2~99

  • var iNum=Math.floor(Math.random()*98+2);
定时函数

setTimeout()

setTimeout("调用的函数",等待的毫秒数);var myTime＝setTimeout("disptime() ", 1000 ); //1秒，1000ms后执行

setInterval()

setInterval("调用的函数",间隔的毫秒数)var  myTime＝setInterval("disptime() ", 1000 );//如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

清除函数

clearTimeout()

//clearTimeout(setTimeOut()返回的ID值)var  myTime＝setTimeout("disptime() ", 1000 );clearTimeout(myTime)；

clearInterval()

//clearInterval(setInterval()返回的ID值)var  myTime＝setInterval("disptime() ", 1000 );clearInterval(myTime)

总结

image-20210328224523181

JavaScript操作DOM对象

访问节点

  • 使用getElementBy系列方法访问
    • ngetElementById()、getElementsByName()、getElementsByTagName()
  • 根据层次关系访问节点
  • 根据querySelector || querySelectorAll访问
根据层次关系访问节点
节点属性
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
Element属性
属性名称 描述
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点 
oNext = oParent.nextElementSibling || oParent.nextSibling   oPre = oParent.previousElementSibling || oParent.previousSibling  oFirst = oParent. firstElementChild  ||  oParent.firstChild   oLast = oParent.lastElementChild || oParent.lastChild
节点信息
  • nodeName：节点名称
  • nodeValue：节点值
  • nodeType：节点类型

操作节点

javascript事件
名称 描述
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
操作节点属性

  • getAttribute("属性名");

  • setAttribute("属性名", "属性值");

    • img.setAttribute("src", "images/dog.jpg");img.src= "images/mai.jpg";  //不使用 setAttribute 操作属性；

  • 附加属性： 添加标签中不存在的属性，方便编程调用

    • img.aaa = "aaa";img.setAttribute("src", "images/dog.jpg");alert(document.getElementById("image").aaa); //访问添加的属性

  • 复制节点：cloneNode 的值默认为 false，只复制子节点；为true时复制内部所有节点以及属性值

    • function copyNode(){	var bName = document.getElementsByTagName("div")[0];	var copy = bName.lastChild.cloneNode(false);	bName.insertBefore(copy, bName.firstChild);}
创建和插入节点
名称 描述
createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点 
var img = document.createElement("img");img.setAttribute("src", "images/dog.jpg"); //可以直接写：img.src="";img.setAttribute("alt", "狗和我一起活下来");//information.appendChild(infor);//informations.insertBefore(information, informations.childNodes[0]);
删除和替换节点
名称 描述
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点 
var delNode=document.getElementById("first");delNode.parentNode.removeChild(delNode);var oldNode=document.getElementById("second");var newNode=document.createElement("img");newNode.setAttribute("src","images/f03.jpg");oldNode.parentNode.replaceChild(newNode,oldNode);
操作节点样式
style属性
  • HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";//在设置样式时，需要中线拼接的单词改为小驼峰写法即可
className属性
  • HTML元素.className="样式名称"
function over(){    document.getElementById("cart").className="cartOver";    document.getElementById("cartList").className="cartListOver";}function out(){    document.getElementById("cart").className="cartOut";    document.getElementById("cartList").className="cartListOut";}
获取元素样式
  • HTML元素.style.样式属性;
alert(document.getElementById("cartList").display);document.defaultView.getComputedStyle(元素,null).属性;var cartList=document.getElementById("cartList");alert(document.defaultView.getComputedStyle(cartList,null).display);//HTML元素. currentStyle.样式属性;alert(document.getElementById("cartList").currentStyle.display);//getComputedStyle()不支持IE；currentStyle支持IE

获取元素位置

HTML中元素属性
属性 描述
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度 
//标准浏览器document.documentElement.scrollTop;document.documentElement.scrollLeft;//Chromedocument.body.scrollTop;document.body.scrollLeft;var sTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容

总结

image-20210328231239548

ES6

strict 语法

  • 如果一个变量不使用var申明就使用，那么该变量就自动申明为全局变量
  • 启用strict模式：在JavaScript部分头部加上 'use strict'

字符串操作

拼接
var name = "小明";
var age = 18;
var message0 = "你好" + name +",你今年" + age + "岁了！"
//使用 + 号拼接
var message1 = `你好，${name}, 你今年${age}岁了！`;
// 使用反单引号

  • 字符串可以通过下标获取对应位置的元素，可以通过 length()方法获取字符串长度

  • 字符串内部内容不可以更改

  • 字符串全部大写或小写：str.toUpperCase()，str.toLowerCase()

返回指定索引区间单独子串 substring()
var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'
搜索指定字符出现的位置 indexof()
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串，返回-1
全大写 && 全小写
 // toUpperCase() 把一个字符串全部变为大写
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
 // toLowerCase()把一个字符串全部变为小写：
var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
lower; // 'hello'

数组

  • 获取元素在数组内的下标；如果数组内没有该元素则返回 -1

  • var arr = [1,2,3,4,5,90]; alert(arr.indexOf(3));

  • 截取 slice()

    • var arr0 = ['a', 'b', 'c', 'd', 'e'];
var newArr1 = arr0.slice(0, 3);
console.log(newArr1); // 输出第零位到第三位的元素，左闭右开
var newArr2 = arr0.slice(3);
console.log(newArr2); // 输出第三位开始后面的所有元素

  • push()和pop()方法

    • push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：

    • var arr = [1, 2];arr.push('A', 'B'); // 返回Array新的长度: 4arr; // [1, 2, 'A', 'B']arr.pop(); // pop()返回'B'arr; // [1, 2, 'A']arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次arr; // []arr.pop(); // 空数组继续pop不会报错，而是返回undefinedarr; // []

  • unshift()和shift

    • 如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

    • var arr = [1, 2];arr.unshift('A', 'B'); // 返回Array新的长度: 4arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错，而是返回undefinedarr; // []

  • splice()

    • splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

    • var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 只删除,不添加:arr.splice(2, 2); // ['Google', 'Facebook']arr; // ['Microsoft', 'Apple', 'Oracle']// 只添加,不删除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

  • concat()

    • concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：

    • var arr = ['A', 'B', 'C'];var added = arr.concat([1, 2, 3]);added; // ['A', 'B', 'C', 1, 2, 3]arr; // ['A', 'B', 'C']

    • concat()方法并没有修改当前Array，而是返回了一个新的Array。

    • 实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：

    • var arr = ['A', 'B', 'C'];arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

面向对象

  • JavaScript 的对象是一种无序的几何数据类型

    • var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};
// 获取对象的属性
xiaoming.name; // '小明'
xiaoming.birth; // 1990

    • 访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括起来；访问这个属性也无法使用.操作符，必须用['xxx']来访问；

    • var xiaohong = {
    name: '小红',
    'middle-school': 'No.1 Middle School'
};
 // 访问属性
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'

    • 如果访问不存在的值，JavaScript并不会报错，而是返回undefined

给对象添加和删除属性

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

检测对象是否拥有某一属性，用 in 操作符

var xiaoming = {    name: '小明',    birth: 1990,    school: 'No.1 Middle School',    height: 1.70,    weight: 65,    score: null};'name' in xiaoming; // true'grade' in xiaoming; // false

  • 如果in判断一个属性存在，这个属性不一定是对象自身的，它可能是继承得到的：

  • 因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

  • 要判断一个属性是否是自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

  • var xiaoming = {    name: '小明'};xiaoming.hasOwnProperty('name'); // truexiaoming.hasOwnProperty('toString'); // false

构造函数

function Student(name) {    this.name = name;    this.hello = function () {        alert('Hello, ' + this.name + '!');    }}var xiaoming = new Student('小明');xiaoming.name; // '小明'xiaoming.hello(); // Hello, 小明!
  • 如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。

原型链

image-20210402084911291

原型继承
  • JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。

函数

函数的定义和调用

  • 函数体内部的语句在执行时，一旦执行到return语句时就结束，并返回结果，如果没有return语句就返回undefined

  • function abs(x) {    if (x >= 0) {        return x;    } else {        return -x;    }}// abs() 函数是一个函数对象，函数名 abs可以认作是指向函数的变量// 匿名函数var abs = function (x) {    if (x >= 0) {        return x;    } else {        return -x;    }}; // 需要在函数结束带上分号表示赋值结束// 上述两种写法是等价的

  • 匿名函数将函数赋值给了变量 abs，可以通过 abs 调用该函数

  • 函数在传值的时候个数不受影响，函数内部不会接受多余的函数，但是传值过少则会返回错误的值

arguments 方法
  • 永远指向当前函数的调用者传入的所有参数
  • arguments 类似一个数组，但不是数组
  • arguments 可以获得调用者传入的所有参数，如果函数不定义任何参数则获取到0
for in && for of

  • for of 可以直接取出对应下标的值

  • for in 则取出对应下标

  • function foo(a, b, ...rest){    var result = 0;    for(var i of  arguments){        result += i;    }    return result;}a = foo(9, 2, 3, 4, 5, 6);alert(a);
rest 参数
  • function foo(a, b, ...rest) {    console.log('a = ' + a);    console.log('b = ' + b);    console.log(rest);}// 只获取a，b两个参数，后面的参数自动生成为一个数组

  • rest 参数只能写在最后，前面用 ... 标识

  • 如果前面的参数未传满，则前面的参数为 undefined，rest则接收一个空数组

变量作用域与解构赋值

  • 变量在函数体内部声明则作用域为整个函数体，在函数体外不可调用
  • 不同函数体内部声明的相同名称的变量相互独立，互不影响
  • JavaScript的函数可以嵌套，内部函数可以访问外部定义的变量，反之则不行
  • 如果内部函数变量名与外部相同，函数会使用内部的变量
变量提升

  • JavaScript的函数定义会先扫描整个函数体语句，叭所有声明的变量提到函数顶部，但是只会提升定义，不会提升赋值

  • function foo() {    var x = 'Hello, ' + y;    console.log(x);    var y = 'Bob';} // 输出 Hello undefined;
全局作用域

  • 未在任何函数体内定义的变量就具有全局作用域，JavaScript默认的全局对象是 window，全局作用域的变量会被绑定到window的属性上

  • var course = 'Learn JavaScript';alert(course); // 'Learn JavaScript'alert(window.course); // 'Learn JavaScript'

  • 因此，以变量方式 var foo = function(){}l; 定义的函数实际也是一个全局变量，直接访问 foo() 和访问 window.foo()是一样的

  • 减少名字冲突的一个办法是把自己所有的变量和函数全部绑定到一个全局变量中

  • // 唯一的全局变量MYAPP:var MYAPP = {};// 其他变量:MYAPP.name = 'myapp';MYAPP.version = 1.0;// 其他函数:MYAPP.foo = function () {    return 'foo';};
局部作用域
  • JavaScript的变量作用域是在函数体内部，所以无法在循环语句块中定义具有局部作用的变量；因此需要使用 let关键字 来替代 var
  • 由于 var 和 let 声明的是变量，所以ES6引入了新的关键字 const 来定义常量。const 和 let 都具有块级作用域
解构赋值

  • 可以实现同时对多个变量赋值

  • 使用解构赋值时如果对应的属性不存在变量将赋值为 undefined

  • var array = ['hello', 'JavaScript', 'ES6'];var x = array[0];var y = array[1];var z = array[2];var [x, y, z] = ['hello', 'JavaScript', 'ES6'];// 嵌套赋值let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];// 忽略某些元素进行赋值let [, , z] = ['hello', 'JavaScript', 'ES6'];// 从对象里面取出嵌套元素var person = {    name: '小明',    age: 20,    gender: 'male',    passport: 'G-12345678',    school: 'No.4 middle school',    address: {        city: 'Beijing',        street: 'No.1 Road',        zipcode: '100001'    }};var {name, address: {city, zip}} = person;// 如果使用的变量与属性名不一致可以给将属性值赋给变量let {name, passport:id} = person;// 也可以修改他的默认值var {name, single=true} = person;// 如果变量已经被声明再赋值会报错var x, y;{x, y} = { name: '小明', x: 100, y: 200};// 因为JavaScript把以大括号开头当作了块处理，=就不合法，用小括号括起来就ok({x, y} = { name: '小明', x: 100, y: 200});

  • 使用解构赋值来交换变量的值，不需要临时变量

    var x=1, y=2;[x, y] = [y, x]// 快速获取当前页面的域名和路径var {hostname:domain, pathname:path} = location;

sort函数

  • 直接使用sort()排序会按照ASCII码进行排序，如果是数字的话会自动识别成字符串按照首位数字的ASCII码进行排序

  • // 使用 sort() 方法对数字进行排序arr.sort(function (x, y) {    if (x < y) {        return -1;    }    if (x > y) {        return 1;    }    return 0;});

  • // 将所有字符串首字母大写再排序var arr = ['Google', 'apple', 'Microsoft'];arr.sort(function (s1, s2) {    x1 = s1.toUpperCase();    x2 = s2.toUpperCase();    if (x1 < x2) {        return -1;    }    if (x1 > x2) {        return 1;    }    return 0;});

异常处理

  • 如果一个函数内部出现了错误，但是它本身没有try…catch 那错误就会被抛到外部函数上去如果一直没有被捕获就会一直向外抛出直至被JavaScript引擎获取，代码终止

try……catch……finally

  • var r1, r2, s = null;
try {
    r1 = s.length; // 此处应产生错误
    r2 = 100; // 该语句不会执行
} catch (e) {
    console.log('出错了：' + e);
} finally {
    console.log('finally');
}
console.log('r1 = ' + r1); // r1应为undefined
console.log('r2 = ' + r2); // r2应为undefined

  • 可以不带finally直接catch，也可以catch不带finally

抛出错误

  • 主动抛出一个错误，让执行流程直接跳转到catch块。抛出错误使用throw语句

  • if(typeof x !== 'number'){
	throw 'Not a number!'; // 手动产生一个错误，阻止程序继续执行
}

闭包

  • 返回函数不要引用任何循环变量或者后续会发生变化的变量

  • function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 16
f2(); // 16
f3(); // 16

  • 返回的是一个函数体需要再进行调用才能获得最后的值

箭头函数

  • x => x * x// 等价于function (x) {    return x * x;}

  • 箭头函数相当于匿名函数，并且简化了函数定义，包含多行语句时就不能省略花括号以及里面的return语句

  • // 包含多个表达式x => {    if (x > 0) {        return x * x;    }    else {        return - x * x;    }}

  • 如果返回的是一个对象，需要注意写法

  • // 错误写法x => { foo: x }// 正确写法x => ({ foo: x })

Less

作用域

  • less 变量的作用域与js一致，都是优先使用本身的作用域内寻找对应的变量
  • 如果有同名的变量，后面的变量会覆盖前一个变量

嵌套

  • 与 css 的后代选择器同理，在父元素内添加子元素的样式

  • @hcolor: red;.header{    font-size: 20px;    .nav{ // nav是header的子元素        float: left;        background-color: @hcolor;    }    .logo{        float: left;        width: 300px;    }}

运算

  • @width: 200px;@height: @width + 10px;.header{    width: @width;    height: @height;    background-color: red;}

  • 支持加减乘除运算，不支持取余

&号的使用

  • 使用 & 符号选择父标签并设置伪类，如果设置伪类不带 & 则无效

  • .header{    color: black;    .nav {        font-size: 20px;    }    .logo {        width: 300px;        &:hover{            text-decoration: line-through;        }    }}

混合

  • 混合即是JavaScript内的函数，有带参和不带参两种形式

  • 给混合名称带上小括号混合体就不会在css中出现，不带则会原样解析在css中

  • // 不带参.less-mixins(){ // 命名带上() less 的混合就不在 css 内不编译    float: left;    width: 200px;    height: 200px;}.div1{    .less-mixins;    background-color: green;}.div2{    .less-mixins;    background-color: red;}

  • // 带参数.border-radius(@radius){    border-radius: @radius;    -moz-border-radius: @radius;    -webkit-border-radius: @radius;    border: 3px solid red;    height: 100px;    width: 100px;}#header{    .border-radius(6px)}.border-radius2(@radius: 5px){    border-radius:  @radius;    -moz-border-radius: @radius;    -webkit-border-radius: @radius;    border: 3px solid red;    height: 100px;    width: 100px;}#header2{    .border-radius2;}

继承

  • 关键字： extend。直接指定对应的混合体

  • .less-mixins{
    width: 200px;
    height: 200px;
}
#div1{
    &:extend(.less-mixins);
    background-color: green;
}
#div2{
    &:extend(.less-mixins);
    background-color: red;
}

移动端开发

移动端基础

  • 手机上默认的布局视口宽度：主要缩放，适应PC端的页面宽度
  • window.onresize = function(){}; 当浏览器变化大小时执行方法
  • vh 单位：1vh表示浏览器高度的 1%。
  • user-select: none; 可以让网页中的文字不能被选中

js获取当前屏幕宽高

Javascript:

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth


JQuery:

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})

视口

  • 浏览器显示页面内容的屏幕区域

  • 设置视口可以缩小网页的尺寸，保证网页在手机上正常显示

  • image-20210416112242961

  • meta视口标签存在的目的是让布局视口的尺寸和理想视口的尺寸匹配。它是Apple发明的，其他手机和平板复制了它的大部分内容。桌面浏览器不支持它，也不需要它，因为它们没有理想视口的概念。meta视口标签应该被放在文档的head标签中

  • width：主要目的是把布局视口的尺寸设为一个理想的值。那个这个特定的值可以设置为一个具体的像素值。不过默认值为“device-width”，即让布局视口的宽度等于设备的宽度。这样可以灵活的变通，而不用考虑设备的尺寸变化。initial-scale：设置了页面的初始缩放程度。1代表100%，2表示200%，以此类推。minimum-scale和maximum-scale：设置缩放程度的最小值和最大值。容易出现的问题是修改了initial-scale的值，发现没有任何效果，原因是没修改maximum-scale的默认值。如果最大缩放程度为1，无论把initial-scale改为几都没用。

布局视口 layout viewport
  • document.documentElement.clientWidth/Height 返回的是布局视口的尺寸
  • 在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。
  • image-20210416111900196
视觉视口 visual viewport
  • js获取视觉视口：window.innerWidth；
  • 指用户看到的网页区域。用户可以缩放屏幕，操作的是视觉视口，但是不管用户怎么缩放都不会影响到布局视口的宽度
  • image-20210416111942596
理想视口 ideal viewport

  • js获取理想视口：window.screen.width

  • <meta name="viewport" content="width=device-width, initial-scale=1.0 "/>; // 理想视口实现

  • 指布局视口的一个理想状态，只有当布局视口等于设备宽度时才是理想视口

  • image-20210416112002107

em、rem使用场景

  • em
    • 通常不使用 em 单位控制字体大小
    • 首行缩进：text-indent: 2em;
  • rem
    • 一切可扩展都应该使用 rem 单位
    • 响应式网站可以使用 rem 去做适配
  • 不要使用 em 或 rem
    • 多列元素
    • 当元素应该是严格不可缩放的时候

总结

自适应和响应式布局

  • 响应式覆盖了自适应
  • 响应式布局不仅是自适应，同时会改变排列方式
  • 判断浏览器终端类型

Swiper 插件

响应式网页设计

  • 写一套网页可以适应不同终端
  • 响应式网页设计（RWD，Responsive Web Design）
  • 有三种开发技术：弹性布局、弹性图片、媒体和媒体查询
媒体查询
  • 媒体类型
值 设备类型
All 所有设备
Braille 盲人用点字法触觉回馈设备
Embossed 盲人打印机
Handheld 便携设备
Print 打印用纸或打印预览视图
Projection 各种投影设备
Screen 电脑显示器
Speech 语音或音频合成器
Tv 电视机类型设备
Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

  • 媒体类型引入方式

    • @media方式 @media 媒体类型 { 选择器{ /样式代码写在这里…/ } }

    • link 方法 <link rel="stylesheet" href ="style.css" media="媒体类型" />

    • @import中引入

      <style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">  
    @import url("css/style.css");  
</style>

  • 媒体特性：“媒体类型（判断条件）+ CSS（符合条件的样式规则）”

  • 媒体特征语法：@media 媒体类型 and （媒体特性）

  • 关键字

    • and：同时满足才生效

      @media screen and （max-width：1200px）

    • only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

      <link href = "style.css" media = " only screen and (max-width**：500px) " />

    • not：排除某种指定的媒体类型，即排除符合表达式的设备

      @media not print and （max-width：1200px）{样式代码…}

属 性 值 Min/Max 描 述
device-width Length Yes 设置屏幕的输出宽度
device-height Length Yes 设置屏幕的输出高度
width Length Yes 渲染界面的宽度
height Length Yes 渲染界面的高度
Orientation Portrait/landscape No 横屏或竖屏
Resolution 分辨率（dpi/dpcm） Yes 分辨率
Color 整数 Yes 每种色彩的字节数
color-index 整数 Yes 色彩表中的色彩数

响应式布局的优缺点

  • 优点
    • 不同分辨率设备灵活性强
    • 多终端视觉和操作体验好
    • 响应式web设计中的大部分技术都可以在WebApp中开发
    • 节约开发成本，维护成本也轻松很多
  • 缺点
    • 兼容各种设备工作量大，效率低下
    • 代码累赘，会出现隐藏无用元素，加载时间长

与自适应的区别

  • 响应式的概念覆盖了自适应，但是包括的东西更多。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局
  • 自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，也会感觉在小屏幕上查看，内容过于拥挤
  • 响应式解决了自适应布局的问题。它可以自动识别屏幕宽度、并做出相应调整，布局和展示的内容可能会有所变动

rem 响应式布局

  • 如果页面只在移动端访问，可以使用 rem实现响应式布局
  • 实现原理： 动态改变 html的font-size值的大小，来完成rem实现响应式布局

Flex弹性布局

  • 对界面宽容度要求较高

  • 采用 Flex 布局的元素

    移动端点透问题

    事件冒泡

posted @ 2021-09-10 17:28  YuanLiu  阅读(331)  评论(0)    收藏  举报