WEB
什么是WEB
互联网上的一种应用程序-->网页
典型的应用：
C/S
Client:客户端
Server:服务器
B/S
B: Browser :浏览器
S: Server :服务器
WEB的组成 & 运行流程
由服务器，浏览器 和通信协议组成
服务器：处理用户的请求(request)和响应(response)
浏览器：代替用户向服务器发送请求(User Agent)
通信协议：规范了数据时如何打包以及传递的 (http)
http:Hyper Text Transfer Protocal
超级 文本 传输 协议
WEB服务器
作用：
接受用户的请求并给出响应
存储WEB信息
具备安全性功能
产品：
APACHE
TOMCAT
IIS---Internet Information Service
Nginx
技术：
JSP - Java Servre Page
PHP -
ASP.NET(微软)
Python Web (Django, Flask,... ...)
WEB浏览器
作用：
代替用户向服务器发送请求
作为响应数据的解释引擎
主流浏览器产品
Micosoft Internet Explorer(IE)
Google Chrome
Mozilla Firefox
Apple Safari
Opera Opera
浏览器考内核处理数据，内核包含两部分：
内容排版引擎 - HTML, CSS
脚本解释引擎 - JS
浏览器技术：
也成为"前端技术"
HTML,CSS,JavaScript
HTML概述
HTML介绍和基本语法
什么是HTML
HTML:Hyper Text Markup Language
超级 文本 标记 语言
编写网页的一款语言
超文本：具备特殊功能的文本就是超文本
普通文本 a : 普通字符 a
超文本 a : 表示的是超链接功能
普通文本 b :普通文本 b
超文本 b :表示文字加粗功能
标记：超文本的组成形式
普通文本 a :a
超文本 a :<a></a>
语言：语言有自己的语法规范
W3C: World Wide Web Consortium
万维网联盟
HTML在计算机中的表现
所有的文案工业都是以 .html或.htm 作为结尾的文件来进行表示的
开发工具：所有的文本编辑累软件都可以做为开发工具
记事本
Editplus(主推), Sublime
Dreamweaver,WebStorm, ......
运行工具： 浏览器
推荐使用：Google Chrome
HTML 基础语法(重点)
标记语法
什么是标记
在网页中，用于表示功能的符号称为"标记/标签/元素"
语法
所有的标记，在使用时必须用<>括起来
标记分为 双标记 和 单标记
双标记：
由开始标记和结束标记组成
<标记的名字>....</标记名称>
eg: <a>...</a>
<b>...</b>
div标记
<div>...</div>
p标记
<p>...</p>
注意：双标记，有开始，必须要有结束，否则显示效果会出错
建议写法：标记要打打一对
单标记：
只有一个标记，即能表示开始，又能表示结束
单标记自己就是个独立的功能，没有文本或其他内容可以控制
语法：
<标记> 或 <标记/>
eg: <br> 或 <br/> :换行
<hr> 或 <hr/> :一条水平线
<impg> 或 <img/> : 显示图片
标记的嵌套
定义：在一对标记中，再出现另外一对标记，目的是为了实现功能的嵌套
超链接：<a>...</a>
加粗: <b>...</b>
加粗的超接连： <a><b>...</b></a> 或 <b><a>...</a></b>
*为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进
正确写法：
<a>
<b>... ...</b>
</a>
练习：
编写一对html标记
在html标记中其那套一对head标记
在html标记中其那套一对body标记
答案：
<html> -->外面的一层叫：父元素/父标记
<head>... ...</head> -->里面的一层叫：子元素/子标记
<body>... ...</body>
</html>
标记的属性和值
什么是属性
定义：在标记中，用来修饰标记显示效果的东西就是属性
语法：
属性的声明必须在开始标记中
<标记 ---属性的声明位置处></标记>
属性名和标记名之间要用空格隔开
<标记 ---属性名称></标记>
属性名和属性值之间用等号连接，属性值要用双引号或单引号引起来
<标记 属性名="值"></标记>
一个元素允许设置多个属性，多属性之间之间排名不分先后，但多属性之间要用空格隔开
<标记 属性1="值1" 属性2="值2"></标记>
练习：
创建一对p标记,内容随意
增加一个属性，名称为 align 取值为 center
增加一个属性，名称为 id 取值为 p1
答案：
<p align="center" id="p1">这是一个坑</p>
HTML中的注释
注释格式：<!-- 注释内容 -->
注意：
注释不能出现在<>中
错误写法如：<p<!-- ... ... -->>... ...</p>
注释不能嵌套
<!--
这是内容
<!--
内容
-->
-->
HTML中不区分大小写
<p></p>
<P></P>
<p></P>
HTML文档结构
文档类型声明
出现在网页最顶端的第一个标记
作用：告诉浏览器使用HTML的哪个版本
<!doctype html>
HTML页面
在文档类型声明之下，使用一对html标记来表示网页的开始和结束
<html></html>
在html中，包含两对子元素
<head></head>
表示网页头部信息
<body></body>
表示网页主题信息
练习：
创建01-page.html网页文件
搭建网页结构
增加文档类型声明
增加html跟标记
在html中增加头部和主体
增加适当的注释
<!--文档 类型说明-->
<!--html跟标记-->
<!doctype html>
<html>
<!--网页头部-->
<head>小傻瓜</head>
<!--网页主题-->
<body><b>真惨</b></body>
</html>
<head> 标记
作用：描述网页的头部信息，对于网页起到控制的作用
子元素：
<title>标题网页</title>
指定网页编码
<meta charset="utf-8">
告诉浏览器按照utf-8的编码方式进行网页解析
注意：必须要保证网页文件的编码方式也是utf-8
文本相关标记
HTML中特殊字符处理
表示一个空格
< 表示一个 <
> 表示一个 >
© 表示一个 ©
¥ 表示 ￥
文本样式标记
作用：
修改文本在网页中的表现形式
标记：
<i></i> :斜体显示文本
<u></u>:下划线显示文本
<s></s>:删除线显示文本
<b></b>:加粗显示文本
<sup></sup>:上标方式显示文本
<sub></sub>:下标方式显示文本
练习：
这是有一段加粗，斜体，删除线，下划线，上标 和下标的文本
特点：该组标记能够与其他的标记的标记或文本在一行内显示
标题标记
作用：
以不同的文字大小以及加粗方式显示文本
语法：
<h#></h#>
#: 1-6
<h1></h1>:一级标题
<h2></h2>:二级标题
练习：
<h1>静夜思</h1>
<h2>李白</h2>
<h3>床前明月光</h3>
<h4>疑是地上霜</h4>
<h5>举头望明月</h5>
<h6>低头思故乡</h6>
特点：会改变文字的大小以及加粗效果
每个标题都会具备垂直的空白距离
每个标题独占一行
每个标题都会具备一个属性
属性：align
取值：
left : 左对齐
center : 居中对齐
right : 右对齐
<h1 align="left">静夜思</h1>
<h2 align="center">李白</h2>
<h3 align="right">床前明月光</h3>
<h4>疑是地上霜</h4>
<h5>举头望明月</h5>
<h6>低头思故乡</h6>
段落元素
作用：
突出显示一段文本，每一段文本独占一行/块，并且每个段落都会具备一段垂直空白距离
语法：
<p></p>
属性：
align
取值：
left / center / right
练习：
天长地久有时尽
此恨绵绵无绝期
<p>天长地久有时尽</p>
<P>此恨绵绵无绝期</p>
换行元素
<br>或<br/>
分区元素
块分区元素
标记：<div></div>
作用：布局 (合理划分网页空间)[配合CSS]
特点：独占一行/一块
行内分区元素
标记：<span></span>
作用：设置同一行文本的不同样式(配合CSS)
特点：允许在一个内显示多个span元素，也能够与其他的文本在一行内显示
行内元素与块元素
块元素
只要在网页中能独占一行/一块的匀速都成为块元素，简称为块元素
块元素： p h1 h2 h3 h4 h5 h6 div
作用：都可以做布局
* 所有的块元素都会具备align属性
行内元素：
多个元素能够在一行内显示的，就是行内元素
行内元素：span i b s u sub sup a 图片
作用：处理文本的样式
列表标记
作用：
按照从上到下的方式来进行数据排列
并能够显示列表的标识在内容的前面
列表的组成
列表的类型
列表的类型
有序列表 --> <ol></ol> (Order List)
无序列表 --> <ul></ul> (Unordered List)
列表项
<li></li> (List Item)
eg:
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
练习：
创建03-list.html
搭建网页结构
在body中创建一个有序列表，用四个列表项分别标识四大名著的名称
在body中创建一个无序列表，用四个列表项分别四大天王的名称
列表属性
有序列表 - ol
type
取值
1:按数字方式排列显示，默认值
A:按大写英文字符显示
a:按小写英文字符显示
I:按大写罗马数字显示
i:按小写罗马数字显示
<ol type="I">
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ol>
start
指定有序的字符是 几 开始显示
<ol type="I" start="10">
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ol>
无序列表 --> ul
type
取值：
disc:实心原点，默认值
circle:空心圆点
square:实心方块
none:不显示任何标识
列表的嵌套
在一个列表项中，又出现一个列表
<ul>
<li>
<ul>
<li></li>
<ul>
<li>
<ul>
练习：
１水浒传
a西门庆
b潘金莲
c武大郎
２三国演义
i吕布
ii貂蝉
iii董卓
图像和超链接
URL (Uniform Resource Locator)
统一资源定位器 用于标识网络中资源的位置，俗称路径
URL分类：
绝对路径
访问网络资源时，使用绝对路径
eg: http://www.baidu.com
http://www.tmooc.cn
相对路径：
从当前文件所在的位置处去开始查找资源文件所经过的路径
如果当前文件和资源文件所处位置在同一目录时，则直接引用资源文件
i.gp
如果资源文件的父文件和当前文件在同一位置，则需要进入父文件下引用资源文件
imgs/i.jpg
如果资源文件和当前文件的父文件处在同一位置，则需要先从父文件出去在引用资源文件
../i.jpg
根相对路径
从WEB程序所在的根目录处开始查找资源文件
注意：
url中不能出现中文
url是严格区分大小写
图像
标记
<img>
属性:
src:
指定要显示的图片的路径
width:
宽度：以px为单位的数值(允许省略px)
px : pixel :像素
height:
高度：以px为单位的数值(允许省略px)
注意：如果宽度和高度只设定一个值的话，那么另外一个值也跟这等比缩放
<img src="asd/a.JPG" width="150">
<div align="center">
<img src="asd/b.jpg"width="150">
<h4>图-2</h4>
</div>
注意：p标记是不能嵌套块级元素的
超链接
什么是超链接
用户可以通过点击的操作来完成页面的跳转的行为
语法：
标记： <a>内容</a>
属性：
href : 表示是链接地址
target : 指定要打开的新网页的方式
取值：
_self : 默认值，在自身标签页中打开新网页
_blank : 在新标签页中打开新网页
表格
表格的语法
标记
表格: <table></table>
表行: <tr></tr> ----Table Row
单元格(列)：<td></td> ---- Table Data
创建以个四行四列的表格
属性：
table属性：
width : 指定表格的宽度，以px为单位数值(px可以省略)
height : 指定表格的高度，以px为单位数值(px可以省略)
border : 指定边框的宽度，以px为单位的数值(px可以省略)
align : 指定表格在其父元素中的水平对其方式
取值： left / center / right
cellpadding : 指定单元格内边距
指定单元格边框与内容之间的距离
cellspacing : 指定单元格外边距
指定单元格之间的距离(单元格与表格之间的距离)
tr属性
align
控制当前行内容的水平对齐方式
取值： left / center /right
valign
控制当前行内容的垂直对齐方式
取值： top / middle / bottom
bgcolor
控制当前行内容的背景颜色
取值：表示颜色的英文单词
td属性
width
height
align
valign
bgcolor
colspan : 跨列 / 合并列
rowspan : 跨行 / 合并行
不规则表格
单元格的跨列
从指定单元格的位置处开始，横向向右合并几个单元格(包含自己)，被合并的单元格要删除出去
语法： colspan="n"
单元格的跨行
从指定单元格的位置处开始，纵向向下合并几个单元格(包含自己),被合并掉的单元格要删除出去
语法： rowspqn="n"
行分组
什么是行分组
允许将表格中的若干行花跟到一组中，方便管理
语法：
表头行分组
允许将表格中最上方的若干行划分到一组中
<thead></thead>
表尾行分组
允许将表格中最下方的若干行划分到一组中
<tfoot></tfoot>
表主体行分组
表格中除了最上方和最下方之外的行们进行分组的话允许放在表主体行分组中
<tbody></tbody>
表单
作用：用于接受用户的数据并提交给服务器
表单两要素
from 要素
表单，用于收集用户信息并提交给服务器
表单控件
提供了能够与用户交互的可视化组件
form元素
作用：
表单，用于收集用户信息并提交给服务器
from 元素在网页中式不可见的，但功能不能忽略
语法：
标记：
<from></from>
属性：
action : 指定处理程序的地址 (默认提交给本页)
method : 提交方式 / 方法 (共提供7-8个值，常用的只有两个)
get(默认值)
通常是在向服务器要数据是使用
特点：
提交的数据会显示在地址栏上
安全性较低
提交数据最大为2KB
post
要将数据提交给服务器处理时使用
特点：
隐式提交，看不到提交数据
安全性较高
无提交数据的大小限制
表单控件(重难点)
作用 ＆ 注意：
作用：提供了能够与用户交互的可视化组件
注意：只有放在表单中的表单控件才允许被提交
表单控件都是"行内块"元素
表单控件详解(难点)
文本框 ＆ 密码框
文本框： <input type="text"> 显示输入
密码框： <input type="password"> 隐藏输入
属性：
name:定义控件名称
提交给服务器使用，如果没有name的话则无法提交
value:值
要提交给服务器的值，同时也是默认能显示在控件上的值
maxlength:
限制输入的最大字符数
placeholder : 占位符
用户在未输入任何数据时所显示的内容
按钮：
提交按钮：<input type="submit">
将表单数据提交给服务器
重置按钮：<input type="reset">
将表单内容恢复到初始化的状态
普通按钮：<input type="button">
允许通过JS自定义功能
属性：
value:按钮上显示的文本
<button>内容</button>
属性：type
取值：submit /reset / button
单选按钮 和 复选框
单选按钮：<input type="radio">
复选框：<input type="checkbox">
属性：
name:定义控件名称，处了定义名称之外，还起到分组的作用
一组中的单选按钮 或 复选框 名称必须一致
value :值
尽量提前声明
checked
设置预选中，该属性无值
隐藏域 和文件选择框
隐藏域：
作用：想提交给服务器但不想给用户看的数据放在隐藏域中
语法：<input type="hidden">
属性：
name:定义控件的名称
value:定义空件的值
文件选择框
作用：文件上传时使用
标记：<input type="file">
属性：
name:定义控件的名称
多行的文本域(框)
标记：<textarea></textarea>
属性：
name:定义控件名称
文本值就是value
cols:指定文本域默认显示的列数(宽度)
一行能够显示的英文字符量，中文减半
rows:指定文本域默认显示的行数(高度)
下拉选择框(下拉列表)
<select name="xxx">
<option value="值">显示数据</option>
</select>
CSS介绍
CSS: Cascading Style Sheets #样式表
HTML:搭建网页结构
CSS:修饰和美化网页
CSS的使用方式(重点)
内联方式：
又称为：行内样式，内联样式
特点：将CSS的内容定义在单独的HTML标签中
语法：
<标记 style="样式声明">
样式声明：就是要修饰的样式效果
样式声明是有样式属性和属性值来组成的
属性和值之间使用冒号(:)来连接
<标记 style="属性:值">
在一个style中允许出现多个样式声明，多个样式声明之间，用分号(;)隔开
<标记 style="属性:值;属性:值;">
常用的属性和值：
文字大小：
属性：font-size
取值：以px为单位的数字
eg:设置某div的文字大小为18px
<div style="font-size:18px;">xxx</div>
文本颜色:
属性：color
取值：取值为表示英文的单词
eg:设置某div的文字颜色为红色
<div style="color:red;">xxx</div>
修改背景颜色：
属性：background-color
取值：取值为表示英文的单词
练习：创建一个网页 01-style.html
创建一个div 内容随意
使用内联
文字36px
文本红色
背景黄色
<div style="font-size:36px;color:red;background-color:yellow;">我们都要好好的</div>
内部样式表
作用：
让定义好的样式能够使用在当前页面的多个元素上
语法：
<head>
<style>
样式规则1
样式规则2
... ...
样式规则n
</style>
</head>
样式规则：
由选择器和样式声明组成的
目的：为了声明一组独立的样式
选择器：规范了页面中哪些元素能够使用声明好的样式
语法：
选择器{
属性1:值1;
属性2:值2;
}
eg:
p{
color:red;
}
span{
font-size:36px;
}
让所有的div都实现文字文本的变化：
解：<head>
<style>
div{
font-size:36px;
color:red;
background-color:yellow;
}
</style>
</head>
外部样式表
作用：
将声明好的样式应用在多个网页中
将样式规则声明放在独立的css文件中(***.css)
在使用的网页中对css文件进行引入即可
使用步骤：
声明：
创建.css文件，并编写样式规则
引用：
<head>
<link rel="stylesheet" href="css文件路径">
</head>
样式表的特征
继承性
大部分的css属性是可以由父元素继承给子元素的
层叠性
允许为一个元素定义多种的使用方式或多个样式规则
如果样式的声明之间不冲突的话，那么所有的样式声明都可以应用在元素上
优先级
允许为一个元素定义多种的使用方式或多个样式规则，如果样式声明冲突的话，会按照不同方式的优先级来应用样式
浏览器缺省设置(不进行设置，浏览器自带的属性) 低
内部或外部样式表(定义的属性) 中
就近原则：后定义者优先
内联方式 高
简易调错
Invalid property value
属性值写错了
Unknown property name
属性名称写错了
CSS选择器(重难点)
作用：
规范了页面中那些元素能够使用声明好的样式
目的：
为了匹配页面的元素
选择器的详解
元素选择器
特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素
语法：
标记{
样式声明;
}
eg:div{...}
p{...}
input{...}
练习：设置页面中所有的a元素，不显示下划线
不显示下划线：
text-decoration:none
<head>
<style>
a{
text-decoration:none;
}
</style>
</head>
类选择器
特点：允许被任意元素所引用的选择器
语法：
声明
.类名{样式声明}
类名：
字母，数字，下划线("_")，连字符("-") 组成
数字不能开头
eg:
div{ ... } 元素选择器
.div{ ... } 类选择器
引用：
<标记 class="类名">引用不加点(".")
练习：
创建一个网页04-selector-class.html
创建几个元素(div,p,span,h1)
使用类选择器
文字大小:28px
背景颜色设为silver
斜体显示：font-style:italic;
特殊用法：
分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同 样式的细分控制
语法：
元素选择器.类选择器{ ... }
eg:
.inportant{
类选择器，匹配所有class为important的元素
}
div{
元素选择器，匹配所有div元素
}
div.important{
匹配class为important的div元素
}
多类选择器的引用方式
允许让一个元素同时引用多个类选择器，多个选择器之间使用 空格 隔开
语法：
.c1{ ... }
.c2{ ... }
.c3{ ... }
<标记 class="c1 c2 c3">
练习：增加一个类选择器
.dec{text-decoration:underline;} 出现下划线
让所有元素都增加对dec累选择器的引用
id选择器
ID的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识
<div id="main"></div>
ID选择器
为了匹配页面中指定ID值的元素
语法：
#ID值{ ... }
eg: #main{color:red;}
群组选择器：
作用：
定义多个选择器们的共有样式
定义方式是以一个逗号隔开的选择器列表
语法：
选择器1,选择器2,选择器3,... ... { ... ... }
eg:
#main,p,div.span,.redColor{
corlor:red;
}
等同于：
#main{color:red;}
p{color:red;}
div.spqn{solor:red;}
span{color:red;}
.redColor{color:red;}
后代选择器
作用：
依托于元素的后代关系来匹配元素(不限制层级)
语法：
选择器1 选择器2{ ... }
eg: #wang span{
匹配id为wang的元素中所有的span元素
}
子代选择器
作用：
依托于元素的子代关系来匹配元素
(只有一层层级关系)
语法：
选择器1>选择器2{ ... }
#wang>span{
id为wang的元素中的下一级span元素
}
#wang>p>span{
background-color:yellow;}
等同于
#wang p span{
background-color:blue;}
等同于
#wang>p span{
background-color:green;}
伪类选择器
作用：
匹配元素不同状态的选择器
eg: 超链接 a 元素, 具备四个状态
状态1:链接未被访问是时的状态
文本为蓝色，并有下划线
状态2:鼠标悬停在元素上的状态
鼠标的状态变成了"手"
状态3:当元素被激活时(鼠标点击时)
文本会变成红色
状态4:当访问过后的时候
文本颜色变为紫色
语法：
:伪类状态
通常会配合其他元素一起使用
选择器:伪类状态{ ... }
选择器：匹配元素
:伪类状态：匹配状态
链接伪类
:link
匹配超链接未被访问时的状态
:visited
匹配超链接被访问后的状态
动态伪类
:hover
匹配悬停在元素上面时的状态
:active
匹配元素被激活时的状态
:focus
匹配获取焦点时的状态
(文本框和密码框使用居多)
选择器的优先级
当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式
选择器的优先级看"权值"
选择器 取值
元素选择器 1
类/伪类选择器 10
id选择器 100
内联方式 1000
如果是复杂的选择器(后代，子代，分类)的计算方式是将选择器们的权值累加
尺寸 与 边框
单位
尺寸单位
px - 像素
% - 占据父元素对应属性的占比
in - 英寸(描述硬件大小) 1 in=2.54 cm
pt - 磅 1pt=1/72in
pt在css中通常表示文字大小
计算机中通常设置PPI(Pixel Per Inch)为72
cm - 厘米
mm - 毫米
在css中，所有的尺寸单位是不能省略的
颜色单位(颜色取值)
rgb(r,g,b)
r: 红色范围值: 0-255
g: 绿色范围值: 0-255
b: 蓝色范围值: 0-255
eg:
background-color:rgb(255,0,0):红色
rgb(0,255,0):绿色
rgb(0,0,0):黑色
rgb(255,255,255): 白色
rgba(r,g,b,alpha)
alpha:颜色透明度,取值 0-1 之间的数字
0:完全透明
1:完全不透明
eg:
background-color:rgba(128,36,72,0.5) 半透明
#rrggbb
由6位16禁止数字来组成的颜色
eg:
#ff0000:红色
#rgb
#rrggbb的缩写，当每两位数字相同时，可以使用所写的方式
#ff0000 --->#f00
#11ffss --->#1f3
#333 ---> #333333
表示颜色的英文单词
red,green,blue,... ...
尺寸 和 边框
尺寸属性
作用
改变元素的宽度和高度
属性
宽度
属性：width
取值：以px 或%为单位的数值
高度
属性：height
取值：以px或%为单位的数值
所有块级元素的尺寸:
宽度：占父元素100%的款
高度：以内容为准
所有行级元素的尺寸
宽度：以内容为准
高度：以内容为准
注意：在 html 和 css 中，除img以外的所有行内元素的尺寸是不允许修改的
行内块元素可以改 如按钮，文本框等
溢出处理
什么是溢出
当使用尺寸属性限制尺寸时，如果内容所需要的空间大于元素的尺寸的话，则产生溢出效果
溢出处理的属性
属性：overflow
取值：
visible
可见的，默认值
hidden
溢出的内容会隐藏
scroll
显示滚动条，溢出时滚动条可用
auto
自动，溢出时产生滚动条并可用
边框属性
边框实现
边框的简写方式
通过一个属性完成四个方向边框的所有效果
设置(宽度，样式，颜色)
属性：border
取值：width style color
width:边框的宽度，以px为单位的数值
style:边框的样式
取值：
solid:实线
dotted:虚线(点)
dashed:虚线(线)
color:边框的颜色
取值为合法的颜色值
可以取值为 transparent(透明)
特殊用法：
border:none; 取消边框,无边框显示
单边定义
定义某一条边框的宽度，样式，颜色
属性：border-方向:width style color;
方向：top / bottom / left /right
eg:上边框3px 实线 蓝色
border-top:3px solid blue;
单属性定义
这只四个方向边框的某一个属性值
语法：border-属性:值;
属性：width / style /color
eg: 设置四个方向的边框尺寸为5px
设置四个方向的边框颜色为pink色
border-width:5px
border-color:pink;
单边单属性定义
设置某一方向边框的某属性值
属性：border-方向-属性:值;
方向：top / bottom / left / right
属性： width / style /color
下边框样式为点虚线
border-bottom-width:dotted;
右边框宽度为3px
border-right-width:3px;
左边框颜色为红色
border-left-color:red;
轮廓
outline:none;
边框倒角
作用：
将边框的四个直角变为圆角
语法
属性：border-radius
取值：
以px为单位的数值
以%为单位的数值(一般给50%)
边框阴影
属性：box-shadow:h-shadow v-shadow blur spread color;
h-shadow:阴影的水平偏移距离
取值为数字
取值为正，阴影向右偏移
取值为负，阴影向左偏移
v-shadow:阴影的垂直偏移距离
取值为数字
取值为正，阴影向下偏移
取值为负，阴影向上偏移
blur:阴影的模糊大小
取值为数字
数字越大越模糊
spread:阴影的大小
取值为数字
color:阴影的颜色
box-shadow:0px 0px 5px 0px #0000FF
框模型 - Box Model
什么是框模型
框：页面元素皆为框
框模型：定义元素的尺寸和距离的一种计算方式
Box Mokel:盒模型,方框属性
包含：尺寸，边框，外边框 和 内边框
当框模型属性介入到元素时，元素的整体占地尺寸会发生改变，计算方式如下：
占地宽度=左右外边距+左右边框+左右内边距+宽
占地高度=上下外边距+上下边框+上下内边距+高
外边距
什么是外边距
围绕在元素边缘之外的空白距离就是外边距
外边距是不允许被其他元素占据的
语法：
属性
margin
最多能够设置四个方向的外边距值
margin-top
上外边距的值
margin-right
右外边距的值
margin-bottom
下外边距的值
margin-left
左外边距的值
取值
以px 为单位的数值
eg:左外边距的值为20px
margin-left:20px
以%为单位的数值
以父元素尺寸的占比作为外边距的值
取值为负数
目的是为了移动元素
元素设置上边距为正数，元素下移动
元素设置上边距为负数，元素上移动
元素设置左外边距为正数，元素右移动
元素设置左外边距为负数，元素左移动
取值为 auto
自动：自动计算左右外边距的值
注意：
auto 只能应用在左右外边距上，上下无效
只能为设置宽度的块级元素设置左右外边距为auto,目的是为了让块级元素水平居中
margin的简洁写法
margin:value;
value表示的是上下左右四个方向的外边距的值
eg:margin:10px;
margin:v1 v2;
v1:表示上下外边距的值
v2:表示左右外边距的值
eg:margin:0px auto;
margin:v1 v2 v3;
v1:表示上外边距的值
v2:表示左右外边距的值
v3:便是下外边距的值
eg:margin:5px auto 3px;
margin:v1 v2 v3 v4
v1:上外边距
v2:右外边距
v3:下外边距
v4:左外边距
页面中具备外边距的元素
body,p,h1~h6,ul,ol
以上元素都具备默认的外边距
CSS重写：通过元素选择器将标记的默认样式改掉
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol{
margin:0px
}
</style>
内边距
什么是内边距
内容与元素之间的距离
注意：内边距会扩大元素边框的所占区域
语法：
属性：
padding:四个方向的内边距值
padding-top/right/bottom/left:值;
取值：
以px 为单位的数值
以%为单位的数值
简洁写法：同margin
padding:value;上下左右
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上 右 下 左
页面中具备默认内边距的元素
ul,ol
文本框，密码框，按钮
box-sizing
作用
指定框模型(尺寸，边框，内边距)的计算方式
语法
属性：box-sizing
取值：
content-box : 默认值，元素的width和height,只规定到元素的内容区域的宽和高，内边距和边框的尺寸是需要额外计算再附加到当前元素上的
div{
width:300px;
height:40px;
border:1px solid #000;
padding:1px 12px;
box-sizing:content-box;
}
整体高度：44px
整体宽度：326px
border-box: 元素的width 和 height, 能规定到元素边框，内边距 以及内容尺寸的
width=边框宽度+内边距+实际内容宽度
height=边框高度+内边距+实际内容高度
div{
width:300px;
height:40px;
border:1px solid #000;
padding:1px 12px;
box-sizing:border-box;
}
整体宽度：300px
整体高度40px
背景属性
背景颜色
属性：background-color
取值：合法的颜色值
注意：背景颜色是从边框的位置处就开始绘制
背景图像
属性：background-image
取值：url(图片路径)括号内容可隐可不隐
背景平铺
属性：background-repeat
取值：
repeat
默认值，横纵都平铺
no-repeat
不平铺
repeat-x
横向平铺
repeat-
纵向平铺
背景图片尺寸
属性：background-size
取值：
width height
以px为单位的数值
width% heght%
采用当前元素的尺寸占比作为背景图尺寸
背景图片位置
作用
改变背景图在元素中的默认位置
语法：
属性：background-position
取值：
x y
以px为单位的数值，用空格隔开
x:背景图像水平偏移距离
取值为正，背景图片向右偏移
取值为负，背景图片向左偏移
y:背景图像垂直偏移距离
取值为正，背景图片向下偏移
取值为负，背景图片向上偏移
x% y%
0% 0%
背景图在左上角
100% 100%
背景图在右下角
50% 50%
背景图在中间
95% 0%
背景图 ，偏右靠上
关键字
x:left/center/right
y:top/center/bottom
背景属性- 简写方式
属性：background
取值：color url() repeat position;
eg:
background:red; 背景颜色为红色
background:url(a.jpg) no-repeat 95% center;
文本格式化属性
字体属性
指定字体
属性：font-family
取值：由逗号隔开的字体列表
注意：如果字体中包含中文或空格的话，要用引号引起来
eg:
font-family:"微软雅黑";
font-family:"Microsoft Yahei";
font-family:"微软雅黑",Arial,Helvetica;
指定文体大小
属性：font-size
取值：px 或 pt
指定字体加粗
属性：font-weight
取值：
normal:非加粗显示
bold:加粗显示
value
取值为无单位的数字
400:normal
900:bold
字体的样式
属性：font-style
取值：
normal:非斜体显示
italic:斜体显示
练习：
创建以01-font.html
创建一个div
设置字体为楷体，加粗默写题大小为18pt
<style>
#un{
font-family:'楷体';
font-weight:bold;
font-style:italic;
font-size:18pt;
}
</style>
字体属性(简写)
属性：font
取值：style weight size family;
注意：
使用简写方式时，必须要设置family的值，否则无效
font:12px; 无效
font:12px;"微软雅黑" 有效
文本属性
文本颜色
属性：color
取值：合法的颜色值
文本的排列方式
作用：控制某元素内的文本，图片,行内块元素的排列方式
属性：text-align
取值：left/center/right/justify
justify:两端对齐
文字修饰
作用：指定线条修饰效果
属性：text-decoraton
取值：
none: 无任何线条显示
underline: 下划线显示
overline: 上划线显示
line-through: 删除线显示 等同于u标记
行高
作用：指定一行文本数据的所占高度
特点：如果行高的高度高于文本的高度的话，那么文本将在行高的范围内垂直居中显示
使用场合：
文本垂直居中显示
模拟行间距
属性：line-height
取值：
以px为单位的数字
无单位的数字，表示当前字体大小的倍数
eg:
#d1{
font-size:12px;
line-height:24px;
line-height:2;
}
练习：创建03-lineHeight.html
创建div 200*200 编写一个文本
使文本居中
创建div 多写几行文本模拟1.5倍行间距
表格属性
表格的常用属性
尺寸属性
边框属性
文本格式化
被金属学
框模型
margin不能用在td上的
表格的特有属性
边框合并
属性：border-collapse
取值：
separate
默认值，分离边框(双线边框)模式
collapse
边框合并
边框边距
作用：设置每两个单元格之间的距离
属性：border-spacing
取值:
指定一个数值
水平和垂直间距相等
给定两个数值
第一个值：表示水平间距
第二个值：表示垂直间距
两个数值之间使用空格隔开
注意：必须要在分离边框模式下使用
即:border-collapse的值为separate的时候有效
过渡效果 - transition
什么是过渡
使得CSS的属性值在一段时间内平缓变化的一个效果
语法
指定过渡属性
作用：指定哪个属性值在变化的时候使用过渡效果
属性：transition-property
取值：
属性名称
all
但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现
允许使用过渡效果的属性
所有与颜色相关的属性
所有取值为数字的属性
eg:transition-property:background-color;
指定过渡时长
作用：指定在多长时间内完成过渡效果
属性：transition-duration
取值：以s 或 ms 为单位的数字
1s=1000ms
300ms=0.3s= .3s
eg:transition-duration:0.3s;
指定过渡的时间曲线函数
作用：制定过渡效果变化速率
属性：transition-timing-function
取值：
ease
默认值，慢速开始，快速变快，慢速结束
linear
匀速
ease-in
慢速开始，加速结束
ease-out
快速开始，减速结束
ease-in-out
慢速开始和结束，中间先加速后减速
指定过渡延迟
作用：当激发过渡效果后，等待多长时间在开始执行操作
属性：transition-dalay
取值：以s 或 ms 为单位的数字
练习：创建200*200的元素红色背景
尺寸变为400*400
变为黄色
变成圆形
#d{
width:200px;
height:200px;
background-color:red;
transition-property:all;
transition-duration:5s;
transition-timing-function:linear;
}
#d:hover{background-color:yellow;
width:400px;
height:400px;
border-radius:50%;}
<div id="d"></div>
过渡属性
属性：transition
取值：property duration timing-fun dalay
eg:
transition:color 5s linear,background 3s;
transition:all 5s linear;
定位(重难点)
什么是定位
表示的是元素在网页中的位置
定位的分类
在css中，定位主要分为以下几类：
普通流定位(默认定位方式)
浮动定位(重难点)
相对定位
绝对定位
固定定位
普通流定位
普通流定位，又称为"文档流定位"，是页面中默认的定位方式，典型的"流式布局"
特点：
每个元素在页面中都有自己的位置，并占据一定的空间
每个元素都是从其父元素在左上角开始排列的
每个元素基本都是按照从左到右从上到下开始排列的
块级元素：从上到下，每个独占一行
行内元素&行内块元素：从左到右，排列不下时换行
浮动定位
浮动元素的特点
将元素设置为浮动定位，元素将具备以下特点：
浮动元素会被排除在文档流之外--->脱离文档流，那么元素将不再占据页面空间
剩余未浮动元素会上前占位
浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
浮动只能在当前行浮动
浮动解决的问题：让多个块级元素在一行内显示的问题
语法：
属性：float
取值：
none
默认值，即无任何浮动效果
left
浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上
right
浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上
浮动引发的特殊效果：
如果父元素显示不下所有已浮动子元素的话，那么最后一个将换行，但有可能被卡住
元素一旦浮动起来之后，就将变成块级元素
行内元素一旦浮动，就允许修改尺寸
元素一旦浮动起来之后，在未指定宽度的情况下，宽度将由内容来决定
主要针对块级元素
文字，图片，行内元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的
浮动
消除浮动
元素一旦浮动起来之后，后面的元素要上前占位，有可能被浮动元素压在底下，如果元素不想压在底下的话，则可以通过消除浮动影响的方式来解决问题
语法：
属性：clear
取值：
none
默认值，不作任何浮动的操作
left
清除当前元素前面元素左浮动所带来的影响，即不会被前面元素左浮动而压在底下
right
清除当前元素前面元素右浮动所带来的影响，即不会被前面元素右浮动而压在底下
both
清除当前元素前面元素任何一种浮动方式带来的影响,既不会被前面元素浮动而压在底下
浮动元素对父元素高度的影响
由于浮动元素会脱离文档流，所以是不占据页面空间的，那么也就不占父元素的空间，那么父元素的高度是以未浮动的子元素的高度为准的
解决父元素的高度
为父元素设置高度
弊端：不一定每次都清楚的知道父元素的高度
设置父元素也浮动
弊端：会对父元素后面的元素产生位置的影响
设置父元素的属性 overflow 为 hidden 或 auto
弊端：如果有溢出要显示的元素，也一同被隐藏了
在父元素中追加空块级元素，并设置其clear属性为both
其他定位
相关属性
定位方式
属性：position
取值：
static:静态的，默认值
relative:相对定位
absolute:绝对定位
fixed:固定定位
注意：将元素的position设置为relative/absolute/fixed任意一种的话，那么该元素就称为"已定位元素"
偏移属性(共四个)
作用：配合着已定位元素实现位置的移动
属性：top / right / bottom / left
取值：以 px 为单位的数值
top:以元素的上边为基准边移动元素
取值为正，元素下移
取值为负，元素上移
right:以元素的右边为基准边移动元素
取值为正，元素左移
取值为负，元素右移
bottom:以元素的下边为基准边移动元素
取值为正，元素上移
取值为负，元素下移
left:以元素的左边为基准边移动元素
取值为正，元素右移
取值为负，元素左移
定位方式 - 相对定位
什么是相对定位
元素会相对于它原来的位置偏移某个距离
场合
元素位置微调时使用相对定位
语法：
属性：position
取值：relative
配合着 偏移属性 实现位置的移动
练习：创建一个网页
创建一个ul及四个li
每个li 100*30 背景颜色 左浮动 10px右边距
使用相对定位 当鼠标悬停在li上li左移10px;
使用margin完成上述操作
定位方式 - 绝对定位(难点)
什么是绝对定位 & 特点
绝对定位的元素会脱离文档流--->不占页面空间
绝对定位的元素会相对于离它最近的，已定位的，祖先元素去实现位置的初始化
如果元素没有已定位的祖先元素，那么元素将相对于body去实现位置的初始化
语法：
属性：position
取值：absolute
配合着 偏移属性 实现位置的定位
注意
绝对定位的元素会变为块级元素(任何元素变成绝对定位的话，就可以直接修改尺寸)
堆叠顺序
什么是堆叠顺序
已定位元素们堆叠在一起的排列顺序
语法
属性：z-index
取值：无单位的数字，数字越大元素越靠上，默认值为0 注意：
如果堆叠顺序相同的话，则后来者居上
只有已定位的元素才能使用z-index
relative/absolute/fixed
父子元素之间，永远都是子压在父上，是不受堆叠顺序影响的
定位方式 - 固定定位
什么是固定定位
让元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的改变
语法：
属性：position
取值：fixed
配合着 偏移属性 实现元素位置的固定
注意：
固定定位的元素永远都是相对于body实现位置初始化的
固定定位的元素会变成块级元素
显示
显示方式
什么是显示方式
决定了元素是以什么样的方式显示在网页中(块级/行级/行内块)
语法
属性：display
取值：
none
让元素不显示--隐藏
脱离文档流--不占据页面空间
block
将元素变为块级元素
inline
将元素变为行内元素
inline-block
将元素变为行内块元素
特点：多个元素能够在一行显示 - 行内
允许修改尺寸 - 块级
显示效果
可见性属性
属性：visibilty
取值：
visible
默认值，可见的
hidden
隐藏的,未脱离文档流，所以还占据着页面空间
面试：
visibility:hidden和display:none的区别
visibility:hidden 未脱离文档流
display:none 脱离文档流，不占据空间
透明度
属性：opacity
取值: 0(完全透明)~1(完全不透明)
测试：
网页中创建两个h1标记
第一个h1 使用rgba设置红色背景，0.5透明度
第2个h1 设置红色背景，0.5透明度
垂直方向对齐方式
属性：vertical-align
取值：top/middle/bottom/baseline
放在td中
相当于valign的作用
取值：top/middle/bottom, middle是默认值
放在图片和行内块元素中
设置元素两端的文本相对于元素的垂直对齐方式
取值：top/middle/baseline,baseline是默认值
光标
作用：改变鼠标悬停在元素上时鼠标的样子(不需要加hover)
属性：cursor
取值
default - 默认值
pointer - 小手
text - I
crosshair - +
wait - 等待
help - 帮助
#main{cursor:pointer}
列表
表现特征
上下外边距
左内边距
列表项特征
纵向排列
列表属性
list-style-type
取值：
none---->不显示任何标识
disc----->实心圆点
circle--->空心圆点
square--->实心方框
... ...
listy-style
作用：列表的简写属性
常用用法：
list-style:none;
转换属性- transform
什么是转换
改变元素在页面中的位置，尺寸，角度的一种方式
属性
转换属性
属性：transform
取值：
none:默认值，无任何转换效果
转换函数
如果有多个函数的话，中间要用空格隔开
转换原点
什么是转换原点
转换原点就是转换操作所围绕的一个点
语法
属性：transform-origin
取值：使用空格隔开的两个值
以 px 为单位的数值
以 % 为单位的数值
关键字 : top / bottom / left / right / center
注意：more的转换原点是在元素的中心位置处
转换效果
位置
作用
改变元素在页面的位置
语法
属性：transform
取值(函数)：
translateX(x)
x:表示元素在x轴的位移距离(横向)
x取值为正，元素右移
x取值为负，元素左移
translateY(y)
y:表示元素在y轴的位移距离(纵向)
y取值为正，元素下移
y取值为负，元素下移
translate(x)
等同于 translateX(x)
translate(x,y)
同时在x轴和y轴上做位移操作
缩放
作用
改变元素在页面的大小
语法
属性：transform
取值(函数):
scaleX(x)
x表示横向缩放比例
x默认值为1,原始大小
取值大于1的数字：放大的比例
大于0小于1的数字：缩小的比例
小于0:物极必反(180度的翻转放大比例)
scaleY(y)
y表示横向缩放比例
y默认值为1,原始大小
取值大于1的数字：放大的比例
大于0小于1的数字：缩小的比例
小于0:物极必反(180度的翻转放大比例)
scale(value)
value表示x轴和y轴的缩放比例是相同的
旋转
作用
改变元素在网页的角度
语法
属性：transform
取值：
rotate(ndeg)
n为旋转角度
n取值为正，顺时针旋转
n取值为负，逆时针旋转
注意：
转换远点会影响转换效果
旋转操作时，会连同坐标轴也一同跟着旋转，会影响旋转之后的位移操作
JavaScript概述
什么是JavaScript
JavaScript简称"JS",是一种运行于js解释器或执行引擎中的解释性脚本语言
JS发展史
1992年Nombas公司开发了一款脚本语言，能够运行在网页中，名称 CMM(C--)更名为ScriptEase
1995年Netscape(网景)为自己的浏览器Navigator2.0开发里另一款脚本语言 - LiveScript,后更名为 JavaScript
1996年Microssft,为自己的浏览器IE3.0开发了一款JavaScript的克隆版本JScript
1997年Netscape找到了ECMA(欧洲计算机制造商联合会)，Netscape将JS的核心交给了ECMA,从此JS的核心被更名为ECMA Script,简称ES
完整的JS组成:
核心 - ECMAScript
包含了JS中最基本的语法规范
浏览器对象模型 - BOM模型(Browser Object Model)
提供了一系列的可操作的方法和属性用于和浏览器进行交互
文档对象模型 - DOM模型(Document Object Model)
提供了一系列的可操作方法和属性用于和文档进行交互
JS的使用方法
在元素事件中编写JS代码
事件：用户在元素上所激发的行为操作
onclick:当用户单击元素时激发的操作
语法：
<标记 noclick="JS执行代码">
JS可执行的代码：
console.log("向控制台中输出一句话");
console.log('向控制台中输出一句话');
将代码嵌入在网页的<script></script>里
语法：
在网页的任意位置处，均可以嵌入
<script>
可执行的JS代码
</script>
特点：
网页加载时就执行
document.write("向网页中输入的一句话")
注意：将document.write编写在按钮中的话，在执行时，会刷新网页中的内容
练习：在一个按钮中，单机时，执行document.write()
将JS代码编写在外部的JS文件中
创建一个JS文件(xxx.js),编写JS代码
在使用的网页中对js文件进行引入
<script src="JS文件路径"></script>
注意：在引入的JS标记中是不能编写JS脚本的
JS的基础语法
JS都是由语句来组成的
由运算符，关键字 和 表达式构成的
JS中严格区分大小写
console.log("...") 正确
Console.log("...") 错误
每条语句必须以 ; 便是结束
所有的标识符，符号必须都是英文的
console.log("..."); 正确
console.log(“...”)； 错误
JS中的注释
单行： // (自动换行算一行)
多行： /* .... */
JS中的变量 和 常量
变量
声明变量
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值: var 变量名=值;
eg:
声明一个变量名为uname,值为 王小明
var uname="王小明";
console.log(uanme); 控制台显示
document.write(uname); 网页中显示
window.alert(uname); 弹出显示
var name="" //尽量不要用 name 做变量
注意：
在声明变量时，尽量使用 var 关键字，如果省略var的话，也可以，但容易出现问题
声明变量如果未赋值的话，默认值为undefined
变量名的命名规范
不能是JS中的关键字和保留关键字
由字母，数字，下划线(_)和$
var $ = 35;
var _46 = 46;
数字不能开头
尽量不要重复
尽量要见名知意
如无特殊需求，尽量使用小驼峰命名法
var age;
var gender;
var userName;
变量的使用方式
为变量赋值
只要变量出现在赋值(=)符号的左边,一律都是赋值操作
var age = 35;
var newAge = age;
获取变量的值
只要变量没出现在赋值(=)符号的左边，一律都是取值操作
console.log(uname);
ar age = 35;//赋值
age = age + 35;
赋值操作：
先运算赋值符号右面表达式或值，再赋值给左边的变量
赋值符号的左边只能是变量
常量
什么是常量
一经声明就不允许被修改的数据就是常量
语法
const 常量名=值;
注意：
常量声明好之后是不允许被修改的，所以一定要赋值
常量名一般采用全大写形式
练习：
1、创建一个网页06-JS-const-exer.html
2、声明一个常量PI，赋值为3.14
3、声明一个变量 r，表示一个圆的半径，随意赋值
4、通过PI和r计算圆的周长，并将结果保存在变量 l 中 （2*π*r）
5、通过PI和r计算圆的面积，并将结果保存在变量 s 中 （π*r*r）
半径为...的圆的周长是...
半径为...的圆的面积是...
保留到小数点 n 位
var l = 62.8000000000004;
l = l.toFixed(n);
var input=window.prompt("输请入数字"); 在网页中输出
数据类型
什么数据类型
数据的类型,约束了数据在内存中所占的空间大小
JS的数据类型分类
基本数据类型(原始类型)
number类型
数字类型，可以表示32位(4字节)的正数或64位(8字节)的浮点数
整数：
允许表示十进制，八进制 和 十六进制
十进制：var num=321;
八进制：var num=010;(八进制以0开头)
十六进制：var num=0x1A;
小数：
小数计数法： var num=123.456;
指数计数法： var num=1.5e3;
string类型
字符串类型
由Unicode的字符，数字和标点组成
注意：字符串在使用是必须用单引号或双引号引起来
每个字符都有自己的Unicode码
查看字符的Unicode码
var str="张";
str.charCodeAt(); //得到十进制Unicode小括号可以用下标表示具体字符
var r =str.charCodeAt();
//将r转换为十六进制的字符串
r=r.toString(16);
如何将Unicode码转换为对应的字符
已知Unicode码：5f20
var str="\u5f20"; //正确写法
var s1="\u"+5f20; //错误写法
中文范围
"\u4e00~\u9fa5"
转义字符
\n:换行
\t:制表符
\":一个双引号
\':一个单引号
\\:一个\
boollean类型：
布尔类型，只用于表示真(true)或(false)
注意：
boolean类型是可以参与到数字运算中的
true当成1运算
false当成0运算
var r=1+true; //2
var r=3685 * false; //0
var r=true+false; //1
undefined类型
产生undefined场合：
声明变量为负值
访问对象不存在的属性时
查看数据类型
使用typeof() 或typeof 查看变量的数据类型
var num = 35;
var t1 = typeof(num);
var t2 = typeof num;
引用数据类型
数据类型
数据类型转换
不同的数据类型之间的数据在进行运算时是如何转换的
隐式转换
数字 + 字符串
将数字转换为字符串，再进行拼接
var num=15;
var str="18";
var r=num+"str"; // 1518
var r="15"+18+15; //151815
var r=15+18+"15"; // 3315
var r="15"+(18+15); //1533
数字 + 布尔
将布尔类型转为数字
布尔 + 字符串
将布尔转换为字符串，再拼接
var b = true;
var s= "你好";
var r= b + s; //"true你好"
布尔 + 布尔
将布尔转为数字，再相加
注意：
任意类型与字符串做加法运算时，都是将其他类型转换为字符串再拼接
字符串与数字进行运算时：
加法：拼接
其余操作(-,*,/,%):先将字符串转换成数字，再做运算
显式转换(转换函数，强制转换)
toString()
将任意类型的数据转换为字符串，并返回转换后的结果
语法：
var r = 变量.toString();
eg:
var num=18;
var r = num.toString();
var num =18;
var r = num + "";
parseInt()
作用：将任意类型的数据转换成整数,如果实在无法转换的话，则返回NAN(Not a Naumber)
语法：
var r =parseInt(数据)
eg:
var r = parseInt("13.5");
r:13
var r =parseInt("13");
r:13
var r=parseInt("13你好");
r:13
var r=parseInt("你好");
r:NaN
parseFloat()
作用等同于parseInt(),允许转换小数
var r = parseFloat("35.5");
r:35.5
var r = parseFloat("35.5abc");
r:35.5
var r = parseFloat("abc35.5");
r:NaN
Number()
作用：将任意类型的数据转换为数字，只要包含非法字符的话，结果就为NaN
var r = Number("35.5");
r:35.5
var r = Number("35");
r:35
var r= Number("35你好");
r:NaN
运算符
算术运算符
+ - * / % ++ --
%: 模
++:自增运算符，在自身数据的基础上只做+1运算
--:自减运算符，在自身数据的基础上只做-1运算
eg:
var a=15;
a++;
++a;
++做前缀：对变量先自增，再使用
++做后缀：先使用，再对变量自增
eg:
var num=5;
console.log(num++); //先输出5再变为6
console.log(num); //输出6
var num=5;
console.log(++num); //先变为6，输出6
console.log(num); //输出6
var num=5;
num++;
console.log(num); //输出6
var num=5;
console.log(num--); //先输出5再变为4
console.log(num); //输出4
var num=5;
console.log(--num); //先变为4，输出4
console.log(num); //输出4
var r=num++ + ++num + num++ + ++num +num;
r:37
关系运算符(比较运算符)
> < >= <= == != === !==
10 > 5 true
"10" > 5 true
如果运算符的两端有一个操作数是数字的话，那么另外一个会自动通过Number()进行转换
然后再进行比较
"3" < 5 false
"10a">5 false
"10a"<5 false
先将"10a"通过Number()转换为数字，再与5比较
"10a" 通过Number()转换时，结果为NaN
NaN只有做!=运算时结果为true,其余比较都是false
NaN !=任何数时(包括NaN)，结果为true,其他运算皆为false
"张三丰" > "张无忌" false
"三" 19977
"无"：26080
比较每位字符的Unicode码,最终比较"三"和"无"的Unicode码
"10" > "5" :false
"50" > "5" :true
=== 和 !==
"5" == 5 : true
===:
比较数据的数值和数据类型都相等的情况下，结果才为真
"5" ===5 :false
!==:
比较数据的数值和数据类型只有一个不等，结果就为真
"4" !== 4 :true
逻辑运算符
! :非，对现有条件取反，等同于python not
&&: 逻辑与，等同于python中的 and
||:逻辑或，等同于 python中的 or
条件1 && 条件2:
条件1为真，条件2为假，整体结果为假
条件1为假，条件2为真，整体结果为假
条件1为假，条件2为假，整体结果为假
条件1为真，条件2为真，整体结果为真
条件1 || 条件2：
条件1为真，条件2为假，整体结果为真
条件1为假，条件2为真，整体结果为真
条件1为假，条件2为假，整体结果为假
条件1为真，条件2为真，整体结果为真
! 条件：
非真即假，非假即真，
位运算符
按位与: &
eg:
3 & 5: 1
3:011
5:101
=======
001
场合：判断一个数字的奇偶性
任意数字与1做按位与操作，结果为1是奇数，结果为0是偶数
按位或：|
场合：任意小数与0做按位或操作，快速取整(抛弃小数位，保留整数位)
eg:
423.123 | 0 :423
按位异或：^
场合：两个数字的二进制位进行比较，不同则为1,相同则为0
eg:
3 ^ 5: 6
3:011
5:101
=========
110 : 6
^的作用：在不借助第三方变量的前提下，交换两个数字的位置
eg:
var a=5;
var b=3;
step1: a=a^b; //a:6
step2: b =b^a; // b:5
step3: a=a^b; // a:3
条件运算符
单目运算符也叫一元运算符：只有一个操作数的运算符
++,--,!typeof
双目运算符也叫二元运算符：有两个操作数的运算符
+ - * / % , ... , && || & |
三目运算符也叫三元运算符：有三个操作数的运算符
? :
条件运算符：
条件表达式 ? 表达式1 : 表达式2;
先判断条件表达式的值，如果为true则执行表达式1的操作，否则则执行表达式2的操作
var r= score>60?"及格":"不及格";
console.log(r)
表达式1和表达式2的位置处，还可以是一个条件表达式
var r = score >=90?"优秀":score>=60?"及格":"不及格";
console.log(r);
赋值运算符(op)
a op= b;
var num = 5;
num += 6; // num =num+6
var a=3;
var b=5;
a=a^b; a^=b;
b=b^a; b^=a;
a=a^b; a^=b;
程序的流程结构
顺序结构
分支结构(选择结构)
循环结构
分支结构：
作用：
根据条件，选择某一段代码去执行
语法：
if结构
if(条件){
满足条件要执行的代码
}
注意：
if 后的{}是可以省略的，如果省略的话，则只控制该结构的第一条语句
条件尽量是boolean类型的，如果不是，以下条件当成假运算:
if(0){}
if(0.0){}
if(""){}
if(NaN){}
if(undefined){}
if(null){}
if(条件){语句块1}else{语句块2}
if(条件1){语句块1}else if(条件2){语句块2}, ... ,else{语句块n}
练习：分三次输入年 月 日
计算该日是改年的多少天
switch 结构
场合：只有在等值判断是使用
语法：
switch(变量){
case 值1:
语句块1
break; //可省略
case 值1：
语句块2
break;
... ...
default:
语句块n;
//所有的case块都未匹配上时，才执行default
}
注意：
变量和各个case块后面得值，是使用=== 的方式来判断的
如果case后不增加break的话，则从匹配的case开始，向下依次执行(不判断)，直到结束或碰到break为止
循环结构
循环的作用
重复的执行相同或相似的代码
循环两要素
循环条件
循环操作(循环体)
eg:
想打印100遍 的hello world
条件：打印100遍
操作：打印hello world
var i=1; //声明循环条件，从1开始
while(i<=100){
console.log("hello world");
i++; //更新循环条件
}
while 循环
语法：
while(条件){
循环体
}
do ... while 循环
语法:
do{
循环体
}while(条件);
流程
先执行循环体
判断循环条件
如果条件为真， 则继续执行循环操作，否则退出循环
循环的流程控制
break
用在循环体内，用于跳出整个循环结构
continue
用于循环体内，用于跳出本次循环，继续执行下次循环
while
var i=1; //循环条件的声明
while(i<=100){ //循环条件的判断
console.log(i); //循环条件的判断
i++; //更新循环变量
}
for 循环
语法：
for (表达式1;表达式2;表达式3){
循环操作
}
表达式1:循环条件的声明
表达式2:循环条件的判断
表达式3:更新循环变量
流程：
先执行表达式1，生命循环条件(执行1次)
判断表达式2的值，true或false
如果为true,则执行循环操作；如果为false，则跳出循环
执行完循环操作之后，再执行表达式3
再判断表达式2的值，同步骤2
for VS while
相同点：
先判断循环条件，再执行循环操作的结构
不同点：
while : 优先用在不确定循环次数的场合下
for : 优先用在确定循环次数的场合下
练习
判断素数
从弹框输入一个数，判断是否是素数
循环的嵌套
允许在一个循环的内部再出现循环
for (var i=1;i<=10;i++){
for (var j=1;j<=10;j++){
}
}
函数
什么是函数
函数，即 function,是一段预定已好，可以独立执行并包含多条执行语句的代码块
优点：
多条执行语句的封装
实现了代码的复用
在js中创建函数
function 函数名(参数列表){
函数体
[返回值]
}
参数列表：
如果没有参数，可以为空
如果有参数，就编写参数列表.如果参数是多个的话，各个参数之间使用","隔开
有参数的函数，在调用时就要传参，如果未传参的话，参数的值就是undefined
eg:
funciton show(){
console.log("无参函数");
condole.log("调用时不需要传参");
}//无参数函数
function show(name){
console.log(name);
}//有参数函数
function show(name,age){
console.log(name);
console.log(age);
}//多个参数的函数
返回值：
在函数体内，经过运算后，需要传递给函数调用者的一个值，就是返回值
返回值是可选的，如果有反回值的话，需要使用return 进行返回，最多只能返回一个值
eg:
functin show(name){
return "你好:"+name;
}
函数的调用
在任意的JS合法的位置处，都允许做函数的调用
eg:
var ret=函数名(参数列表);
有参数，则传参，否则，为空
有返回值，可以接受，否则不接受
变量的作用域
什么是变量的作用域
变量的作用域指的是变量的可访问范围
作用域的分类
局部变量
使用var关键字声明在某个函数内的变量，都是局部变量
局部变量只能在声明的函数内使用，出了函数则无法使用
全局变量
在function之外的声明的变量都是全局变量
声明变量不使用var关键字的时候，都是全局变量
全局变量可以应用在各个函数中以及各个位置处
注意：全局变量，推荐放在所有的function之外，使用var关键字去声明
数组 - Array
什么是数组
数组(Array)是一个用于保存批量数据的数据的数据结构
数组是按照线性结构来保存数据的
创建数组
创建一个空数组
var 数组名 = [];
创建数组并初始化元素
var 数组名 = [元素1,元素2,元素3,... ...];
创建一个空数组
var 数组名 = new Array();
创建数组并初始化元素
var 数组名 = new Array(元素1,元素2,... ...);
注意：
var 数组名= new Array(lenth);
lenth 表示初始化的长度,lenth为number类型
数组的使用
获取 或 设置数组的元素值，一律使用下标
下标从0开始，到数组元素个数-1结束
将 arr1数组中的第一个元素更改为"安倍"
arr1[0]="安倍";
打印输出 arr1 数组中的第三个元素
console.log(arr1[2]);
获取数组的长度
属性：length
用法：数组名.length
使用场合:
能够找到数组中，最新要插入元素的位置(即向数组尾部增加元素时使用)
var names=["刘德华","张学友","郭富城"];
//向 names 的尾部追加新元素
names[names.length]="黎明";
练习：
让用户循环从弹框录入数据输入exit退出，并打印
清空数组
将数组的length属性设置为0,即表示清空数组中的所有的元素
配合循环，遍历数组中的每一个元素
var arr=["金正恩","金正日","金日成"];
//从头遍历到尾
for (var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//从尾遍历到头
for (var i=arr.length-1;i>=0;i--){
console.log(arr[i]);
}
常用API
toString()
作用：将数组转换成字符串,将转换后的字符串进行返回
var arr=["孙悟空","猪八戒","沙僧"];
console.log(arr.toString());
结果：孙悟空，猪八戒，沙僧
console.log("数组:"+arr)
join(seperator)
作用：返回一个由seperator连接的数组元素的字符串
var arr=["孙悟空","猪八戒","沙僧"];
var str=arr.join("-")
console.log(str);
结果为：孙悟空-猪八戒-沙僧
reverse()
作用：反转
注意：该函数会改变现有数组的结构
sort()
作用：对现有数组的内容进行排序
默认是按照元素的unicode码升序排序
注意：该函数会改变现有数组的结构
允许通过自定义的排序规则(排序函数)来指定数字的排序方式
语法：
arr.sort(排序函数);
升序的排序函数
function sortAsc(a,b){
return a-b;
}
降序的排序函数
function sortAsc(a,b){
return b-a;
}
将sortAsc指定为排序函数
数组会自动的将相邻的两个数字传递到参数的位置处
如果函数值是大于0的数字的话，则交换两个数字的位置，否则不变
指定排序函数：
arr.sort(sorAsc);
使用匿名函数指定排序规则
匿名函数：是一个没有名称的函数，只因为某一功能而存在
arr.sort(function(a,b){return a-b;});
作业：
从弹框中输入一个数字
将该数字转为二进制再输出
除二取余法
数组
进出栈操作
栈式操作：提供了快速操作数组头部和尾部元素的方法
push()
入栈，压栈，向数组尾部增加新元素，并返回新数组的长度
arr[arr.length]="张三丰";
arr.push("张三丰");
pop()
出栈，弹栈，删除并返回数组尾部的元素
unshift()
向数组的头部添加新元素并返回数组的长度
shift()
删除并返回数组头部的元素
二维数组
什么是二维数组
数组中的每个元素又是一个数组
声明二维数组
var books=[
["西游记","水浒传","红楼梦","三国演义"],
["老人与海","雾都孤儿","复活"]
];
books[0][1]="水浒传"
字符串 - string
声明字符串
var str1="字符串1";
var str2=String("字符串2");
var str3=new String("字符串3");
length 属性
作用：返回当前字符串中字符的个数
常用函数 - String API
大小写转换函数
toUpperCase()
返回当前字符串的完全大写形式
toLowerCase()
返回字符串的完全小写形式
练习：
创建一个数组，并初始化若干数据
生成一个四位验证码
将生成四位随机验证码通过prompt提示给用户去看并接收
比较两者是否一致
获取指定位置的字符 或 字符的 Unicode码
获取指定位置的字符
函数：str.charAt(index)
eg:
var str="Hello World";
var s=str.charAt(3);
console.log(s); // 1
console.log(str.charAt(6)); //W
获取指定位置的字符的Unicode码
函数: str.charCodeAt(index)
eg:
var str="Hello World";
var r=str.charCodeAt(3);
console.log(r); // 1 的Unicode码(十进制)
检索字符串
indexOf(value,fromIndex)
value:要查找的子字符串
fromIndex:从哪个下标位置处开始查找，如果省略，则从第一个字符处开始查找
返回值：返回value第一次出现的下标，如果没有查询到子字符串的话，则返回-1
lastIndexOf(value,fromIndex)
作用：查找value最后一次下标
截取子字符串
函数：substring(start,end)
作用：返回从start到end-1之间的字符串，如果省略end的话，则截取到整个字符串的尾部
分割字符串
作用：将一个由指定连接符的字符串，按照连接付给拆开，拆分成一个字符串数组
函数：split(seperator)
eg:
var str="zsf_zwj_zcs_yxx_zm";
var arr=str.split("_");
console.log(arr);
模式匹配
作用：配合着 正则表达式 完成字符串的查找和替换
正则表达式
语法：
/正则格式/修饰符
修饰符：
i:ignorcass(忽略大小写的匹配)
g:global(全局匹配)
m:multiple(允许多行匹配)
eg:
/\d{2,6}/g
/垃圾/g 匹配垃圾两个字在全局
函数
replace(substr/regexp,replacement)
作用：在一个字符串中，将substr或满足regexp格式的字符串替换成replacement
match(substr/regexp)
作用：按照指定的子字符串或正则表达式进行匹配，并返回满足格式的子字符串(数组)
其它内置对象
JS中对象分类
内置对象 -- ES提供
外部对象
window(BOM)
document(DOM)
自定义对象 -- function
对象：包含属性 和 方法(函数)
对象.属性
对象.方法()
RegExp 对象
RegExp -Regular Expression
创建RegExp对象的方式
var regExp=/匹配模式/修饰符;
eg:
var reg=/垃圾/igm;
var regExp=new regExp("匹配模式","修饰符");
eg:
var reg=new RegExp("垃圾","g");
RegExp 对象的方法
test(string)
string:要验证的字符串
作用：验证string是否满足当前正则表达式对象的格式，如果string满足正则表达式的话，则返回true,否则返回false
Math对象
作用：
执行与数学相关的运算和数据
属性：
Math.PI:表示π
Math.E:表示自然数
方法：
三角函数
Math.sin()
Math.cos()
Math.tan()
计算函数
Math.sqrt(x):开平方
Math.log(x):求对数
Math.pow(x,y):求x的y次方
数值函数
Math.abs(x):求x的绝对值
Math.max(a,b,c,d):求一组数据中的最大值
Math.min(a,b,c,d):求一组数据中的最小值
Math.random():生产0-1之间的随机数
Math.round(x):将x四舍五入到整数
Date对象
作用：
获取客户端的日期时间
创建Date对象
获取当前日期时间
var now=new Date();
初始化自定义日期时间对象
var date=new Date("2018/06/13 17:20:20");
方法：
读取或设置当前时间的毫秒数
getTime()
返回自1970-1-1 00:00:00 到date 对象所经过的毫秒数
setTime(毫秒数)
根据给定的毫秒数，结合1970-1-1 计算日期
读取时间分量
getFullYear()
获取当前日期对象的地位年份数
getYear()
返回自1900年以来，到当前日期对象所经过的年数
getMonth()
返回0-11的数字来表示1-12月，需要得到当前月份时，需加1
getDate()
返回当前日期对象的日
getDay()
返回当前日期对象的星期几，返回0-6表示星期日-星期六
获取时间
getHours():获取小时
getMinutes():获取分
getSeconds():获取秒
getMilliseconds():获取毫秒
转换为字符串
toString()
toLocaleString()
toLocaleTimeString()
toLocaleDateString()
外部对象
BOM 和 DOM
BOM:Browser Object Model
浏览器对象模型
将浏览器比喻成一个对象 -- window(网页初始化时会自动创建)，可以通过该对象灵活的操作浏览器
DOM:Document Object Mondel
文档对象模型
将HTML文档比喻成一个对象 -- document, 可以灵活的操作网页上的内容，该对象属于window的属性之一，使用时不用声明
window对象(BOM模型)
作用：
在JS中表示浏览器窗口
window下的属性和方法在使用的过程中，可以省略window,而直接使用属性和方法
window.alert() -->alert()
window.document -->document
window.histor --> history
window中的对话框
警告框
window.alert()/alert()
输入框
window.prompt()/prompt()
确认框
window.confirm()/confirm()
点击"确定"按钮的话，返回true，其余的所有的操作，返回false
window中的定时器
周期性定时器
特点：
每间隔一段时间后，就执行一遍程序，反复执行
声明定时器
var ret=setInterval(fun,duration);
fun:要周期性执行的函数，可以是匿名函数
duration:要间隔的时间周期
ret:返回创建好的定时器对象(清除定时器时使用)
清除定时器
clearInterval(timer)
timer:要清除的定时器对象
一次性定时器
特点：
在指定的时间间隔后，只执行一次操作
声明一次性定时器
var ret=setTimeout(fun,time)
fun:等待一定时间后执行
time:要等待的时长
ret:已启动的定时器对象
清除定时器
clearTimeout(timer);
关闭网页
window.close();
window中的属性
screen属性
作用：获取客户端显示器的相关信息
属性：
width / height
availWidth / availHeight
history属性
作用
包含当前窗口所访问过的url地址们
属性&方法
属性
length:所访问过得url的数量
方法
back():后退
forward():前进
go(num):在当前网页的基础上前进或后退几步
num: 取值为正数，前进
num: 取值为负数，后退
location属性
作用
表示浏览器上地址栏的信息
属性&方法
属性：herf
表示当前窗口中正在浏览的网页的地址，如果为href赋值，相当于实现网页跳转功能
方法：reload()
重新加载当前网页，相当于刷新
navigator属性
作用：
包含浏览器的相关信息
属性
userAgent:显示信息
document对象(DOM模型)
document的概述
document对象，是DOM模型中的顶层对象，封装了所有和HTML元素的属性，方法以及事件
网页在加载的时候，会在内存中生成一颗节点树(DOM树)，DOM树会封装网页上所有的内容
网页上给你的每一个元素，每一个属性，每一段文字(包括注释)，都会被封装成DOM树上的一个单独的节点
节点分为以下类型
元素节点 - 表示网页中的一个元素
属性节点 - 表示元素中的一个属性
文本节点 - 表示元素中的文本内容
注释节点 - 表示网页中的注释内容
文档节点 - 表示整个HTML文档
DOM中所提供的操作
查找节点
读取节点信息
修改节点信息
删除节点
创建节点
查找节点
通过元素的id查找节点
前提：元素一定要具备id属性，否则无法查找
方法：
var elem=document.getElementById("元素ID");
elem:对应ID的元素在JS中表现 - DOM对象/DOM元素
DOM属性
innerHTML
修改/获取/设置当前DOM对象的HTML文本
innerText
修改/获取/设置当前DOM对象的普通文本
value
该属性只针对表单控件，允许获取或设置表单控件的值
读取节点信息
节点的类型
属性：nodeType
值：
返回1：元素节点
返回2：属性节点
返回3：文本节点
返回8：注释节点
返回9：文档节点
节点的名称
属性：nodeName
元素节点 & 属性节点：返回 元素名 或 属性名
文本节点：返回 #text
文档节点：返回 #document
注释节点：返回 #comment
获取 或 设置元素节点的属性值
getAttribute(attrName)
作用：获取指定属性值
返回值：attrName属性对应的值
setAttribute(attrName,attrValue)
作用：修改或设置指定属性的值
attrName:要修改或设置的属性名
attrValue:要修改或设置的值
removeAttribute(attrName)
作用：将attrName属性从节点中以移除出去
通过 dom对象.属性名 获取或设置属性值
注意：class属性不适用于该方式
元素的样式(css)
使用 setAttribute 设置 class属性的值
elem.setAttribute('class','类选择器');
使用元素的className属性修改class值
var div=$("container")
div.className="red";
注意：
不能使用elem.class="类选择器名称"
使用内联方式设置属性值
elem.style.css属性值=值;
elem.style.color="red";
注意：
如果css属性名中包含"-",那么"-"要取消，并且后面单词的第一个字符变大写
font-size
elem.style.fontSize="12px";
border-right-color
elem.style.borderRightColor="red";
DOM - 查询节点
根据ID查询节点
document.getElementById()
根据层级节点结构查询
parentNode
根据当前的节点的层级结构，返回父元素节点
childNodes
根据当前的节点的层级结构，返回当前元素的所有的子元素数组
注意：
能够获取所有的文本节点和元素节点
childen
根据当前的节点的层级结构，返回当前元素的所有子元素节点数组
nextSibling
获取当前节点的下一个兄弟节点
nextElementSbling
获取当前节点的下一个元素兄弟节点
previousSbling
获取当前节点的上一个兄弟节点
previousElementSibling
获取当前节点的上一个元素兄弟节点
通过标签名称获取页面元素
语法：
document.getElementsByTagName("标签名") 或 elem.getElementsByTagName("标签名")
返回值：返回包含指定标记的元素数组们
通过元素的name属性值获取元素
语法:
document.getElementsByName("name");
返回值：包含指定name属性值的元素的数组
通过元素的class属性值获取元素
语法：
document.getElementsByClassName("class") 或 elem.getElementsByClassName("class")
返回值：返回包含指定class属性值的所有元素
DOM
增加节点
创建节点
语法:
var elem=document.createElement("元素名");
eg:
function show(){
var elem=document.createElement("div");
elem.id='container';
elem.innerHTML="动态创建的div";
console.log(elem);
}
增加节点
作用：将创建好的元素增加到网页中
语法：
document.body.appendChild(elem)
向body中追加elem新元素
parentNode.appendChild(elem)
向parentNode的内部增加elem新元素
parentNode可以表示页面上的任意一个节点
parentNode.insertBefore(newElem,oldElem)
将newElem插入到parentNode中oldElem之前
删除节点
在DOM中，删除节点的行为只能由父元素发起
删除body中的子元素
document.body.removeChild(elem);
删除其他元素的子元素
parentNode.removeChild(elem); 删除parentNode中的elem子元素
事件
什么是事件
通常由用户的行为来激发的操作
触发事件的行为
所有的事件在绑定的时候，前面要加 on
鼠标的事件
click:鼠标单击事件
mouseover: 鼠标移入进元素激发的事件
mouseout:鼠标移出元素激发的事件
mousemove:鼠标在元素内移动时的事件
键盘事件
keydowm:键位按下时事件
keypress:键位按下时事件
keyup:键位抬起时事件
状态改变事件
load:当元素加载完成时激发的事件
change:元素发生改变是激发的事件(<select>)
focus:当元素获取焦点时触发的事件
blur:当元素失去焦点时出发的事件
submit:当表单被提交时触发的事件
绑定事件的方式
在元素中绑定事件
语法：
<标记 on事件名="执行函数()">
eg:
为div元素绑定鼠标移入事件
<div onmousever="函数"></div>
为body绑定load事件
<body onload="函数"></body>
在JS中动态的为元素绑定事件
var div = document.getElementById("d1");
div.on事件名=function(){
事件操作
}
var d1=document.getElementById("d1");
动态的为d1绑定click事件
d1.onclick=function(){
事件操作
}
动态的为d1绑定mouseout事件
d1.onmouseout=function(){
事件操作
}
注意：
在动态绑定事件中，在事件处理函数内，允许通过this关键字，来表示当前元素(DOM元素)
事件行为
load事件
常用：为body绑定load事件，目的是为了在所有内容都加载完成后再执行的操作要放在此处
语法：
<body onload=""></body>(不常用)
JS中动态绑定(常用)
window.onload=function(){
}
submit 事件
只有在表单被提交时才会触发
注意：
该事件需要一个boolean的返回值来通知表单是否要提交，返回为true,可以提交表单，返回为false则阻止表单提交
事件对象(事件参数对象，event对象)
什么是事件对象
任何一个事件在触发后，都会自动产生一个event对象
event对象中包含于当前事件相关的一些属性和方法
获取evnet对象
在html元素中绑定事件
<标记 onclick="btn(event)">
function btn(event){
//事件处理函数
}
在JS中动态为元素绑定事件
var d1=$("d1");
d1.onclick=function(event){
event表示的就是事件对象
}
事件对象的常用属性
事件源
什么是事件源
触发当前事件的元素是谁
获取事件源
通过 event.target 获取事件源
事件源是一个DOM对象
鼠标事件(事件对象的常用属性)
鼠标事件：
click,mouseover,mouseout,mousemove,
offsetX,offsetY
获取鼠标在元素上的坐标点
以元素的左上角为(0,0)
clientX,clientY
获取鼠标在网页上的坐标点
screenX,screenY
获取鼠标在屏幕上的坐标点
键盘事件(事件对象的常用属性)
键盘事件:keypress,keydown,keyup
keypress
只有在输入字符的前提下，才会被激发
which
当前按下的字符的ASCII码
key
当前按下的字符
注意：该事件允许通过一个返回值，通知元素是否要处理该事件，返回值为true，则正常显示输入的字符，返回值为false,则终止显示
keydown
只要按下键盘键位时就会被触发，无论是否有字符的输入
which
当前按下键位的键位码
只区分按键，并不区分大小写
大小写字符，是同一键位，所以键位码相同
返回值：同keypress
事件
事件冒泡
定义：当激发子元素事件时，同时把父元素对应的事件也给执行了
场合：
必须是父子结构或具备层级关系的元素
必须同时设置了相同的事件
阻止事件冒泡
定义：让该事件在当前元素中执行，不向上冒泡
语法：
event.stopPropagation();
jQuery
jQuery介绍
jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件，提供了更为简便的元素操作方式
jQuery封装了DOM
jQuery核心理念：Write Less Do More(少写做多)
jQueary版本：
jQuery 2.x 不在兼容IE6,IE7,IE8
jQuery 1.11.x
使用jQuery
引入jQuery文件
<script src="jquery-1.11.3.js"></script>
注意：该文件的引入操作必须要放在其他的jQuery操作之前
使用jQuery
jQuery对象
定义：jQuery对象是由对页面元素进行封装后的一种体现
jQuery中所提供的所有操作都只针对jQuery对象其他对象(DOM对象)无法使用
工厂函数 - $()
想要获取jQuery对象的话，则必须使用工厂函数$()
在$()中允许传递一个选择器/DOM对象作为参数，$()能够将选择器 和 DOM对象全部封装成jQuery对象在进行返回
DOM对象 和 JQuery对象之间的转换
DOM对象：不能使用jQuery提供的操作
jQuery对象：不能使用DOM提供的操作
将DOM对象转换为jQuery对象
语法：
var 变量=$(DOM对象);
注意：所有的jQuery对象在起名的时候，最好在变量前加$,主要用于和DOM对象的区分
将jQuery对象转换为DOm对象
语法一：
var dom对象=jQuery对象[0];
语法二：
var dom对象=jQuery对象.get(0);
jQuery选择器
作用：
获取页面上的元素们，返回值都是由jQuery对象所组成的数组
语法：
$("选择器")
常用选择器
基本选择器
ID选择器
$("id")
返回：返回页面中指定ID值的元素
类选择器
$(".className")
返回值：返回页面中指定className的所有元素
元素选择器
$("element")
返回值：返回页面中指定标记的所有元素
群组选择器 / 复合选择器
$("selector1,selector2,...")
返回值：返回满足函数内所有选择器的函数们
层级选择器
$("selector1 selector2") 后代选择器
$("selector1>selector2") 子代选择器
$("selector1+selector2")
名称：相邻兄弟选择器
作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
$("selector1~selector2")
名称：通用兄弟选择器
作用：匹配selector1后面所有满足selector2选择器的元素
基本过滤选择器
过滤选择器通常都会配合这其他的选择器一起使用
:fist
只匹配一组元素中的第一个元素
eg:$("p:first")
:last
只匹配一组元素中的最后一个元素
:not("selector")
在一组元素中，将满足selector选择器的元素排除出去
:odd
匹配偶数行元素(下标为奇数)
:even
匹配奇数行元素(下标为偶数)
:eq(index) --equals
匹配下标等于 index的元素
:gt(index)
匹配下标大于index的元素
:lt(index)
匹配下标小于index的元素
练习：
使用p标记显示 两首诗
变色显示行
隐藏第二首诗
属性过滤选择器
依托于html元素的属性来进行元素过滤的
语法：
[attribute]
作用：匹配包含指定属性的元素
eg:
div[id] 匹配具备id属性的div元素
[attribute=value]
作用：匹配attriburte属性值为value的元素
eg:
input[type="text"](引号可不用) 匹配文本框
input[type=passowrd] 匹配密码框
[attribute!=value]
作用：匹配attrbute属性值不是value的元素
[attribute^=value]
作用：匹配attribute属性值是以value字符开头的元素
eg:
p[class^=col] 匹配col开始的
[attribute$=value]
作用：匹配attribute属性值是以value字符结尾的元素
[attribute*=value]
作用：匹配attribute属性值中包含value字符的元素
子元素过滤选择器
语法：
:first-child
匹配属于其父元素的首个子元素
:last-child
匹配属于其父元素中的最后一个子元素
:nth-child(n)
匹配属于其父元素中第n个子元素(这里的n不是下标)
jQuery操作DOM
基本操作
html()
作用：获取 或 设置 jQuery对象中的html内容
eg:
console.log($("#main").html);
$("main").html("") 设置为空
text()
作用：获取 或 设置jQuery对象中的text内容
val()
作用：获取 或 设置 jquery对象中的value值(表单控件)
属性操作
attr()
作用：读取 或 设置 jQuery对象的属性值
eg:
$obj.attr("id") 获取$obj的id属性值
$obj.attr("id","main") 设置$obj对象的id属性值为main
removeAttr("attrName")
作用：删除jQuery对象的attrName属性
eg:
$obj.removeAttr("class"); 删除class属性
样式操作
attr()
$obj.attr("class","redBack");
设置class值为redBack
addClass("className")
作用：将className 添加到元素的class值之后
eg:
$obj.addClass("c1"); 追加c1
连缀调用
$obj.addClass("c1").addClass("c2");
removeClass("className")
如果无参数的话，则清空类选择器否则删除对应的类选择器
eg:
$obj.removeClass("c1")
$obj.removeClass()
toggleClass("className")
切换样式：
元素如果具备className选择器，则删除
元素如果没有className选择器，则添加
css("属性名")
eg:$obj.css("width");
获取$obj对象的width属性值
css("属性名","属性值");
eg:$obj.css("background-color","yellow")
设置$obj对象的背景颜色的属性值为黄色
css(JSON对象)
JSON对象：
是一种约束了格式的对象表现方式
JSON:JavaScript Object Notation
JSON对象的表示方式：
JSON对象必须使用{}括起来
使用键值对的方式来声明数据(表示属性和值)
所有的属性在使用时必须使用双引号括起来，值如果是字符串的话，也必须使用双引号括起来
属性和值之间使用冒号连接
多对属性和值之间使用逗号隔开
eg:
$obj.css({"color":"red","font-size":"32px",...});
遍历节点
children() / children("selector")
获取某jQuery对象的所有子元素 或 带有指定选择器的子元素
注意：
只考虑子代元素，不考虑后代元素
next() / next("selector")
获取某jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
prev() / prev("selector")
获取某jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
siblings() / siblings(selector)
获取某jQuery对象的所有兄弟元素 / 满足selector的所有兄弟元素
find("selector")
查找满足selector选择器的所有后代元素
parent()
查找某jQuery对象的父元素
创建对象
语法：
$("创建的标记")
eg:
创建一对div (优先使用)
var $div=$("<div></div>");
$div.html("动态创建的div");
$div.attr("id","container");
$div.css("color","red");
创建一对div
var $div=$("<div id='container' seyle='color:red;'>动态创建的div</div>");
插入元素
作用：将创建好的元素插入到网页中
内部插入
作为元素的子元素插入到网页中
方法：
$obj.append($new)
将$new元素插入到$obj元素中的最后一个子元素位置处(追加)
$obj.prepend($new)
将$new元素插入到$obj元素中的第一个子元素位置处(追加)
外部插入
作为元素的兄弟元素插入到网页中
方法：
$obj.after($new);
将$new元素作为$obj的下一个兄弟元素插入进来
$obj.before($new);
将$new元素作为$obj的上一个兄弟元素插入进来
删除元素
$obj.remove();
将$obj元素删除出去
jQuery中的事件处理
页面加载后的执行
类似于window.onload 但不同于 window.onload
jQuery加载后执行的特点：
在DOM树加载完毕的时候就开始执行
$(document).ready(function(){
页面的初始化操作
DOM树加载完成后就开始运行
});
$(),ready(function(){
页面的初始化操作
DOM树加载完成后就开始运行
})
$(function(){
页面的初始化操作
DOM树加载完成后就开始运行
});
jQuery的事件绑定
方式一：
$obj.bind("事件名称",事件处理函数);
eg:
$obj.bind("click",function(){
console.log("...");
});
方式二：
$obj.事件名称(function(){
//事件处理函数
});
eg:
$obj.click(function(){
//通过 this 来触发该事件的DOM对象
})
事件对象-event
在绑定事件的时候，允许传递event参数来表示事件对象
$obj.bind("click",function(event){
//even表示当前事件的事件对象
});
$obj.click(function(event){
//event表示当前时间的事件对象
});
event的使用方式与原生JS事件中的event使用方式一致
event.stopPropagation():阻止事件冒泡
event.offsetX:坐标
event.offsetY:坐标
event.target:获取事件源
jQuery动画
基本显示/隐藏
语法：
显示: $obj.show() / $obj.show(执行时间)单位毫秒
隐藏: $obj.hide() / $obj.hide(执行时间)单位毫秒
滑动式显示/隐藏
语法：
显示: $obj.slideDown() / $obj.slideDown(执行时间)单位毫秒
隐藏: $obj.slideUp() / $obj.slideUp(执行时间)单位毫秒
淡入淡出式显示/隐藏
语法：
显示：$obj.fadeIn() / $obj.fadeIn(执行时间)单位毫秒
隐藏：$obj.fadeOut() / $obj.fadeOut(执行时间)单位毫秒
Invalid or unexpected token 无效标记或意外标记
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
