- 博客(1)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue详解
vue使用内容vue环境配置node.js环境安装 vue安装npm install vue-cli -g 全局安装vue-cli新建项目1.vue init webpack 项目名(不能有大写)新建项目选项 name 名字跳过Description描述跳过Author 作者名 跳过Installvue-router 路由引入去人Use ESLint to lint your code否NOSet up unit ...
2021-06-28 13:15:25
35
html入门到放弃笔记
HTML + JavaScript + Ajax + CSS
赵旭
zhaoxu@tedu.cn
HTML5
1、WEB基础知识(了解)
1、Internet - 网
由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构
2、基于Internet上的程序
1、C / S 结构
Client / Server
特点：必须通过指定的客户端软件才能访问服务器端的一种程序 ：如 ：桌面版QQ，... ...
2、B / S 结构
Browser / Server
Browser ：浏览器
特点：通过 浏览器 就能访问服务器端的一种程序
如 ：网页版百度，网页版 QQ，网页版 京东，... ...
3、WEB
1、什么是WEB
WEB，是基于Internet上的一种应用程序(网页应用程序)
WEB页面，简称WEB页(网页)，就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件)
2、WEB浏览器
1、功能
1、提交用户请求 (UA : User Agent)
2、作为HTML 以及 脚本执行的 解释器
3、以图形化的方式显示web页面
2、主要浏览器产品
1、Microsoft Internet Explorer (IE)
2、Mozilla Firefox
3、Google Chrome
4、Apple Safari
5、Opera Opera(欧朋)
3、主要技术
1、HTML
2、CSS
3、Javascript
2、HTML入门(重点)
1、什么是HTML
Hyper Text Markup Language
超级 文本 标记 语言
超文本 ：也是文本，但会具备特殊功能
普通文本 a : 普通字符 a
超文本 a : 表示超链接
普通文本 b : 普通字符 b
超文本 b : 加粗显示文本
标记 ：超文本的表现形式
普通文本 a : a
超文本 a :
语言 ：具备一定的语法规范
HTML 也具备自己的语法规范
WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ，以 .html 或 .htm 进行结尾的文件
开发 & 运行网页的工具：
1、记事本
2、浏览器
2、HTML 的基础语法
1、标记语法
HTML中用于描述功能的符号称为"标记"
标记在使用时，用尖括号 "",标记的分类
1、封闭类型的标记
也称为 "双标记" , 必须成对出现
语法：内容
Demo ：
1、创建 p 标记 --...
2、创建 div 标记 --
3、创建 header 标记 -- <header></header>
2、非封闭类型的标记
也称为 "单标记"
语法： 或
Demo ：
1、创建 br 标记 --
2、创建 hr 标记 --
3、创建 img 标记 --
4、创建 input 标记 -- <input/>
2、标记(元素)的嵌套
在一对标记中，允许出现另外一对(一个)标记
注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系
Demo :
1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中 ，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本
<body>
这是一段测试文本
</body>
3、标记的属性
1、什么是属性
用来修饰标记的效果的内容，就是属性
2、语法
1、属性必须声明在开始标记中
2、属性与标记名称之间，用 空格 隔开
3、属性的值 与 属性之间 使用 "=" 连接
4、一个元素允许有多属性，多属性间，排名不分先后，中间用 空格 隔开即可
Demo :
1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div
四大标准属性：
1、id ：定义元素在页面中独一无二的名称
2、title ：鼠标悬停在元素上时，体现的文字
3、class ：引用 类选择器时使用(CSS中)
4、style ：定义 内联方式方式使用(CSS中)
4、注释
语法：<!-- -->
注意：
1、注释不能嵌套
2、注释不能出现在标记中
3、HTML 文档结构
W3C ：Word Wide Web Consortium (万维网联盟)
1、HTML文档的组成
1、文档类型声明
告知浏览器当前的HTML文档用的是哪个版本
在网页的最顶端
2、由一对 html 根标记，来表示页面的开始与结束
Demo :
1、在 htdoc 中，创建一个网页 01-first.html 文件
创建一个 记事本，将 .txt 重命名为 .html
2、搭建HTML网页结构
1、添加 文档类型声明
2、添加 html 根标记
2、<html> 标记
包含两对子元素
1、<head></head>
包含的子元素(2对)
1、<title>网页的标题</title>
2、<meta charset="utf-8"/> -- 能正常显示中文
2、<body></body>
属性：
1、text ，取值是一个颜色值(red,green,blue...)
2、bgcolor ，取值也是一个颜色值
Demo :
在刚才的 Demo 基础上
1、在 <html>中 增加 <head> 和 <body>
2、为网页指定标题 - 我的第一个HTML文档
3、指定网页的字符编码格式为 utf-8
4、在 body 中 输出一句话 "我的第一HTML页面"
5、设置 body text为red，bgcolor为yellow
3、文本
1、特殊文本的实现
页面的空格以及一些特殊字符需要通过转义字符的方式体现
1、 表示一个空格
2、< 表示
4、© 表示©
Demo :
1、创建一个页面 02-text.html
2、在页面中 输出以下内容
The element. ©2017 By Tarena
The <p> element. © By Tarena
2、文本样式相关标记
: 加粗
: 斜体
: 下划线
: 删除线
: 上标
: 下标
Demo ：
这是一段包含 ，粗体，斜体，下划线，删除线，上标，下标的文本内容
将以上文本内，对应文字的特殊效果，用标记体现出来
3、标题元素
以 醒目 的方式表现出文本
语法：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
属性：
1、align
文本的水平对齐方式
取值：left / center / right
4、段落元素
语法：
属性：align : left / center / right
Demo :
1、在 02-text.html 中，增加以下内容
1、用 段落标记表示 :The first paragraph
2、用 段落标记表示 :The second paragraph ，文本表现为 右对齐
5、换行元素
6、分割线元素
作用：在页面中表现为一条直线
语法：
属性：
1、size
尺寸，以 px 为单位的数值
2、width
宽度，以 px 或 % 为单位的数值
3、align
水平对其方式
4、color
颜色
Demo ：
02-text.html 中
增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red)
7、预格式化
作用：保留源文档中的回车 和 空格 的作用
8、分区元素
1、块分区元素
语法：
作用：布局
2、行内分区元素
语法：
作用：设置同一行文字内的不同样式
9、行内元素 与 块级元素
按照元素们的表现形式来分类，分为 行内元素 和 块级元素1、行内元素
在一行内允许显示多个元素的，称为 "行内元素"
span,i,b,s,u,sup,sub
作用：包裹文本，并处理文本的表现形式
2、块级元素
每个元素独占一行显示的，称为 "块级元素"
div,p,h1,h2,h3,h4,h5,h6
作用：布局
注意：
1、p标记不能嵌套其它的块级元素
2、行内元素中 最好 不要嵌套块级元素
4、图像 和 链接
1、URL
目录结构 ：
目录 ，保存文件的文件夹名称
多个文件夹之间的关系，就是目录结构
1、什么是 URL
URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置
2、URL 在 WEB 中的表现形式
共三种表现形式：
1、绝对路径
特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径
使用场合：当想访问互联网上的资源时，只能用绝对路径
完整的绝对路径分四部分：
1、协议名
http
2、域名(主机名，IP地址)
www.codeboy.com
3、目录路径
img/header
4、文件名
logo.png
http://www.codeboy.com/img/header/logo.png
img/header/logo.png
2、相对路径(重点)
场合：使用本机文件时使用
什么是相对路径：
从当前文件位置处开始查找资源文件所经过的路径，就是相对路径
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回
3、根相对路径
路径形式是以 / 作为开始的。
/ : 表示的是服务器的根路径
2、图像
1、图像格式
WEB中支持的图像格式
1、*.jpg
2、*.gif(动图)
3、*.png(透明)
2、图像的语法
标记：
属性：
1、src ：指定要显示图像的 URL
2、width ：图像的宽度
3、height ：图像的高度
4、title ：鼠标悬停时，要显示的文本
Demo :
1、将 学子网的 logo 下载下来
2、显示在自己的网页中
3、超链接
1、语法
标记：内容
属性：
1、href : 要链接的HTML页面URL
2、target : 目标，指定新网页的打开形式
取值：
1、_blank : 在新标签页中打开网页
2、_self : 在自身标签页中打开新网页(默认值)
Demo
1、创建一个超链接，内容为 ：学子商城，点击时，在自身标签页中 打开 http://www.codeboy.com
2、创建一个超链接，内容为 ：学子商城的LOGO，点击时，在新标签页中打开 http://www.codeboy.com
2、链接的四种表现形式
1、点击操作时，完成资源下载的操作
链接的资源为 zip / rar 时则为下载操作
下载
2、电子邮件链接
联系我们
前提 ：
必须在计算机中安装并配置好至少一个邮件客户端的信息
3、返回页面顶部的空连接
返回顶部
4、执行Javascript代码片段
执行JS
3、锚点
1、作用
锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处
2、使用方式
1、定义锚点
1、使用 a 标记的 name 属性允许定义锚点
xxxx
2、任何标记的 id 属性定义锚点
2、链接到锚点
链接到锚点
链接到锚点
5、表格
1、表格
1、表格的作用
按照一定的格式来显示数据的
表格是由 单元格(列)，行 来组成的
2、表格的语法
1、标记
1、 : 表示一个表格
2、 : 表示表格中的一行
3、 : 表行中的一列(单元格)
: 行/列 标题 (加粗，水平居中)
4、 : 表格的标题
该元素必须添加在 之下，所有的tr之上
2、常用属性
1、table
1、width
2、height
3、align
设置表格的对齐方式 ， left / center / right
4、border
边框宽度，取值以 px 为单位的数值
5、bgcolor
6、cellspacing ：单元格外边距(单元格与单元格 或 单元格与表格之间的距离)
7、cellpadding : 单元格内边距(单元格与内容之间的距离)
2、tr
1、align
控制当前行内容的水平对齐方式
2、valign
控制当前行内容的垂直对齐方式
top / middle / bottom
3、bgcolor
3、td / th
1、align
2、valign
3、width
4、height
5、colspan ：跨列
6、rowspan ：跨行
Demo :
在 刚才的表格基础上，增加以下内容
1、为表格增加边框 1px
2、为表格增加尺寸 400 * 400
3、为表格增加单元格内边距 5px
4、为第四行 增加属性 ，内容水平居中对齐
3、表格的复杂应用
1、行分组
允许将若干行划分到一个组中，以便实现统一管理
1、表头行分组
允许将第一行的内容单独分到表头行分组中
2、表尾行分组
允许将最后一行的内容单独分到表尾行分组中
3、表主体行分组
2、不规则表格创建
通过 td 的跨行 和 跨列来实现不规则的表格
1、跨列
从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除
2、跨行
从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除
3、表格的嵌套
被嵌套的所有的内容，只能放在 td 中
2、列表
1、作用
按照一定的格式显示数据
2、列表的分类 & 语法
1、列表的组成
由列表类型 以及 列表项 来组成
2、分类 & 语法
1、有序列表
--> Order List
允许包含若干列表项：
--> List Item
2、无序列表
--> Unorder List
允许包含若干列表项：
3、属性
1、ol
1、type
1 、按数字方式排列,默认值
a 、按小写英文方式排列
A 、按大写英文方式排列
i 、按小写罗马数字排列
I 、按大写罗马数字排列
2、start
指定标识从 几 开始显示
2、ul
1、type
1、disc，实心圆,默认值
2、circle，空心圆
3、square，实心矩形
4、none
3、列表的嵌套
被嵌套的内容只能放在 li 中
Demo :
1、声明一个列表在 html 中(有序)，包含两个列表项，显示 两部小说的名字
2、在两个列表项中，再各嵌套一个无序列表，各写3-4个小说中的主角
3、定义列表
1、作用
以一种特殊的结构来排列数据
通常用语对一类事物/名词 的解释上面
2、语法
：声明一个定义列表
：声明要解释的事物名称 或 名词
：对上述名词或事物解释的内容
3、常用场合
图文混排
3、结构标记
1、结构标记的作用
搭建网页的结构(布局),用于替代 div，最大的优点是提升了标记的"语义性"
2、结构标记详解
1、<header></header>
作用：表示网页 或 某块内容的头部
2、
作用：表示网页中的 导航内容
3、
作用：表示网页主体内容中的某一部分
4、
作用：出现在文字描述性比较强的场合:一则新闻，论坛中的帖子，微博信息，博客的信息
5、
作用：表示网页中，或某部分内容的 边栏信息
6、
作用：表示网页中尾部的信息
4、表单(难点)
1、表单的作用
用于收集用户的信息并提交给服务器
表单主体是由两部分组成的
1、表单元素
收集信息，并提交给服务器
2、表单控件
用于与用户交互的一些元素：文本框，密码框
2、表单元素(难点)
标记：<form></form>
注意：只有放在 <form></form> 里面的表单控件的值，才能提交给服务器
属性：
1、action
提交给服务器处理程序的地址 (动作)
2、method
提交方式，以什么样的方式把数据交给服务器
1、get
特点：
1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上)
2、安全性很低
3、提交数据最大限制为 2KB
4、向服务器要数据时可以使用
2、post
特点：
1、以隐式的方式将数据传递给服务器
2、安全性很高
3、不限制提交数据的大小
4、要提交数据给服务器处理时使用
3、... ...
3、enctype
作用：指定表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded
默认值，允许将任意类型的文本提交给服务器
2、multipart/form-data
允许将文件提交给服务器
3、text/plain
不对任何数据进行编码和传输
Demo :
1、创建 05-form.html
2、声明一个表单元素 form
3、指定提交地址为 login.php,提交方式为 get，编码方式为默认
3、表单控件
表单元素分类：
1、input元素
2、textarea 多行文本域
3、select 和 option 选项框
4、其它元素
5、新input元素
详解 ：
1、input元素
里面会包含若干个不同的表单控件
标记 ：<input>
属性 ：
1、type
根据不同的type属性值，可以创建不同的input元素
2、name
定义表单控件的名称，主要提交给服务器使用的
注意：如果不声明name属性的话，元素则无法提交给服务器
3、value
定义当前控件的值，主要提交给服务器使用的
4、disabled
禁用控件，无值的属性
<input disabled>
2、文本框 与 密码框
文本框：<input type="text">
密码框：<input type="password">
具备除以上四个属性外，还具备以下几个独立属性：
1、maxlength
限制输入的字符数，取值为数字
2、readonly
只读，无值属性
Q : readonly 和 disabled 的区别
1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已
2、disabled ， 是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器
3、placeholder
占位符，即默认显示在文本框用于给用户提示的文字
3、按钮
1、提交按钮
作用：将表单提交给服务器
标记：<input type="submit" value="显示的文本">
2、重置按钮
作用：将表单恢复到初始化的状态
标记：<input type="reset" value="显示的文本">
3、普通按钮
作用：通过 JS 自定义功能
标记：<input type="button" value="显示的文本">
4、显示的内容
属性：
1、type ：submit / reset / button
4、单选按钮 和 复选框
单选按钮：<input type="radio">
复选框：<input type="checkbox">
属性：
1、name
设置名称，并用于分组，一组单选按钮 或 复选框的名称必须相同
2、value
必须设置
3、checked
默认被选中，无值属性
5、隐藏域 和 文件选择框
1、隐藏域
<input type="hidden" name="" value="">
想提交给服务器，但不想给用户看的数据，可以放在隐藏域中
2、文件选择框
<input type="file" name="">
注意：
1、form的 method 属性值必须为 post
2、form的 enctype属性值必须为 multipart/form-data
http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing
http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3
http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789
1、表单
1、form ...
2、input ...
3、textarea 控件
标记：<textarea></textarea>
属性：
1、name
定义名称，提交给服务器使用
2、cols
指定文本域的列数，变相指定宽
3、rows
指定文本域的行数，变相指定高
4、readonly
只读
Demo :
创建 01-form.html 文件
创建一个 多行文本域，列数为 50，行数为 5，名称为 intro
4、选项框
1、标记
表示 下拉列表 或 滚动列表
列表中的内容，允许出现多个
2、属性
1、
1、name ：控件的名称
2、size ：默认显示选项的数量，默认为1，为下拉列表，如果取值>1的话，则为滚动列表
3、multiple
设置多选，无值的属性
2、
1、value ：选项的值，提交给服务器用
2、selected ：默认被选中
5、其它标记
1、label 元素
作用：关联文本与表单控件的，点击文本时就如同点击表单控件一样
标记：文本
属性：
1、for
指定要关联的表单控件的ID值
2、为控件分组
分组标题
分组中的内容
3、浮动框架
1、作用
将其他页面导入到当前页面中来
2、语法
标记：<iframe></iframe>
属性：
1、src
要引入的页面的url
2、frameborder
指定浮动框架的边框，默认为1，则显示边框
不需要边框则设置为 0
3、width
4、height
练习：
创建一个 02-iframe 的网页，将 01-form.html 页面引入进来 ，适当调整宽度，高度，边框
6、新input元素 (HTML5)
1、电子邮件类型
作用：提交时会验证数据是否符合Email的规范
标记：<input type="email">
2、搜索类型
作用：在文本框的基础上，提供了快速清除操作
标记：<input type="search">
3、URL类型
作用：提交时会验证数据是否符合Web站点的URL规范(绝对路径)
标记：<input type="url">
4、电话号码类型
作用：在移动端设备中，能展开 拨号键盘，在PC中无效
标记：<input type="tel">
5、数字类型
作用：只能让用户输入 或 选择数字
标记：<input type="number">
属性：
1、min ：当前控件接受的最小值
2、max ：当前控件接受的最大值
3、step ：微调数字时每次变化的长度,默认为1
6、范围类型
作用：提供一个滑块，让用户选择数字
标记：<input type="range">
属性：
1、min ：当前控件的最小值
2、max ：当前控件的最大值
3、value ：设定初始值
7、颜色类型
作用：提供一个颜色拾取控件
语法：<input type="color">
8、日期类型
作用：提供一个日期输入控件
标记：<input type="date">
9、周类型
作用：提供一个日期控件，用于选取周
标记：<input type="week">
10、月份类型
作用：选取月份控件
标记：<input type="month">
=============================
2018-05-15
xml浅学笔记
1、XML
AJAX: Asynchronous Javascript And Xml
1、什么是XML
eXtensible Markup Language
可扩展的 标记 语言
XML的标记没有预定义过，需要自行定义
XML的宗旨是做数据传递的，而非数据显示
2、XML的语法规范
XML可以保存成独立的 ***.xml 的文件，也可以以字符串的形式出现（服务器端生产）
1、XML的最顶端是XML的声明
<?xml version="1.0" encoding="utf-8" ?>
2、XML标记的语法
1、XML标记必须成对出现
2、xml标记是严格区分大小写，开始和结束必须一致
3、XML的标记也允许被嵌套，注意嵌套顺序
4、每个标记都允许自定义属性，格式与HTML一致，但属性值，必须用""括起来
5、每个XML文档中必须要有一个跟元素
3、使用AJAX 请求 XML 文档
1、要遵循AJAX的请求步骤
1、创建/获取 xhr
2、创建请求
xhr.open("get","***.xml",true);
3、设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr;.status==200){
}
}
4、发送请求
xhr.send();
2、在回调函数中，处理响应数据
使用 xhr.responseXML 来获取响应数据，返回的是XML文档对象
4、解析XML文档对象的内容
1、核心方法
elem.getElementsByTagName("标签的名字");
elem：表示的是获取范围的对象
返回值：返回一个包含指定元素们的类数组
5、在php中返回xml格式的字符串
1、必须增加响应消息头
header("Content-Tupe:application/xml");
2、按照xml的语法结构，拼xml字符串，再响应给客户端
$xml="<?xml version='1.0' encoding='utf-8'?>";
$xml.="";
....
2018-05-15
javascript入门笔记
Javascript Basic
1、Javascript 概述(了解)
Javascript，简称为 JS，是一款能够运行在 JS解释器/引擎 中的脚本语言
JS解释器/引擎 是JS的运行环境：
1、独立安装的JS解释器 - NodeJS
2、嵌入在浏览器中的JS解释器
JS的发展史：
1、1992年 Nombas 开发了一款语言 ScriptEase
2、1995年 Netscape(网景) 开发了一款语言 LiveScript,更名为 Javascript
3、1996年 Microsoft(微软) 开发了一款语言 JScript
4、1997年 网景 将Javascript 1.1 提供给了ECMA(欧洲计算机制造商联合会),ECMA 获取了 JS 的核心，称之为 ECMA Script (ES)
完整的JS组成：
1、核心(ES)
2、文档对象模型(Document Object Model) - DOM
允许让 JS 与 HTML 文档打交道
3、浏览器对象模型(Browser Object Model) - BOM
允许让 JS 与 浏览器进行交互
JS是一款基于对象的编程语言
2、JS的基础语法
1、浏览器内核
内核负责页面内容的渲染，由以下两部分组成：
1、内容排版引擎 - 解析HTML/CSS
2、脚本解释引擎 - 解析Javascript
2、搭建JS运行环境(重点)
1、独立安装的JS解释器 - NodeJS
console.log("Hello World");
console.log('Hello World');
2、使用浏览器中的内核(JS解释引擎)
1、在浏览器的控制台(Console)中，输入脚本并执行
2、将JS脚本代码嵌入在HTML页面中执行
1、采用HTML元素事件执行JS代码
事件 ：
1、onclick
当元素被点击时执行的操作
ex: 当按钮被点击时，在控制台中输出 Hello World
2、将JS脚本编写在 [removed][removed] 并嵌入在HTML文档的任何位置
[removed]
console.log("... ...");
[removed]("Hello Wolrd");
[removed]
3、将JS脚本编写在外部独立的JS脚本文件中(***.js)
步骤：
1、编写JS脚本文件
2、在HTML中引入脚本文件
[removed][removed]
练习：
1、先创建一个 base.js 的文件
2、在文件中执行以下代码
console.log(" .... ... ");
[removed](" ... ... ");
window.alert("这是在外部脚本文件中的内容");
3、在 html 文档中，引入 base.js 文件
3、JS调试
当代码编写出现错误时，在运行的时候，在错误位置会停止
碰到错误代码，会终止当前语句块的执行，但不影响后续块的执行
[removed][removed] 为一块
4、JS语法
1、语句 - 可以被JS引擎执行的最小单元
由表达式、关键字、运算符 来组成的
严格区分大小写 ：name 和 Name
所有的语句都是以 ; 来表示结束
所有的标点符号都是英文的
; 和 ；
. 和 。
: 和 ：
" 和 “
' 和 ‘
() 和 （）
[] 和 【】
{} 和 {}
2、注释
单行注释: //
多行注释: /* */
3、变量 与 常量
1、变量
1、什么是变量
用来存储数据的一个容器
2、声明变量(重点)
1、声明变量
var 变量名;
2、为变量赋值
变量名=值;
3、声明变量并赋初始值
var 变量名=值;
注意：
1、变量在声明时没有赋值的话，那么值为 undefined
2、声明变量允许不使用var关键字，但并不推荐
练习：
1、创建一个网页 04-variable.html
2、声明一对 [removed][removed],并完成以下变量的声明
1、声明一个变量用于保存用户的姓名，并赋值为 "张三丰";
2、声明一个变量用于保存用户的年龄，赋值 68
3、如何 将变量的数据 打印在控制台上？？
4、一条语句中声明多个变量
var 变量名1=值,变量名2=值,变量名3;
3、变量名命名规范
1、由字母，数字，下划线以及 $ 组成
var user_name; 正确
var user-name; 错误
var $uname; 正确
2、不能以数字开头
var 1name;错误
3、不能使用JS中的关键字 和 保留关键字
4、变量名不能重复
5、可以采用"驼峰命名法",小驼峰命名法使用居多
6、最好见名知意
var a;
var uname;
4、变量的使用
1、为变量赋值 - SET操作
只要变量出现在 赋值符号(=)的左边一律是赋值操作
var uname="张三丰";
uname="张无忌";
2、获取变量的值 - GET操作
只要变量没有出现在赋值符号(=)的左边，一律是取值操作
var uname="wenhua.li";//赋值操作
console.log(uname);
var new_name = uname;
new_name 是赋值操作
uname 是取值操作
uname = uname + "bingbing.fan";
赋值符号出现的话，永远都是将右边的值，赋值给左边的变量(从右向左运算)
2、常量
1、什么是常量
在程序中，一旦声明好，就不允许被修改的数据
2、声明常量
const 常量名=值;
常量名在命名时采用全大写形式
作业：
1、声明一个变量 r ，来表示一个圆的半径，并赋值
2、声明一个常量PI ，来表示圆周率3.14
3、通过 r 和 PI 来计算 该圆的周长，保存在变量l中
周长 = 2 * π * 半径
4、通过 r 和 PI 来计算 该圆的面积，保存在变量s中
面积 = π * r * r;
5、在控制台中打印输出
半径为 * 的圆的周长是 *
半径为 * 的圆的面积是 *
笔记本名称:ThinkPad E460
笔记本价格:3000
笔记本库存:100台
1、运算符
1、位运算符
1、作用
将数字转换为二进制后进行运算
只做整数运算，如果是小数的话，则去掉小数位再运算
2、位运算
1、按位 与 ：&
语法 ：a & b
特点 ：将 a 和 b 先转换为二进制，按位比较，对应位置的数字都为1的话，那么该位的整体结果为1，否则就为0
ex：5 & 3
5 ：101
3 ：011
===========
001
结果 ：1
使用场合：任意数字与1做按位与操作，可以判断奇偶性，结果为1，则为奇数，否则为偶数
0 ：0
1 ：1
2 ：10
3 ：11
4 ：100
5 ：101
5 & 1
101
001
==========
001
4 & 1
100
001
====
000
2、按位 或 ：|
语法 ：a | b
特点 ：将 a 和 b 转换为 二进制，按位比较，对应位置的数字，至少有一位为1的话，那么该为的整体结果就为1，否则为 0
ex :
5 | 3
101
011
========
111 结果为 ：7
适用场合：任何小数与0 做 按位或的操作，可以快速转换为整数(并非四舍五入)
5 | 0
101
000
====
101
3、按位 异或 ：^
语法：a ^ b
特点：将 a 和 b 先转换为二进制，按位操作，对应位置上的两个数字，相同时，该位整体结果为0，不同时，该位的整体结果为 1
使用场合：快速交换两个数字
5 ^ 3
101
011
==========
110 结果为 6
练习：
var a = 5;
var b = 3;
a = a ^ b;
b = b ^ a;
a = a ^ b;
console.log(a,b);
3、赋值 和 扩展赋值运算符
1、赋值运算符 ：=
2、扩展赋值运算符
+=，-=，*=，/=，^=，... ...
a += b; ==> a = a + b;
a = a + 1; ==> a += 1; ==> a++ ; ==> ++a
3、练习
1、从弹框中，分两次输入两个数字，分别保存在 a 和 b中
2、如果 a 大于 b的话 ，则交换两个数字的位置
使用 短路&&,扩展赋值运算符,位运算
4、条件运算符(三目运算)
单目(一元)运算符 ：++,--,!
双目(二元)运算符 ：+，-，*，/，%，>,= 18 ? "你已成年" : "你未成年";
练习：
从弹框中录入一个数字表示考试成绩(score)
如果 成绩为 100 分 ，提示 ：满分
如果 成绩 >= 90 分 ，提示 ：优
如果 成绩 >= 80 分 ，提示 ：良
如果 成绩 >= 60 分 ，提示 ：及格
否则 ：提示 不及格
2、函数
1、什么是函数
函数(function),是一段预定义好，并且可以被反复使用的代码块
预定义好 ：事先声明，但不是马上执行
反复使用 ：可以被多次调用
代码块 ：包含多条可执行的语句
2、函数的声明与调用
1、普通函数
语法：
function 函数名(){
语句块;
}
调用：在JS中任何的合法位置处，都可以通过 函数名() 的方式进行调用
练习：
1、声明一个函数，名称为 change
2、在函数中
1、通过弹框,分两次，录入两个数字，保存在 a 和 b
2、先打印 a 和 b的值
3、如果 a > b 的话，则交换两个数字的位置
4、再打印 a 和 b的值
3、在网页中，创建一个按钮，点击按钮时，完成 change 函数的调用
2、带参函数
1、定义语法：
function 函数名(参数列表){
语句块;
}
参数列表：
可以由0或多个参数的名称来组成，多个参数的话中间用 , 隔开
定义函数时的参数列表，都称为 "形参(形式参数)"
2、调用语法
任意合法JS位置处
函数名(参数列表);
调用函数时，所传递的参数列表，称之为"实参(实际参数)"
3、练习
1、定义一个函数 change ，该函数中接收两个参数(a,b)
2、在函数体中，如果 a 大于 b的话，则交换两个数字的位置，再打印输出结果
3、通过一个按钮调用函数，并且将 两个数字传递给函数
4、常用带参函数
parseInt(变量);
parseFloat(变量);
Number(变量)
console.log("");
3、带返回值的函数
var result = parseInt("35.5");
1、什么是返回值
由函数体内 带到 函数体外的数据，叫做"返回值"
2、语法
function 函数名(参数列表){
语句块;
return 值;
}
允许通过一个变量来接收调用函数后的返回值
var 变量名 = 函数名(实参列表);
3、练习
定义一个可以接收三个Number参数的方法(名称为getMax)，在该方法中，计算并返回 最大的数值
3、作用域
1、什么事作用域
指的是变量和函数的可访问范围，作用域分为以下两类
1、函数作用域
只在定义的函数内允许访问变量 和 函数
2、全局作用域
一经定义，在任何位置处都能访问
2、函数作用域中的变量
在某个函数中声明的变量，就是函数作用域中的变量，也可以称之为 "局部变量"。
function calSum(){
var a = 3;
var b = 5;
console.log(a,b); // 输出 3 5
}
console.log(a,b); //错误，因为 a ，b已经出了它的定义范围
练习：
1、定义一个 函数calSum，声明两个变量a，b，并赋值，并且在函数内打印两个变量
2、定义一个 函数calMax，直接打印输出 a，b，观察结果
3、全局作用域中的变量
一经声明了，任何位置都能使用。也称为 "全局变量"
声明方式：
1、将变量声明在最外层，所有的function之外
[removed]
var a = 15;
var b = 18;
function showMsg(){
console.log(a);
console.log(b);
}
[removed]
2、声明变量时，不使用var关键字，一律是全局变量，但有风险
建议：
全局变量 ，尽量都声明在 所有的 function 之外
声明变量时，也一律都使用 var 关键字
4、声明提前
Q ：
function show(){
console.log(num);//报错
}
1、什么是声明提前
JS程序在正式执行前，会将所有var声明的变量以及function声明的函数，预读到所在作用域的顶端。但赋值还保留在原位置上
2、建议
最好将变量的声明 和 函数的声明都集中到所在作用域的最顶端
5、按值传递
Q :
function change(a,b){
a ^= b;
b ^= a;
a ^= b;
console.log("在change函数中");
console.log(a,b);
}
function testChange(){
var a = 15;
var b = 18;
console.log("调用前：");
console.log(a,b);//15 18
change(a,b);
console.log("调用后：");
console.log(a,b);//15 18
}
1、什么是按值传递
基本数据类型的数字在做参数传递时，实际上时传递的实参的副本到函数中，原始数据并未发生过改变
2、建议
基本数据类型的数据在做参数传递时，尽量不要在函数中修改，因为即便修改，也不会影响原数据的
6、局部函数
将函数 再声明在某个函数内，就是局部函数
[removed]
function show(){
function inner(){
console.log("show 中的 inner 函数");
}
inner();//正确
}
inner(); // 错误，inner 是局部函数，只能在 show中被调用
[removed]
7、全局函数
ECMAScript预定义的全局函数,可供用户直接使用
1、paseInt();
2、parseFloat();
3、Number();
4、isNaN();
5、encodeURI()
URL:Uniform Resource Locator ：统一资源定位符/器
URI:Uniform Resource Identifier : 统一资源标识符
1、作用
对统一资源标识符格式的字符串进行编码，并返回编码后的字符串
编码：将多字节的字符，编译成多个单字节的字符
6、decodeURI()
1、作用
对已编码的URI进行解码(将已编码内容再转换回中文)
7、encodeURIComponent()
在 encodeURI 基础之上，允许将 特殊符号(:,/,...) 进行编码
8、decodeURIComponent()
9、eval()
作用：计算并执行以字符串方式表示的JS代码
var msg = "console.log('Hello World');";
eval(msg);//将 msg 作为 JS代码去执行
练习：
1、创建页面，通过弹框，输入一段JS代码
2、通过 eval() ，将输入的JS代码执行一次
3、递归调用
1、什么是递归
递归指的是在一个函数中，又一次的调用了自己
2、递归的实现
1、边界条件
2、递归前进 - 继续调自己
3、递归返回 - 向上返回数据
3、解决问题
1、计算某个数字的阶乘
5的阶乘
5!=5*4*3*2*1
5! = 5 * 4!
4! = 4 * 3!
3! = 3 * 2!
2! = 2 * 1!
1! = 1
/*计算 n 的阶乘*/
function f(n){
... ...
}
4、作业
已知下列数列 (菲波那切数列)
1,1,2,3,5,8,13,21,34,55,... ...
已知 第一个数为1，第二个数为1
从第三个数开始，每个数字等于前两个数之和
问题：通过一个函数，求某个位置上的数字（用递归实现）
https://www.baidu.com/s?wd=佳能
https://www.baidu.com/s?wd=尼康
function test(){
console.log("Hello World");
}
var result = test();
console.log(result);
===========================
输出结果：
Hello World
undefined
[removed]
var g_uname = "sanfeng.zhang";
function showName(){
var uname = "wuji.zhang";
console.log(uname);//wuji.zhang
}
[removed]
function test(){
console.log(num); // 打印 ：undefined
var num = 15;
}
演变成：
function test{
var num; // 先声明，但不赋值(自动完成)
console.log(num); // 打印 ：undefined
num=15;// 只赋值，不声明
}
推荐写法：
function test(){
var num = 15;
console.log(num); // 打印 ：15
}
***********************************************
作业：
1,1,2,3,5,8,13,21,34,55,... ...
已知：
该数列中前两个数都是 1
从第三个数开始，每个数字等于前两个数的和
/*通过 f 函数，计算第 n 个数字是多少*/
function f(n){
}
f(5) : 求第五个数字是多少
=================================================
1、分支(选择)结构
1、流程控制结构
1、顺序结构 - 自顶向下的执行
2、分支结构 - 有条件的选择某一段代码去执行
3、循环结构 - 有条件的选择某一段代码反复执行
程序 = 数据结构 + 算法
2、练习
编写一个收银柜台收款程序，根据商品单价，购买数量以及收款金额计算并输出应收金额和找零
数据：商品单价，购买数量，收款金额，应收金额，找零
输入数据：商品单价(price),购买数量(count),收款金额(money)
输出数据：应收金额(total),找零(change)
Q : 当商品总价>=500时，享受8折优惠
3、if 结构
语法：
if(条件){
满足条件要执行的语句块
}
流程：
1、判断条件
2、如果条件为真，则执行 语句块 中的内容
3、如果条件为假，则跳过语句块去执行其他内容
注意：
1、if中的条件，最好是一个boolean的值，如果不是boolean类型，则会自动转换
以下情况，条件会自动转换为 false
if(0)
if(0.0)
if(undefined)
if(null)
if("")
if(NaN)
if(35.5){ //真 }
var num;
if(num){ //假 }
if("李文华真帅"){ //真 }
2、if 后的 { } 是可以被省略的，如果省略的话，只控制 if 下的第一条语句
问题：考虑异常情况，如果收款金额小于应收金额
如果 收款金额大于等于应收金额，则正常执行
否则 则给出异常提示
4、if ... else ... 结构
语法：
if(条件){
满足条件时，执行的语句块
}else{
不满足条件时，执行的语句块
}
练习：
1、从弹框中，输入一个年份信息
2、判断该年是否为闰年，并给出提示
输入年：2009
2009年不是闰年
输入年：2012
2012年是闰年
5、if ... else if ... 结构
语法：
if(条件1){
//满足条件1时，要执行的语句块
}else if(条件2){
//满足条件2时，要执行的语句块
}else if(条件n){
//满足条件n时，要执行的语句块
}else{
//以上条件都不满足时，要执行的语句块
}
练习：
从弹框中，分三次录入 年，月，日
判断该日是该年的第多少天
提示：
1,3,5,7,8,10,12 ：每月31天
4,6,9,11 ：每月30天
2 ：闰年29天，平年28天
2017年8月21日 ：
31+29+31+30+31+30+31+21
6、switch ... case
Q :
从弹框中录入 1-7 中的任一一个数字
录入 1 ：输出 ：今天吃红烧肉
录入 2 ：输出 ：今天吃红烧排骨
录入 3 ：输出 ：今天吃红烧丸子
录入 4 ：输出 ：今天红烧鱼
录入 5 ：输出 ：今天吃烤羊腿
录入 6 ：输出 ：今天休息
录入 7 ：输出 ：今天休息
场合：等值判断
语法：
switch(变量){
case 常量值1:
语句块1;
break;//通过 break 结束switch的执行(可选 )
case 常量值2:
语句块2;
break;//可选
default:
语句块n;
break;//可选
}
练习：
1、使用 特殊的 switch 结构完成下列要求
输入年 ，月
输出 该月有多少天
1,3,5,7,8,10,12 : 31天
4,6,9,11 : 30 天
2 : 平年28天，闰年29天
ex:
年：2017
月：5
输出：31天
1、使用 特殊的 switch 结构完成下列要求
2、改版日期计算器(难度)
输入年月日，判断该日是这一年的多少天
var month = Number(prompt());
var totalDays = 0;
switch(month-1){
case 11:
totalDays += 30;
case 10:
totalDays += 31;
case 9:
totalDays += 30;
... ...
}
2、循环结构
1、问题
1、控制台上打印一句Hello World
2、控制台上打印十句Hello World
3、控制台上打印10000句 Hello World
4、改版第3步，增加
第 ? 句 Hello World
第 1 句 Hello World
第 2 句 Hello World
...
第 10000 句 Hello World
5、改版第4步
将 Hello Word 替换成 "你好 世界"
练习：
6、打印输出 1-100之间所有数字的和
2、什么是循环结构
循环，就是一遍又一遍的执行相同或相似的代码
两个重要的要素：
1、循环条件 ：循环执行的次数
2、循环操作 ：循环体，要执行相同 或 相似的代码是什么
3、while 循环
1、语法
while(条件){
//循环操作
}
流程：
1、判断条件
2、如果条件为真，则执行循环操作，然后再次判断条件。当条件为假时，则退出循环结构
4、循环的流程控制语句
1、break
破坏了整个循环的执行 - 结束循环
2、continue
结束本次循环，继续执行下次循环
练习：
1、使用 continue ，打印输出 1-100之间所有偶数的和
2、让用户循环从弹框录入信息，并将信息打印在控制台上，直到用户输入 exit 为止
输入数据：sanfeng.zhang
sanfeng.zhang
输入数据：wuji.zhang
wuji.zhang
输入数据：exit
3、猜数字游戏
1、随机生成一个 1-100 之间的数字
Math.random() 返回 0-1 之间的小数
var r = parseInt(Math.random()*100)+1;
2、要求用户输入一个整数
若比生成的随机数大，则输出 “猜大了”
若比生成的随机数小，则输出 “猜小了”
直到用户 猜对为止
3、如果用户输入exit ,也可以退出游戏
3、作业
用户从弹框中输入年，月，日，判断该日是星期几?
1900年1月1日 是星期1
推荐思路：
从1900年1月1日 到 输入的年月日 共有多少天求出来，与 7 取余
1、通过一个循环计算从1900年 到输入年前一年有多少天?
2、再从1月，到输入月份的前一个月共有多少天?
3、再累加 输入的日
4、用整体结果 与7取余，给出提示
附加作业：
将 输入的月份的日历打印输出
2017年8月
日 一 二 三 四 五 六
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
while(i > 0){
switch(i){
case 1:
console.log();
break;
case 2:
console.log();
continue; // 作用在 while
}
}
switch(i){
case 1:
console.log();
continue; // 错误
}
===================================================
1、循环结构
1、do ... while()
do{
循环操作
}while(循环条件);
do...while VS while
1、while
先判断条件，再执行循环操作
如果条件不满足，循环一次都不执行
2、do ... while
先执行循环操作，再判断循环条件
即便条件不满足，也要执行一次循环操作
练习：
将猜数字的游戏，改版成 do ... while 循环版本
2、for() 循环
1、语法
for(表达式1;表达式2;表达式3){
//循环操作
}
表达式1：循环条件的声明
表达式2：循环条件的判断(boolean)
表达式3：更新循环条件(i++,... ...)
执行过程：
1、计算表达式1的值
2、计算表达式2的值，如果结果为true则执行循环体，否则退出
3、执行循环体
4、执行表达式3
5、再计算表达式2的值，为true执行循环体，否则退出
while do...while 和 for 的使用场合：
1、while 和 do...while
适合使用在不确定循环次数的循环下
2、for
适合使用在确定循环次数时使用
练习：
1、定义一个函数，打印乘法口诀表中的任一一行
输入要打印的行数：5
1*5=5 2*5=10 3*5=15 4*5=20 5*5=25
2、定义一个函数，打印 1/1+1/3+1/5+...1/999的和
3、定义一个函数，判断指定的数字是否为素数
素数：只能被1 和 它本身整除的数字
输入一个数字：7
是素数
循环条件：从 2 开始 ，到输入的数字-1结束
循环操作：判断输入的数字能否被循环条件整除,能被整除，则不是素数，不能被整除，是素数
4、有一对兔子，从出生后的第3个月起都生一对兔子，小兔子长到第3个月后每个月又生一对兔子，假如兔子都不死的话，打印输出 前10个月，每个月有多少对兔子
n1 n2 n1 n2 n1 n2
1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 , 55
2、三个表达式的特殊用法
1、for(;;)
三个表达式可以任意的省略，不推荐省略
2、for 第一个 和 第三个表达式的多样化
for(var i=1,j=2;i=1;i++,j--){
console.log(i+"+"+j+"="+(i+j));
}
3、嵌套循环
在一个循环的内部又出现一个循环
for(var i=0;i<10;i++){ // 外层循环
for(var j=0;j<10;j++){ // 内层循环
}
}
外层循环执行一次，内层循环要执行一轮
练习：
1、控制台中输出下面的图形
******
******
******
******
******
*
**
***
****
*****
*
***
*****
*******
*********
2、数组
1、什么是数组
数组，即一组数据，使用一个变量来存放多个数据
数组中的元素是按照"线性"书序来排列的，所以也可以称之为是一个 "线性表"
2、声明数组
1、声明一个空数组变量
var 数组名 = [];
2、声明数组并赋初始值
var 数组名 = [数据1,数据2,数据3,... ...];
3、声明一个空数组变量
var 数组名 = new Array();
4、声明一个数组并赋初始值
var 数组名 = new Array(数据1,数据2,... ...);
练习：
1、创建一个函数，分别用两种不同的方式创建数组(arr1,arr2)
arr1保存 ：张三丰，张翠山，张无忌
arr2保存 ：金花婆婆，殷素素，赵敏
2、直接将数组打印在控制台上
3、数组是引用类型的对象
引用类型的对象，是将数据保存在 "堆" 中的
在"栈"中，会对 "堆" 中数据的地址进行引用
1、将数组赋值给其它变量时，实际赋的是数组的地址
练习：
1、创建一个数组 arr1 ，包含"张无忌","赵敏"
2、将 arr1 赋值给 arr2
3、将 arr2 的第一个元素更改为 "金花婆婆"，打印输出 arr1 和 arr2 中的所有元素
2、数组在做参数的时候，传递进去的实际上是地址(按引用传递 即 按地址传递)
练习：
1、创建一个数组array，保存"张无忌","赵敏"俩元素
2、创建一个函数change，接收一个数组作为参数，在函数体内，将第一个元素更改为"金花婆婆"
3、调用change函数，并将array数组作为参数，调用完成后，打印array的值，观察结果
4、修改change函数，在函数体内，将传递进来的数组重新new一个Array("孙悟空","猪八戒")
5、重复步骤三，观察结果
3、null
表示的是让引用类型的对象不再指向任何空间.一般用于主动释放对象的空间
//让 array 指向数组的地址
var array = ["wuji.zhang","zhaomin"];
//释放 array空间，不再指向任何地址
array = null;
4、访问数组的元素
赋值，取值，都是使用 下标 来完成的
1、为数组的元素赋值
数组名[下标] = 值;
var array = ["张无忌","赵敏"];
array[1] = "周芷若";
array[2] = "小昭";//增加一个新元素，在第3个位置处
array[5] = "灭绝师太";
2、获取数组中的值
数组名[下标];
3、length属性
作用：获取数组的长度(数组中元素的个数)
1、允许将数组的length属性值设置为0，来完成数组元素的清空操作
2、配合循环 做数组的循环遍历操作
var array = ["张无忌","赵敏"];
输出：
第1名 ：张无忌
第2名 ：赵敏
for(var i=0;i"sanfeng.zhang"];
用字符串做下标，就是关联数组
var array = []; //声明一个空数组
array["西游记"] = "古代神话故事";
array["红楼梦"] = ["贾宝玉","林黛玉","刘姥姥"];
Q : array.length
注意：
1、关联数组是不算做数组内容的，不记录到 length 中
2、关联数组只能通过 字符串 做下标取值
3、允许通过 for...in 来循环遍历关联数组的字符串下标(也能遍历出内容的数字下标)
3、冒泡排序
[23,9,78,6,45] -> [6,9,23,45,78]
冒泡排序：车轮战，两两比较，小的靠前
特点：
1、轮数 ：共比较了 length - 1 轮
2、每轮中比较的次数 ：随着轮数的增加，次数反而减少
代码：
双层循环表示整个排序的过程
1、外层循环 ：控制比较的轮数，从1开始，到length-1(能取到)结束
2、内层循环 ：控制每轮中比较的次数，并且也要表示参与比较的元素的下标，从0开始，到 length-1-i(轮数变量)
[23,9,78,6,45]
共5个元素
外层：从 1 开始，到 4 结束
内层：
第一轮 第一次：从 0 开始 ，到 3 结束
第二轮 第一次：从 0 开始 ，到 2 结束
... ...
2、数组的常用方法
1、toString()
将一个数组转换为字符串
语法：var str = 数组对象.toString();
2、join()
作用：将数组中的元素通过指定的分隔符连接到一起，并返回连接后的字符串
语法：var str = 数组对象.join("&");
练习：(10分钟)
1、使用数组实现由 * 组成的三角形
直角三角形，等腰三角形
*
**
***
****
*****
2、使用数组实现 九九乘法表
3、连接数组
函数：concat()
作用：拼接两个或更多的数组，并返回拼接后的结果
语法：var result=arr1.concat(arr2,arr3,arr4);
注意：
1、concat不会改变现有数组，而是返回拼接后的
2、每个参数不一定非是数组，也可以是普通的数据
练习：
1、声明两个全局数组，分别保存一些国家的名称
数组1：选中的国家
sel = ["中国","美国","俄罗斯","日本"];
数组2：备选国家
unsel=["朝鲜","越南","老挝","柬埔寨"];
2、将 备选国家 全部移入到 入选国家中，打印数据
结果：
sel = ["中国","美国","俄罗斯","日本","朝鲜","越南","老挝","柬埔寨"];
unsel=[];
4、获取子数组
函数：slice()
作用：从指定数组中，截取几个连续的元素组成的新数组
语法：arr.slice(start,[end]);
start:从哪个下标处开始截取，取值为正，从前向后取，取值为负，从后向前算位置。
0 1 2 3
var arr=["中国","美国","日本","英国"];
-4 -3 -2 -1
end : 指定结束处的下标(不包含)，该参数可以省略，如果省略的话，就是从start一直截取到结束
注意：
1、该函数不会影响现有数组，会返回全新的数组
练习：
var arr=["中国","美国","日本","英国"];
取出 美国 和 日本 组成的一个子数组
5、修改数组
函数：splice()
作用：允许从指定数组中，删除一部分元素，同时再添加另一部分元素
语法：
arr.splice(start,count,e1,e2,... ...);
start:指定添加或删除元素的起始位置/下标
count:要删除的元素个数，取值为0表示不删除
e1,e2,... ... : 要增加的新元素，允许多个
返回值：返回一个由删除元素所组成的数组
注意：splice 会改变现有数组
练习：
在 sel 和 unsel 的基础上完成下列操作
1、从备选国家中(unsel)，选择一个国家移入到 选中的国家(sel)
推荐步骤：
1、用户输入 ：越南
从 unsel 中将越南移除
再将 越南 sel 的末尾处
2、用户输入 ：墨西哥
提示：国家不存在
6、数组的反转
作用：颠倒数组中元素的顺序
语法：arr.reverse();
注意：该函数会改变当前数组的内容
练习：
1、声明一个整数数组
2、倒序打印输出内容(使用reverse())
7、数组排序
函数：sort();
语法：arr.sort(排序函数);
作用：默认情况下，按照元素的Unicode码大小按升序排列
特殊：允许自己指定排序函数，从而实现对数字的升序和降序的排列
语法：arr.sort(排序函数);
ex:
var arr = [12,6,4,72,115,89];
//排序函数(升序)
function sortAsc(a,b){
return a-b;
}
arr.sort(sortAsc);
原理：
1、指定排序函数 如 sortAsc,定义 两个参数，如 a 和 b。数组会自动传递数据到 sortAsc 里面去，如果返回值是>0的数，则交换两个数的位置，否则不变
使用匿名函数完成排序：
arr.sort(function(a,b){return a-b;});
练习：
1、声明一个整数数组，随意定义数字
2、页面上添加两个按钮，一个"升序"按钮，一个"降序"按钮
3、点击 升序 按钮时，数组按升序排序，并打印
4、点击 降序 按钮时，数组按降序排序，并打印
8、进出栈操作
JS是按照标准的"栈式操作"访问数组的
所有的"栈式操作"的特点都是"后进先出"
"栈式操作"讲究的"入栈"和"出栈"
1、push()
入栈，在栈顶(数组的尾部)添加指定的元素，并返回新数组的长度
var arr = [10,20,30];
//向栈顶增加新数据 40
var len = arr.push(40);
//len 保存的是 40 入栈后 arr 的长度，值是4
2、pop()
出栈，删除并返回栈顶的(数组尾部)元素
var arr = [10,20,30];
var r1 = arr.pop();//arr = [10,20]
var r2 = arr.pop();//arr = [10]
==============================
arr :
r1 : 30
r2 : 20
3、shift()
删除数组头部的(第一个)元素并返回
var arr = [10,20,30];
var r1 = arr.shift();
============================
arr : [20,30]
r1 : 10
4、unshift()
作用：在数组的头部(第一个)元素位置处，增加新元素
var arr = [10,20,30];
arr.unshift(40);
arr : [40,10,20,30]
3、二维数组
1、什么是二维数组
一个数组中的元素又是一个数组，也可以称之为：数组的数组
2、创建二维数组
var names=[
["孙悟空","猪八戒","沙悟净"],
["潘金莲","西门庆","武大郎"],
["贾宝玉","刘姥姥","林黛玉"],
["貂蝉","貂蝉","貂蝉"]
];
//获取猪八戒
console.log(names[0][1]);
//获取林黛玉
console.log(names[2][2]);
4、作业
1、通过 进出栈 操作，完成 十进制对二进制的转换
1、创建一个函数 decode2bin,接收一个十进制的数字做参数
2、函数体中，将参数 拆成二进制数字，保存在一个数组中
3、将数组的元素使用""连接，并返回
十进制 转 二进制 ：除2取余法
num : 5
num % 2 : 结果为 1
num = parseInt(num / 2) : 结果 2
num % 2 : 结果为 0
num = parseInt(num / 2) : 结果 1
num % 2 : 结果为 1
num = parseInt(num / 2) : 结果 0
结果为 0 时则不用再继续 %2
2、根据省份信息，查询城市列表
1、创建一个全局数组，保存几个省份名称
2、创建一个全局二维数组，保存不同省份中的城市信息(数据要与省份数组中的数据对应的上)
3、创建一个函数，接收一个省份名称做参数，打印该省份中对应的所有的城市信息
2018-05-15
css入门笔记
1.css的概述
1.问题
HTML属性修饰有一定局限，是不太便捷
2.css的语法规范
1.使用css样式方式
1.内联样式
行内样式
特点：将css样式定义在HTML标记中
语法：中先增加一对<style></style>,在<style>标记写样式规则
样式规则：由选择器和样式声明组成
3.外部样式
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。
使用步骤：
1.创建样式表文件（.css）
2.在样式文件中编写样式规则
3.在网页中对样式文件进行引入
<link rel="stylesheet" href="URL../.css">
3.CSS样式特征
1.继承性
必须是父子（有层叠嵌套的关系）结构
大部分的css效果是可以
2.优先级
1.浏览器默认样式
2.内部样式和外部样式（就近原则）
3.内联样式
4.!important;
绝对优先使用（）
格式 p{
color:red !important;
}
2.css选择器
1.选择器的作用
规范页面中那些元素能够使用定义好的样式。
2.选择器详解
1.通用选择器
*{样式}
2.元素选择器
p{样式}
3.类选择器
1. 声明
.class名{样式}
2.引用可以引用多个类名用空格隔开
4.id选择器
#id名{样式}
3.特殊选择器
1.群组选择器
#id ,.class{样式}
1.子选择器
#id>.class{样式}
1.分类选择器
div .class{样式}
4.伪类选择器
作用：匹配元素不同状态的选择器
语法：所有的伪类都是以 : 作为开始
选择器：伪类选择器{样式}
伪类分类
1.伪类链接
:link 匹配尚未访问的超级链接状态
:visited 匹配访问过的元素的状态
2.动态伪类
:hover 匹配鼠标悬停在元素上时的状态
:active匹配鼠标激活时元素的状态 超链接、文本框、
密码框点击的时候，就是active。
:focus匹配元素获取焦点时的状态 文本框 和密码框
5.尺寸与边框
1.单位
1.尺寸单位
1.px 像素
1024*768
2.in 英寸
1in=2.54cm
3.pt 磅 （1pt=1/72in）
4.cm 厘米
5.mm 毫米
6.em 相对父元素乘以倍数
7.rem 相对于根元素(html,body)乘以倍数
8.% 相对单位
2.颜色单位（取值）
1.颜色英文单词
blue,red,green,yellow....
2.rgb（r,g,b）
r:red;
g:green;
b:blue;
r,g,b:0-255
rgb(0-255,0-255,0-255)
3.rgb(r%,g%,b%)
4.rgba(r,g,b,aplha)
aplha:透明度，0-1之间的小数，值越大，不透明度越高
5.#rgb
16位数字 ：0-9和a-f
2.尺寸属性
1.作用
改变元素的宽度和高度
2.语法
width:宽度 取值：px %
min-width:最小宽度
max-width:最大宽度
height:高度 取值：px %
min-height:最小高度
max-height：最大高度
3.页面中允许修改尺寸的元素
1.所有的块元素允许修改尺寸
ex:div,h1-h6,p,ul,li,ol,dl,dt,dd
2.行内元素允许修改尺寸
表单控件元素
3.本身具备width和height属性的元素
ex:img,table
注意：大部分行内元素不能修改
span,a,i,u,b,s
3.溢出处理
当内容多，元素区域小的时候，会产生溢出的效果，默认都是纵向溢出
属性：overflow,overflow-x,overflow-y
取值：
1.visible 可见的，默认值，溢出可见
2.hidden 隐藏的，溢出的内容全部隐藏，不可见溢出
3.scroll 显示滚动条，溢出时可用
4.auto 自动，溢出时自动显示滚动条并且可用
==============================
9.29
1、边框线
属性：border：
取值：
2、边框倒角
属性：border-radius:
取值： px %
3、边框阴影
属性：box-shadow:
取值： inset h-shadow v-shadow blur spread color;
1、 h-shadow:阴影的水平偏移距离 px
正值为右偏移 负值为做偏移
2、v-shadow:阴影的垂直偏移方向 px
正值为下偏移 负值为上偏移
3、blur :模糊距离，取值越大模糊距离越远 越模糊
4、spread:阴影的大小，指定要在基础阴影上扩充出来的大小距离，取值以px为单位的数值
5、color：阴影颜色
6、inset:将默认外阴影转为内阴影 在第一位
4、轮廓
轮廓指的是边框的边框，绘制于边框外的线条。
属性：outline:width style color;
width:宽度
style:线条样式
color:线条颜色
outline:none/0; 取消轮廓
5、框模型
保持设置的宽高 box-sizing:border-box;
1、内边距 padding
取值：left左 right右 top上 bottom下
px (%)少用
取值：auto 则内容居中
2、外边距margin
6、背景颜色
1.背景色
属性：background:
取值：颜色
2.背景图片
属性：background-image：url();
取值：url()
3.背景图像平铺
属性：background-repeat
取值：
1.repeat
默认值，横向和纵向同时平铺
2..repeat-x
纵向平铺
4.背景图像尺寸
属性：background-size:
取值：
1.width hegiht
2.width% height%
3.cover
将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止
4.contain
将背景图等比放大；直到背景图片碰到某个边缘位置
5.背景图片固定
作用：将普片固定在网页在某个位置，一直在可视区域内，不会随着
background-attachment:
取值：
1.scroll 默认值滚动
2.fixed 固定
6.背景图片定位
作用：改变背景图片的位置
属性：background-position:
取值：
1.x y
x:
背景图片水平偏移距离
取正向下右 取负向左
y:
背景图片垂直偏移距离
取值为正向下 取负为上
2.%
0%为起始
50%为中间
============================================
9.30
1、渐变
1、什么是渐变
多种颜色平缓变化的一种显示效果
2、渐变的主要因素
色标：一种颜色及其出现的位置
一个渐变由多个色标组成（至少两个）
3、渐变分类
1.线性渐变
一直显得方向来填充渐变色
2。径向渐变
以圆形的方式实现填充的效果
3.重复渐变
将线性渐变或径向渐变重复几次实现效果
4、线性渐变
属性：background-image：
取值：
liner-gradient(angle,color-point 1.....);
1.angle
1.关键字
to top:从下向上填充
to right:从左向右填充
to bottom:从上向下填充
to left:从右向左填充
2.角度值
0deg :从下向上填充
90deg:从左向右填充
180deg:从上向下填充
270deg:从右向左填充
2.color-point
色标：颜色及其位置
取值：颜色以及位置的组合，中间用空格分开
ex:
red 0% 在填充方向的开始位置用红色
5、径向渐变
background-image:radial-gradient(100px at center center,red,yellow,blue);
6、重复渐变
1.重复线性渐变
background-image:repeating-linear-gradient(angle,color-point 1,color-point 2...);
2.重复径向渐变
background-image:radial-gradient()
2、文本格式化属性
1、指定字体
属性：font-family
取值：用逗号隔开字体名称列表
ex
font-fmily:"微软雅黑","Arial","黑体";
2、字体大小
属性：font-size
取值：以px或pt为单位的数值
3、字体加粗
属性：font-weight
取值：
bold：加粗（b，h1~h6）
normal:正常
value:400-900整百的数字
4、字体样式
属性：font-style
取值：
italic：斜体（i）
nromal:正常
5、小型大写字母
将小写字符 变称答谢，但大小与小写字符一致
属性：font-variant
取值：
mormal 正常
small-caps 小型大写字符
--------------------------------------------------------------
10.10日
1、定位
1、堆叠顺序
1、属性
属性：Z-index
取值：无单位的数字，数字越大越靠前（数字越大在上面 ）
2、注意
1、只要已定位元素才能修改堆叠顺序
2、默认堆叠顺序是后来者居上
3、父级元素无法修改堆叠顺序，子级永远在父级之上
2、固定定位
1、语法
position:fixed;
配合着 偏移属性 实现元素的位置初始化
2、注意
1、固定定位元素会变成块级
2、固定定位元素永远都是相对于body实现位置初始化的
3、固定定位元素也会脱离文档流
====================
CSS3 Core (css3 核心)
1、复杂选择器
1、兄弟选择器
兄弟元素：具备相同父元素的平级的元素称之为兄弟元素
兄弟选择器，只能向后找，不能向前找
1、相邻兄弟选择器
作用：获取紧紧挨在某元素后的兄弟元素
语法：选择器1+选择器2{}
2、通用兄弟选择器
作用：获取某元素后所有满足条件的兄弟元素
语法：选择1~选择器2{}
2、属性选择器
1、 elem[attr]
elem:表示任意元素
attr:表示任意属性
作用：匹配页面中所有附带attr属性的elem元素
2、p[class]{}
3、p[id]{}
4、[attr=value]
作用：匹配attr属性值为 value的元素
3、伪类选择器
以学过的伪类：
动态伪类：焦点 :hover,点击 :active,:focus,
链接伪类：:link,:visited
1、目标伪类
作用：突出显示活动的HTML锚点元素。匹配被激活的锚点
语法： selector:target{}
div:target{} div作为锚点被激活是的样式
2、结构伪类
作用：通过元素的结构关系匹配元素
1、:first-child
匹配的元素是属于其父元素中的第一个子元素
p:first-child{}
2、:last-child
匹配的元素是属于其父元素中的最后一个子元素
3、 :nth-child(n){}
匹配的元素是属于其父元素中第n个子元素
table tr:nth-child(n);
4、:empty
匹配没有子元素的元素
5、 :only-child
匹配的元素是属于父元素中唯一的子元素
3、否定伪类
将满足指定选择器的元素给排除出去
语法: :ont(selector){}
table tr:not(:first-child){
font-size:48px;
//除第一行以外所有行的文字大小为48px
}
4、伪元素选择器
1、 :first-letter 或 ::first-letter
作用：匹配某个元素的首字符
2、 :first-line 或 ::first-line
作用：匹配某个元素的首行
3、 ::selection
作用：匹配被用户选取的内容
注意：只能修改文本颜色 和 背景颜色
2、内容生成
1、什么是内容生产
使用css动态的向某个元素中插入一段能容
2、伪元素选择器
1、:before 或 ::before
作用：匹配到某元素的内容区域之前
(:before)内容
2、:after 或 ::after
作用：匹配到某元素的内容区域之后
内容(:after)
3、属性
属性：content
作用：相匹配到的位置处增加内容
取值：
1、用 "" 引起来的普通文本
2、 url():生成一副图像
4、解决问题
1、浮动元素父元素高度问题
.clear:after{
content:"";
display:block;
clear:both;
}
2、子元素的外边距溢出问题
1、#d1的最后一个子元素位置处 : :after
2、增加一个 "空"元素
3、必须是一个 块级 或 table 的元素
#d2:before{
content:"";
/*解决上外边距溢出属性值加 table*/
display:table;
clear:both;
}
3、弹性布局(Flexible Layout)
1、什么是弹性布局
弹性布局(Flexible Layout),是一种布局方式，
只要是解决某元素中 "子元素" 的布局方式。为
布局提供最大的灵活性
2、弹性布局的相关概念
1、弹性布局的容器
简称为 "容器"，子元素的父元素，称为“容器”
2、弹性布局的项目
简称为“项目”，要实现布局效果的元素，称为“项目”
3、主轴（main axis）
项目们排列方向的一根轴，就称之为 主轴
如果项目们按x轴排列（横向排列），那么x轴就是主轴
如果项目们按y轴排列（纵向排列），那么y轴就是主轴
4、交叉轴(cross axis)
与主轴交叉的一根轴就是交叉轴
如果主轴是X轴，那么y轴就是交叉轴
如果主轴是y轴，那么x轴就是交叉轴
3、语法
1、flex的容器
将元素变为flex容器后，那么所有的子元素都浆变为flex项目，
都允许按照弹性布局的方式排列如何将元素变为flex容器？？
属性：display
取值：
1、flex将块级元素变为容器
2、inline-flex :将行内元素变为容器
注意：
1、元素设置为flex容器之后，子元素的
float,clear,vertical-align将失效
2、元素设置为flex 容器之后，子元素的尺寸允许被修改
3、容器的text-align 属性失效
2、容器的属性
1、flex-direction
作用：指定容器的主轴及其排列方向
取值：
1、row
默认值，即主轴为x轴，起点在左端
2、row-reverse
主轴为x轴,起点在右端
3、column
主轴为y轴，起点在顶端
4、column-reverse
主轴为y轴，起点在底端
2、flex-wrap
作用：当主轴排列不下所有项目时如何换行
取值：
1、nowrap
默认值，即空间不够时，也不换换行，项目会自动缩小
2、wrap
换行
3、wrap-reverse
反换行
3、flex-flow
作用：是flex-direction 和 flex-wrap的缩写形式
取值：
1、row nowrap;（默认值）
2、direction wrap;
4、justify-content
作用：定义项目在主轴上的对齐方式
取值：
1、flex-start
在主轴的起点对齐
2、flex-end
在主轴的终点对齐
3、center
在主轴上居中对齐
4、space-between
两端对齐
5、space-around
项目两边的外边距相同，但是中间的元素外边距叠加
5、align-items
作用：项目在交叉轴上的对齐方式
取值：
1、flex-start
交叉轴起点对齐
2、flex-end
交叉轴的终点对齐
3、center
交叉轴的居中对齐
4、baseline
交叉
5、stretch
3、项目属性
该组属性只能设置在某一项目元素上，只控制一个项目，
是不影响容器以及其他项目的效果
1、order
作用：定义项目的排列顺序，值越小，越靠近起点，默认为0
取值：整数数字，无单位
2、flex-grow
作用：定义项目的放大比例，如果容器有足够的剩余空间，
项目将如何放大
取值：
整数数字，无单位
数字越大，占据的剩余空间越多
3、flex-shrink
作用：定义项目的缩写比例，即容器空间不足时，项目该如何缩小
取值：
默认值为1，空间不足时，则等比缩小
取值为0，则不缩小
4、align-self
作用：定义当前项目在交叉轴的对齐方式
取值：
1、flex-start
2、flex-end
3、center
4、baseline
5、stretch
6、auto
继承自父元素的align-items属性
=====================================
10.13
1、css Hack
1、解决问题
解决 IE 浏览器的兼容性问题
针对不同的浏览器编写不同的css代码
2、CSSHack 的原理
使用css样式的优先级来解决兼容性问题的
3、CSSHack 的实现方式
1、css类内部 Hack
在样式属性名称前或属性后增加前后缀，
以识别不同的浏览器
+ ： IE6,7 的前缀
- ：IE6 的前缀
两者都出现时+号支持IE7，-号支持IE6
2、css选择器Hack
在选择器的前面增加前缀以便识别不同的浏览器
*：识别IE6
*+：识别IE7
*div{IE6的显示效果}
*+div{IE7的显示效果}
3、HTML头部引用Hack
使用IE条件注释来判断IE浏览器的版本，
从而执行不同的代码
语法：
<!--[if 条件 IE 版本号]>
满足条件要执行的HTML代码
改段代码只在IE6以上的浏览器中执行
1：放大
<1: 缩小
负数：物极必反
2、scale(x,y)
x:横向缩放比例
y:纵向缩放比例
3、单向缩放scale(x) scale(y);
3、旋转
/*背向的元素隐藏*/
backface-visibility:hidden;
1、什么是旋转
改变元素在页面上的角度
2、语法
属性：transform
取值：rotate(ndeg)
n取值为正，顺时针旋转
n取值为负，逆时针旋转
注意：
1、转换原点会影响最终的转换效果
2、元素旋转时是连同坐标轴一起旋转，
会影响后续的位移
4、倾斜
1、什么是倾斜
改变元素在页面中的形状
2、语法
属性：transform
取值：
1、skewX(xdeg);
让元素向着x轴的方向产生倾斜效果，
实际上是改变y轴的倾斜角度值
x 取值为正，y轴逆时针倾斜
x 取值为正，y轴顺时针倾斜
2、skewY(ydeg)
让元素向着y轴的方向产生倾斜效果，
实际上是改变x轴的倾斜角度值
y取值为正，x轴顺时针倾斜
y取值为负，x轴逆时针倾斜
4、3D转换
/*背向的元素隐藏*/
backface-visibility:hidden;
1、透视距离
模拟人的眼睛到3D转换元素之间的距离
属性：perspective
注意：该属性要加在3D转换元素的父元素上
2、3D的旋转
属性：transform
取值：
1、rotateX(xdeg)
以x轴为中心轴，旋转元素的角度
2、rotateY(xdeg)
以Y轴为中心轴，旋转元素的角度
3、rotateZ(xdeg)
以Z轴为中心轴，旋转元素的角度
4、rotate3D(x,y,z,ndeg)
x,y,z取值为大于0的数字时，表示该轴要
参与旋转，取值为0则不参与旋转
rotate3d(1,0,0,45deg);
3、过渡
1、什么是过渡
使得css的属性值，在一段时间内平缓变化的效果
2、过渡的语法 - 4个属性
1、指定过渡属性
作用：指定那个属性值在变化的时候需要使用
过渡的效果来体现
属性：transition-property
取值：
1、all （所有）
能使用过渡的属性，一律用过渡
2、具体属性名
ex:
1.transition-property:background;背景颜色变化时用过渡
2.transition-property:border-radius;边框倒角变化时用过渡
3.transition-property:all;所有可以过渡的元素都用过渡
允许设置过渡效果的属性
1.颜色属性
2.取值的数字属性
3.转换属性 - transform
4.阴影属性
5.渐变属性
6.visibility属性，可见属性
2、过渡的时长
作用：指定在多长时间曲线函数
属性：transition-duration
取值：以 s 或 ms 为单位的数值
1000ms = 1s
3、指定过渡速度时间曲线函数
属性：transition-timing-function
取值：
1。ease
默认值，慢速开始，快速变快，慢速结束
2.linear
匀速
3.ease-in
慢速开始，加速结束
4.ease-out
快速开始，慢速结束
5.ease-in-out
慢速开始和结束，中间先加速后减速
4、指定过渡延迟时间
属性：transition-delay
取值：以 s 或 ms 为单位的数值
3、过渡属性编写位置
1、将过渡声明在元素声明的样式中
即管去，又管会
2、将过渡声明在触发的操作中（hover）
只管去，不管回
4、过渡的缩写
transition:property duration timing-function delay;
transition:background 2s linear,border-raidus 2s;
transition:all 2s;
4、动画
1、什么是动画
使元素从一种样式逐渐变化为另一种样式
即将多个过渡效果放在一起
动画是通过 “关键帧”，来控制动画的每一步
关键帧：
1、动画执行的时间点
2、在该时间点上的样式是什么
2、动画的使用步骤
1、声明动画
为动画起名
定义关键帧
2、为元素调用动画
指定元素调用的动画名称以及各个参数属性
3、声明动画
@keyframes 动画名称{
/*定义该动画的所有的关键帧 */
0%{
/*动画开始时元素的样式*/
}
25%{
/*动画执行到1/4时元素的样式*/
}
50%{
/*动画执行到1/2时元素的样式*/
}
100%{
/*动画结束时的样式*/
}
}
兼容问题 -webk- -o- -ms-
@-webk-keyframes 动画名称{
/*定义该动画的所有的关键帧 */
0%{
/*动画开始时元素的样式*/
}
25%{
/*动画执行到1/4时元素的样式*/
}
50%{
/*动画执行到1/2时元素的样式*/
}
100%{
/*动画结束时的样式*/
}
}
4、动画属性（调用动画）
1、animation-name
作用：指定调用动画的名称
2、animation-duration
作用：指定动画执行一个周期的时长
取值：以 s 和 ms
3、animation-timing-function
作用：指定动画的速度时间曲线函数
取值：
:ease,linear,ease-in,ease-out,ease-out
4、animation-delay
指定动画的延迟时间
5、animation-iteration-count
作用：指定动画的播放次数
取值：
1、具体数值
2、infinite
6、animation-direction
作用：指定动画的播放方向
1、normal
默认值，正常播放 0%~100%
2、reverse
逆向播放 100%~0%
3、alternate
轮流播放
奇数次数播放时，正向播放
偶数次数播放时，逆向播放
7、动画的简写方法
animation:name duration timing-function delay
iteration-count animation-direction;
8、animation-fill-mode
作用：规定动画在播放前或播放后的状态
取值：
1.none :默认值
2.forwards
动画播放完成停留在最后
3.backwards
动画播放器，延迟时间内，动画保存在第一个帧状态
4.both
forwards和backwards的结合
9、animation-play-state
作用：指定动画是处与什么状态
取值：
1.paused 暂停
2、running ：播放
CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。
-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。
现在规范中支持的效果有：
grayscale 灰度 值为0-1之间的小数
sepia 褐色 值为0-1之间的小数
saturate 饱和度 值为num
hue-rotate 色相旋转 值为angle
invert 反色 值为0-1之间的小数
opacity 透明度 值为0-1之间的小数
brightness 亮度 值为0-1之间的小数
contrast 对比度 值为num
blur 模糊 值为length
drop-shadow 阴影
例子
1.灰色
-webkit-filter: grayscale(1);
filter: grayscale(1);
2.饱和度
-webkit-filter: saturate(3.6);
filter: saturate(3.6);
3.
2018-05-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人