web笔记

###HTML
- Hyper Text Markup Language：超文本标记语言
- 什么是超文本：不仅仅是文本，还包括文本的样式(字体大小颜色等)，还包括多媒体(图片、音频、视频)
- 和xml的区别：XML标签可以任意定制，HTML标签固定就有那么多种
<book id="1"></book>
- 学习HTML主要学习有哪些标签，标签有哪些属性，标签和标签间的嵌套关系

####HTML文件的结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个html文件</title>
</head>
<body>

</body>
</html>

###HTML中常用的标签
####文本标签
1. <h1></h1>.......<h6></h6> 内容标题标签
2. 段落标签 <p></p>
3. 水平分割线 <hr>
4. 换行 <br>

####简历案例代码参见demo02.html
list-style-type: none;去掉列表前面的修饰
####列表标签
1. 无序列表

<ul>
<li></li>
</ul>
2. 有序列表

<ol type start reversed>
<li></li>
</ol>
3. 定义列表

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
4. 列表嵌套
有序列表和无序列表可以进行任意嵌套，可以嵌套n层

Java基础
1. 变量
2. 数据类型
正数
浮点数
字符串
3. 运算符
Java面向对象
JavaAPI

###分区标签div和span
分区标签自身没有任何显示效果，可以理解成是个容器，此容器用于装各种标签，通过分区标签把页面划分成多个区域，便于对页面中的标签进行统一管理
- div：独占一行
- span：共占一行
- 开发一个复杂的页面需要划分三大区：头部、体部、尾部（脚）

<body>
<div>头部</div>
<div>体部</div>
<div>尾部</div>
</body>
- 在html5的标准中新增了几个分区标签

<body>
<header>头部</header>
<article>体部</article>
<footer>尾部</footer>
</body>
####元素(标签)分类
1. 块级元素：独占一行
包含：div，h1-6,hr
2. 行内元素：共占一行
包含：span，加粗<strong>和<b> 斜体<em>和<i> 删除线<del>和<s> 下划线<u>
####行内元素空格折叠现象
- 一行内连续出现多个空格时只会识别一个空格
- 如果需要使用多个空格通过 代替
###常见特殊字符
- 空格： & n b s p ;
- <: & l t ;
- >: & g t ;
- 换行： <br>

###图片标签
- 格式： <img src="路径">

- src：用于设置图片的路径可以设置为相对路径或绝对路径，如果访问站内资源使用相对路径，访问站外资源使用绝对路径，如果使用绝对路径其它网站图片路径发生改变则图片无法正常显示
- alt:当图片不能正常显示的时候显示的内容
- title: 当鼠标在图片上悬停时显示的文本内容
- width/height:设置图片的宽高两种赋值方式：1.通过百分比按照父元素宽高的百分比进行赋值 2.通过像素以px为单位，如果只对宽度赋值则高度会自动根据图片的原始宽高比进行缩放
- 支持的图片格式：1. jpg和jpeg 2. png（支持透明色） 3. gif

####图片地图
- 给图片的某个范围添加点击事件
- 格式：

- href属性：设置连接的地址，此地址可以指向页面(站内和站外) ，指向各种文件，如果该文件浏览器支持打开则直接浏览（如：图片，pdf），如果浏览器不支持打开此文件则下载

<!DOCTYPE HTML> 文档声明
<html>

<head></head>
<body></body>

</html>

h1-h6 align=left/right/center
<p> 段落标签
hr 水平分割线 br换行
列表标签
无序 ul li
有序 ol li
定义列表 dl dt dd
分区标签： div 独占一行和span 共占一行 header article footer
元素分类： 1. 块级元素：独占一行包含 div,p,hr,h1-h6
2. 行内元素：共占一行包含 span strong和b em和i del和s u
图片标签 <img src alt title width/height >
图片地图
<img src alt title width/height usemap="#xxx"> #代表当前
<map name="xxx"><area shape="rect/circle" coords="" href="路径"></map>

第二天：

###课程回顾
1. 内容标题h1-h6 align=left/center/right 段落标签 p 水平分割线hr换行br
2. 列表：无序列表 ul li type 有序列表 ol li type start reversed ，定义列表 dl dt dd
3. 分区元素：div独占一行和span共占一行 header article footer
4. 元素分类： 1. 块级元素：独占一行，包括：div，h1-h6,p,hr 2. 行内元素共占一行:span strong和b em和i del和s u
5. img src是路径可以赋值相对路径和绝对路径 alt图片不能正常显示时显示的内容 title鼠标悬停显示的文本 width/height: 像素和百分比
6. 图像地图 map name
7.
<map name="mymap">
<area shape="circle/rect" coords="" href="路径">
</map>

####超链接a标签
- 让文本或图片具备点击事件
- 如果a标签没有href属性则和纯文本一样
- href属性的作用和图像地图中的作用一致，值为路径，可以指向页面也可以指向文件(如果浏览器支持浏览此文件则直接浏览，不支持则下载)
- target="_blank" 跳转的页面显示到一个新的窗口
- 锚点的使用 href的值 #id #代表当前页面，id为页面中任何元素的id属性值

####表格标签 table
- 相关标签：table(表格) tr（行） td（列）
- 相关属性：border(边框) cellspacing（边框的间距）cellpadding（边框和内容的距离） td的属性：colspan(跨列) rowspan(跨行)
- caption属性：表格标题
- 表格分组：<thead> <tbody> <tfoot> 用于把表格内的标签进行分组，好处：代码更直观可读性高，便于对标签进行统一管理
- <th> 表头作用和td类似但是会有字体加粗效果

####form表单
- 表单是用于获取用户数据并且将数据发送给服务端的元素
- 文本框 <input type="text">

<input type="text" name="username" value="xxx"
placeholder="用户名" maxlength="5" readonly="readonly">
- 密码框 <input type="password">

- 单选框

<input type="radio" name="gender" value="nan" checked="checked" id="nan" ><label for="nan">男</label>
- 多选框 type="checkbox" 其它属性和单选框一致

- 文件选择器 <input type="file" name="xxx">

- 日期选择器 <input type="date" name="xxx">

- 隐藏域 <input type="hidden">
- 文本域 <textarea rows cols>

- 下拉选

所在地：
<select name="city">
<option>请选择</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
</select>
- 按钮：
1. 提交按钮 <input type="submit" value="注册">
2. 重置按钮 <input type="reset">
3. 自定义按钮 <input type="button">

###注册页面练习：

<h1 align="center">注册表单</h1>
<form action="#">
<table border="1" cellspacing="0" align="center" width="70%">
<tr>
<td>用户名：</td>
<td><input type="text" name="username" > </td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password1" > </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="password2" > </td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="nick" > </td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="gender" value="nan"
id="nan"><label for="nan">男</label><input type="radio" name="gender" value="nan"
id="nv"><label for="nv">女</label> </td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="checkbox" name="hobby" value="lq">篮球
<input type="checkbox" name="hobby" value="wz" checked="checked">王者荣耀
<input type="checkbox" name="hobby" value="gdx">搞对象 </td>
</tr>
<tr>
<td>生日：</td>
<td><input type="date" name="birthday" > </td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="pic" > </td>
</tr>
<tr>
<td>城市：</td>
<td><select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select> </td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea name="intro" rows="3" cols="25">什么都没留下。。。</textarea> </td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" name="yzm" >
<img src="../imgs/2.gif" width="40px" height="20px"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>

###html内容回顾
1. 内容标题：h1-h6 属性：align 段落标签p hr水平分割线 br换行
2. 列表标签：无序 <ul type=""> li 有序列表 <ol type start reversed> <li> 定义列表 <dl> <dt> <dd>
3. 分区元素 div独占一行和span共占一行 header article footer
4. 元素分类：块级元素独占一行包括：div h1-6 p hr 和行内元素:span strong和b em和i del和s u a
5. 图片 <img src title alt width/height>
6. 图像地图 <map name> <area shape="rect/circle" coords= href="">
7. 超链接 <a href="#id" target="_blank">
8. 表格 <table border cellspacing="边框的间距" cellpadding="内容距边框的距离" width align> <tr> <td rowspan colspan> <caption> <thead> <tbody> <tfoot> <th>
9. 表单：<form action="提交的地址" method="get/post">
- 文本框 type="text" name readonly maxlength placeholder
- 密码框 type="password"
- 单选 type="radio" name相同 checked
- lable 增加点击范围 for="id"
- 多选 type="checkbox" checked
- 文件选择 type="file"
- 日期选择 type="date"
- 隐藏域 type="hidden"
- 文本域 <textarea cols rows>
- 下拉选 <select name><option value></option></select>
- 按钮：1.提交按钮 type="submit" 2.重置按钮type="reset" 3.自定义按钮type="button"

第三天：

###课程回顾
1. h1-h6 p hr br

2. 无序 ul li 有序 ol li 定义 dl dt dd
3. 分区 div独占一行和span共占一行 header article footer
4. 分类块级元素 div h1-6 p hr 行内元素 span strong b em i del s u
5. 图片 <img src alt title width/height usemap>
6. 地图 <map name> <area shape coords href>
7. 超链接 <a href target="_blank" >
8. 表格 <table border cellspacing cellpadding ><tr> <td rowspan colspan> <thead> <tbody> <tfoot> <caption> <th>
9. 表单 <form action method > <input type="text/password/radio/checkbox/hidden" readonly maxlength placeholder checked name value> <textarea cols rows> <select name> <option value selected>

###CSS
####什么是CSS
Cascading层叠 Style样式 Sheet表，层叠样式表，CSS用于美化页面，使用CSS可以把样式代码和html分离
####如何在html页面中引入CSS
1. 内联样式：在标签内部添加style属性值为样式代码，弊端是不能复用

<h1 style="background-color: red;border: 1px solid green;">我是一个h1</h1>

2. 内部样式：在head标签内部添加style标签标签体内写样式代码，好处是能在当前页面复用，弊端是不能多页面复用

<style type="text/css">
img{
border: 5px solid blue;
100px;
}
</style>
3. 外部样式：在单独的css文件中写样式代码，在head标签内部通过link标签引入，好处是可以多个页面复用

-练习：创建demo02.html文件和second.css文件
1. 页面中添加一个h1 通过内联样式添加绿色边框并设置红色背景
2. 页面中添加一张图片通过内部样式设置蓝色边框5个像素
3. 页面中添加一个有序列表(显示大象装冰箱的步骤) 通过外部样式设置字体颜色为绿色

####三种引入方式的优先级
1. 内联样式优先级最高
2. 内部和外部相同，后执行的覆盖前面执行的

###选择器
####标签名选择器(基础选择器)
- 格式：标签名{} 会把页面中所有的此类型的标签全部选中
####id选择器(基础选择器)
- 格式： #id{} 把页面中此id的元素选中
####类选择器(基础选择器)
- 格式： .class{} 把页面中此class的元素选中

####属性选择器
- 格式：基础选择器[属性名='属性值']

######练习：创建demo04.html
1. 页面中添加有序列表(还是大象装冰箱) 再添加一个无序列表随意显示三道菜的名字，添加一个提交按钮显示注册再添加一个自定义按钮也显示注册
2. 把有序列表中的第二步字体显示成红色
3. 把有序列表和无序列表的第一个字体显示成蓝色
4. 把有序列表和无序列表的所有背景颜色设置成黄色
5. 把提交按钮设置背景为绿色，把自定义按钮的背景色设置为粉色pink

####后代选择器
- 格式： div p span{} 选取div里面p里面的所有后代span

####子元素选择器
- 格式： div>p>span{} 选取div里面的p里面的span子元素

####分组选择器
- 分组选择器把多个选择器通过,分割合并成一个选择器，用来统一设定样式
- 格式： div,#id,.class{}

####任意元素选择器(所有元素选择器)
- 格式： *{}

####伪类选择器
- 选则元素的状态
- 元素有以下几种状态：
1. 未访问状态 a:link{}
2. 点击状态 a:active{}
3. 鼠标悬停状态 a:hover{}
4. 访问过状态 a:visited{}

###CSS中的常用属性
####颜色的赋值方式
1. 通过颜色单词赋值 red green blue yellow pink purple
2. 通过6位16进制赋值三原色rgb（red green blue）三原色取值范围0-255
举例：红色 ff0000 蓝色 0000ff 绿色 00ff00 黄色 ffff00
3. 通过3位16进制赋值红色 #f00
4. 通过3位10进制赋值红色 rgb(255,0,0)
5. 通过4位10进制赋值红色 rgba(255,0,0,0-1)透明度，最后一位是透明度，取值范围0-1,越小越透明
####设置背景图片
/* 设置背景图片 */
background-image: url("../imgs/a.jpg");
/* 设置背景图片的尺寸 */
background-size: 200px 200px;
/* 禁止重复 */
background-repeat: no-repeat;
/* 控制背景图片的位置横向： left center right 纵向：top bottom*/
/* background-position: left center; */
background-position: 100% 90%;

###布局相关属性（盒子模型）
- 盒子模型包括：元素的宽高，外边距，内边距，边框

#### 宽高 width、height
- 块级元素可以设置宽高，如果只设置宽度高度会自动识别为内容的高度，行内元素的宽高由内容决定不能修改

####外边距
- 指元素边框距离上级元素或相邻兄弟元素的距离
- 外边距的赋值方式：

/* margin-top: 50px;
margin-left: 80px;
margin-bottom: 30px; */
/* 上下左右外边距都为10px */
/* margin: 10px; */
/* 上下10px 左右20px */
/* margin: 10px 20px; */
/* 水平居中 */ 20px;
/* margin: 0 auto; */
/* 上右下左顺时针 */
margin: 10px 20px 30px 40px;
- 行内元素左右外边距生效，上下外边距不生效，行内相邻的两个元素同时存在右外边距和左外边距时两值相加
- 块级相邻的两个元素同时存在下外边距和上外边距时两值取最大值

第四天：

###课程回顾
1. CSS 层叠样式表美化页面
2. 引入方式：三种，
- 内联：在标签的style属性里面写样式代码弊端不能复用，优先级最 20px;高
- 内部：在head标签里面添加style标签，好处可以当前页面复用，弊端不能多页面复用
- 外部：在单独css文件中写样式代码，在head标签内部通过link标签引入css文件，好处可以多页面复用
3. 选择器
- 标签名选择器：标签名{}
- id选择器： #id{}
- 类选择器： .class{}
- 属性选择器：基础选择器[属性名='属性值']
- 任意元素选择器： *{}
- 后代选择器 div span a{}
- 子元素选择器 div>span>a{}
- 分组选择器 div,#id,.class{}
- 伪类选择器未访问 a:link 访问过 a:visited 悬停：a:hover 点击:a:active
4. 颜色赋值 #00ff00 #0f0 rgb(0,255,0) rgba(0,255,0,0-1) 颜色单词
5. 背景图片 background-color/image/size/repeat/position
6. 盒子模型：宽高，外边距，内边距，边框
- 宽高：块级元素可以设置宽高，行内元素宽高由内容决定

###外边距
元素边框距离上级元素或相邻兄弟元素边框的距离
- 赋值方式：margin-left/right/top/bottom, margin:10px; margin:10px 20px, margin:0 auto; margin:10px 20px 30px 40px;
- 块级元素外边距全部生效
- 行内元素外边距上下不生效
- 左右相邻元素外边距相加上下相邻元素外边距取最大值

- 当元素的上边缘和上级元素的上边缘重叠时元素添加上外边距时会出现粘连的问题，通过给上级元素添加 overflow:hidden解决
###边框
border-top/bottom/left/right: 1px solid red;

- 块级元素边框全部生效，会影响元素的宽高
- 行内元素边框全部生效，会影响宽度不会影响高度

- border-radius 控制元素的圆角，值越大越园

###内边距
- 什么是内边距：元素边框距内容的距离称为内边距

- 如果移动元素内的文本内容使用内边距（内边距会改变元素的宽高），如果移动元素内的子元素，给子元素添加外边距移动，因为这样不会影响元素的宽高

- 块级元素内边距全部生效，会影响元素所占宽高
- 行内元素内边距全部生效，会影响宽度不会影响高度

####文本相关属性

/* 文本水平对齐 left/right/center*/
text-align: center;
/* 文本修饰上划线overline
下划线underline 删除线line-through none(去掉元素自带修饰)*/
text-decoration: line-through;
/* 文本颜色 */
color: green;
/* 文本阴影
1.阴影颜色 2.x方向偏移值 3.y方向偏移值
4.模糊度值越小越清晰*/
text-shadow: blue -15px 15px 10px;
/* 行高用于让文本在元素中垂直居中，值为元素的高度*/
line-height: 100px;

####字体相关 20px;

/* 字体大小 */
font-size: 30px;
/* 加粗 */
/* font-weight: bold; */
/* 斜体 */
/* font-style: italic; */
/* 字体 */
font-family: "黑体";
font: 30px "SimSun","宋体","Arial Narrow",HELVETICA;

####学子商城首页练习代码参见demo07.html

####溢出设置 overflow
- 超出显示：overflow：visible
- 超出隐藏：overflow：hidden
- 超出滚动显示：overflow：scroll

####显示方式 display
- block: 块级元素的默认值，独占一行可以修改宽高
- inline: 行内元素默认值，共占一行不可以修改宽高
- inline-block:行内块共占一行并且可以修改宽高

###课程回顾：
1. 盒子模型边框+外边距+内边距+宽高
如何计算一个元素所占的宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
- 宽高：块级元素可以设置宽高行内元素宽高由内容决定
- 外边距：元素边框距上级元素或相邻兄弟元素的距离， margin-left/top/right/bottom margin:10px; margin:10px 20px; margin:20 auto margin:10px 20px 30 20px;px 40px 上右下左
块级元素全部生效
行内元素上下不生效
- 边框： border-top/left/right/bottom:
块级元素全部生效，会影响元素所占宽高
行内元素全部生效，会影响宽度不会影响高度
- 内边距：元素边框距内容的距离 padding:10px; padding:10px 20px
块级元素全部生效，会影响元素所占宽高
行内元素全部生效，会影响宽度不会影响高度

2. 文本相关：
- 文本对齐方式 text-align:left/center/right
- 文本修饰 text-decoration:overline/underline/line-through/none
- 文本颜色 color:red
- 阴影： text-shadow:red 10px 10px 5px;
- 行高： line-height:10px;
3. 字体相关
- 字体大小： font-size
- 加粗： font-weight:bold
- 斜体： font-style:italic
- 字体： font-family:xxxx
4. 溢出设置
- 隐藏 overflow:hidden;
- 显示 overflow:visible;默认
- 滚动 overflow:scroll;
5. 显示方式
- 块级 display:block
- 行内 display:inline
- 行内块 display:inline-block

第五天：

###课程回顾
1. 盒子模型：宽高，外边距，内边距，边框
- 宽高：块级元素可以设置行内元素由内容决定
- 外边距：元素边框距上级元素或相邻兄弟元素的距离 margin-top/left/right/bottom margin:10px 20px 30px 40px
块级元素：全部生效
行内元素：上下不生效
左右相邻相加上下取最大
粘连问题：元素上边缘和上级元素的上边缘重叠时出现，通过overflow：hidden解决
- 边框： border-top/left/right/bottom
块级元素：全部生效，影响宽高
行内元素：全部生效，影响宽度不影响高度
圆角：border-radius:值越大越园
- 内边距：元素边框距内容（文本或子元素）的距离 padding
块级元素：全部生效，影响宽高
行内元素：全部生效，影响宽度不影响高度

2. 文本相关属性：
- 水平对齐 text-align:left/right/center
- 文本修饰 text-decoration: overline/underline/line-through/none
- 颜色 color：red
- 阴影 text-shadow:red 5px 5px 模糊度值越小越清晰
- 行高 line-height:
3. 字体相关
- 字体大小 font-size
- 加粗 font-weight:bold
- 斜体 font-style:italic
- 字体 font-family：xxxx,xxx,xxx
4. 溢出设置 overflow
- hidden 超出隐藏
- visible 超出显示（默认）
- scroll 超出滚动显示
5. 显示方式 display
- block 块级独占一行
- inline 行内共占一行不能改宽高
- inline-block 行内块共占一行也可以修改宽高

###定位方式
####文档流定位（静态定位）
- 默认的定位方式，显示的元素从上到下，从左向右排列，通过外边距控制位置
- 格式： position:static
####相对定位[position: relative;]
- 元素不脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于元素的初始位置
- 应用场景：当元素需要从当前位置做位置偏移时，仍然占着原来的位置
####绝对定位[position: absolute;]
- 元素脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口或做了相对定位的祖先元素
- 应用场景：当元素需要做位置偏移，不需要保留原来位置时使用绝对定位
####固定定位[position: fixed;]
- 脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口。
- 应用场景，当某个元素需要固定在窗口的某个位置的时候使用固定定位

####浮动定位[float: right;]
- 脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边缘或同级其它浮动元素时停止
- 如果一行显示不下，会自动折行，如果折行时上面的一行有凸出的部分有可能会被卡住
- 如果元素的所有子元素全部浮动，则自动识别的高度为0，通过给元素添加overflow:hidden;
- 如果元素浮动则会脱离文档流后面的元素会顶上来，可以通过给后面元素添加clear:right/left属性让后面的元素左右两侧不允许有浮动，这样后面的元素就不会再顶上来。
- 应用场景：当纵向排列的元素需要改成横向时使用浮动定位
list-style-type: none;去掉列表的修饰
###行内元素垂直对齐方式

/* vertical垂直对齐方式默认基线对齐baseline
top上对齐 bottom下对齐 middle中间对齐 */
/* vertical-align: middle; */
vertical-align: bottom;下对齐
/* 如果有需求对页面中的某一个元素做位置偏移
需立即想到相对定位 */
/* position: relative;
top: 10px; */

###CSS的三大特性
1. 继承性
子元素可以继承祖先元素中的部分属性，只能继承color/font-开头/text-开头/line-开头的属性，某些特定元素自带显示效果不受继承影响比如：超链接a，h1-h6字体大小不受继承影响
2. 层叠性
通过不同的选择器可以选择到同一个元素,如果作用的属性不同则全部生效，如果设置的是相同的样式则根据优先级决定
3. 优先级
作用范围越小优先级越高，直接选中优先级高于间接选中（继承）
id>class>标签名>继承

关于浮动问题：
z-index: -100;这个可以解决一块浮动覆盖另一块浮动的问题，值越大，浮动在越上方，值要是一个整数就行，正负都行
截屏工具：FastStone Capture

第六天：

20px;
###课程回顾：

####CSS
1. CSS层叠样式表美化页面
2. 引入方式：
- 内联样式：在标签内部的style属性里面写样式，优先级最高，不能复用
- 内部样式：在head标签内部添加style标签，标签体内写样式，好处本页面内复用，不能多页面
- 外部样式：在单独的css文件中写样式代码，在html页面中head标签里面通过link标签引入css文件，好处可以多页面复用
3. 选择器
- 基础选择器：标签名选择器 div{} id选择器 #id{} 类选择器 .class{}
- 属性选择器基础选择器[属性名='值']{}
- 任意元素选择器 *{}
- 子孙后代选择器 div span a{}
- 子元素选择器 div>span>a{}
- 伪类选择器未访问状态a:link 访问过 a:visited 悬停a:hover 点击a:active
- 分组选择器 div,span{}
4. 颜色赋值
- 颜色单词 red
- 6位16进制 #ff0000
- 3位16进制 #f00
- 3位10进制 rgb(255,0,0)
- 4位10进制透明度 rgba(255,0,0,0-1)
5. 背景
- 背景颜色 background-color
- 背景图片 background-image
- 背景图尺寸 background-size: 200px 100px
- 禁止重复 background-repeat:no-repeat
- 背景图位置 background-position: top/right/bottom/left/center 通过百分比
6. 盒子模型
- 外边距，边框，内边距，宽高
- 外边距：元素边框距上级元素或相邻兄弟元素的距离， margin-left/right/top/bottom: margin:10px 20px 30px 40px;上右下左
块级元素：全部生效
行内元素：上下不生效
粘连问题：当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题，通过overflow：hidden解决
左右相邻外边距相加，上下相邻外边距取最大值
- 边框： border-left/right/top/bottom: 边框粗细像素边框的样式solid 颜色
块级元素：全部生效，影响元素的宽高
行内元素：全部生效，只影响宽度不影响高度
- 内边距：元素边框距内容(文本或子元素)的距离，padding赋值方式和外边距一样
块级元素：全部生效，影响元素的宽高
行内元素：全部生效，只影响宽度不影响高度
- 宽高：块级元素可以修改宽高，行内元素的宽高由内容决定
7. 文本相关
- 文本水平对齐方式： text-align:left/right/center
- 文本修饰：text-decoration:overline/underline/line-through/none
- 颜色： color:red
- 阴影： text-shadow:颜色 x偏移 y偏移模糊度值越大越模糊
- 文本行高： line-height: 用于解决文本垂直对齐问题
8. 字体相关
- 字体大小：font-size
- 字体加粗：font-weight:bold/normal
- 斜体： font-style:italic
- 字体：font-family:字体名称可以写多个
9. 溢出设置 overflow
- 超出显示 overflow：visible；默认
- 超出隐藏 overflow:hidden
- 超出滚动 overflow：scroll
10. 显示方式 display
- 块级 display：block 独占一行可以修改宽高
- 行内 display:inline 共占一行不可以修改宽高
- 行内块 display:inline-block 可以修改宽高也可以显示在同一行
11. 定位方式
- 静态定位/文档流定位（默认）块级从上到下行内从左向右
- 相对定位：不脱离文档流，元素偏移值相对于元素初始位置
- 绝对定位：脱离文档流，元素偏移值相对于窗口或做了相对定位的祖先元素
- 固定定位：脱离文档流，元素偏移值相对于窗口
- 浮动定位:脱离文档流，元素会在当前所在行内向左或向右浮动，当撞到上级元素边框或同级其它浮动元素边框时停止，如果一行显示不下会自动折行，折行时可能会被卡主，如果上面有浮动元素又不希望元素顶上去可以给元素添加clear属性，如果元素的所有子元素全部浮动的话元素自动识别的高度为0，通过overflow：hidden解决
12. 行内元素垂直对齐方式 vertical-align:baseline/top/bottom/middle
13. CSS三大特性
- 继承：元素可以继承祖先元素中的部分属性，只有文本相关和字体相关可以继承。
- 层叠：不同的选择器可以选择到同一个元素，如果作用的样式不同，则全部生效，如果样式相同则由选择器的优先级决定哪个生效
- 优先级：作用范围越小优先级越高，id>class>标签名>继承

实现步骤：
1. 搭建页面内容
2. 把第一层的li向左侧浮动并设置宽度为111px
3. 去掉所有列表的图标
4. 去掉自带的缩进效果
5. 修改两层li的字体大小并且文本居中

##JavaScript
html用于搭建页面结构和内容，CSS用于美化页面，JavaScript用于给页面添加动态效果和动态内容
###JS历史
95年由网景(NetScape)公司发布 LiveScript 同年更名为JavaScript，和Java没有任何关系，只是为了层热度
###JS特点
1. 属于脚本语言不需要编译由浏览器解析执行
2. js可以嵌入到html中
3. js基于面向对象
4. js语言安全性比较高，js语言只能访问浏览器内部的数据，不允许访问磁盘当中的数据
###如何在html页面中引入js
1. 在标签内部的事件中添加js代码

<input type="button" onclick="alert('第一种引入')" value="点我试试">
2. 在head里面添加script标签在标签体内写js代码（script标签可以写在html页面的任意位置但是推荐写在head里面）

<script type="text/javascript">
alert("第二种引入方式");
</script>

3. 在单独的js文件中写js代码通过script标签引入，如果script标签引入了js文件则不能再写js代码
<script type="text/javascript" src="first.js"></script>

###数据类型 20px;
1. 数值类型 number
2. 字符串类型 string
3. 布尔值类型 boolean
4. 未定义类型 undefined
5. 对象类型 object

###变量的声明和赋值
- js语言属于弱类型语言,声明变量时不需要指定类型

java写法：int x = 10;
//variable 变量
var x = 10;
x="abc";
x=true;
var y = "刘备";
var z = true/false;
var i; //未定义类型
var p = new Person();
**在js语言中一行结尾的分号可以省略，但是不推荐**

####数值类型
- 数值类型底层都是浮点型，在使用过程中会自动转换类型

int x = 5;
int y = 3;
int z = x/y; 结果1
- 在js中两数相除结果会自动转换正数或小数
var x = 5;
var y = 2;
var z = 5/2;
z= 2.5
- NaN: Not a Number 不是个数，使用isNaN()方法判断某个变量是否是数值类型
####字符串类型
可以使用单引号或双引号修饰字符串
var s = "abc";
var s = 'abc';

####布尔值类型
var b = true/false;

####未定义类型
var x;
当只声明变量不赋值的时候，此时这个变量的类型为undefined

####对象类型
var p = new Person();

20px;

第七天：

###课程回顾
1. JavaScript 给页面添加动态效果和动态内容
2. 引入方式：三种
- 在元素的标签内的事件中添加js代码点击事件
- 在head标签中添加script
- 在单独的js文件中然后通过 script标签引入如果引入了文件就不能再写js代码
3. 数据类型
- 数值类型 number
- 字符串类型 string
- 布尔值类型 boolean
- 未定义类型 undefined
- 对象类型 object

4. 变量声明和赋值
- 弱类型语言声明变量不需要指定类型
var x=18; x="abc";

###数据类型的隐式转换
- 在js中数据类型会根据不同的场景自动转换类型

1. 数值类型
- 转字符串直接转 18->"18" var x = "abc"+18;
- 转布尔值 0和NaN 转成false 其它都是true
if(NaN){alert("aaa")}else{alert("bbb")};

2. 字符串类型
- 转数值能转直接转，不能转转成NaN "18"->18 "abc"->NaN "18abc"->NaN var x = "20"-18;
- 转布尔值空字符串转成false 非空转成true

3. 布尔值类型
- 转字符串直接转 true->"true" false->"false" var x="abc"+true;
- 转数值 true->1 false->0 var x= 20+true;

4. undefined
- 转数值 NaN 20+undefined=NaN
- 转字符串 "undefined" "abc"+undefined = "abcundefined";
- 转布尔值 false if(undefined){alert("aaa")}else{alert("bbb")};

5. null
- 转数值 0 20+null=20
- 转字符串 null->"null" "abc"+null="abcnull"
- 转布尔值 false if(null){alert("aaa")}else{alert("bbb")};
####练习：点击按钮在页面中弹出"66"+6 和 "66"-6的结果

###运算符 + - * / % > < >= <= == !=
- js中的运算符和Java中的大体相同
- ==和===，== 在比较两端变量时会先统一类型再比较，===会先比较类型是否相等如果相等再继续比较值是否相等
- typeof 获取变量的类型 typeof 变量名称

typeof 66 + 6 = "number6"
- 除法运算会自动转换整数和小数 10/2=5 5/2=2.5

###语句 if else while do while for switch case
- 和Java大体相同
- if while 括号里面如果类型不是布尔值类型会自动转换成布尔值类型转换规则参见上面的隐式转换
- for循环里面 int i 改成 var i ，不支持增强for循环
for(var i=0;i<10;i++){
console.log(i);
}

###函数/方法
- java方法声明：
public void run(参数列表){
return xxx;
}
- JavaScript方法声明：
function run(参数列表){
return xxx;
}

- 常见的几种方法声明：

/* 无参无返回值 */
function fn1(){
alert("fn1执行了");
}
//调用
//fn1();
/* 有参无返回值 */
function fn2(name,age){
alert("name:"+name+"age:"+age);
}
//fn2("曹操",50);
/* 有参有返回值 */
function fn3(x,y){
return x+y;
}
//var result = fn3(2,3);
//alert(result);

/* 无参有返回值 */
function fn4(){
return "fn4执行了";
}
//alert(fn4());

function fn5(){
alert("方法执行了");
}
- 第二种方式声明方法

var 方法名 = function(参数列表){
return xxx;
}

###和页面元素相关的方法
1. 通过id获取页面中的元素
var x = document.getElementById("元素id");

2. 获取和设置文本框的内容
x.value="abc";
var y = x.value;

3. 给元素设置文本内容和获取元素内的文本内容
div.innerText="abc";
div.innerText;//获取
4. 给元素添加子元素
div.innerHTML="<h1>abc</h1>"
如果是追加内容把=换成+=

####求平方的练习：
1. 搭建页面在页面中添加一个文本框和按钮
2. 在head里添加script标签里面声明一个方法 myfn() 然后点击按钮的时候调用此方法
3. 方法内部先通过id获取文本框对象
4. 获取文本框里面的内容并且判断此内容是不是NaN
5. 如果是NaN则修改文本框里面的内容为：输入错误
6. 如果不是NaN则获取里面的值相乘把得到结果再次赋值给文本框

第八天：

###课程回顾
1. 三种引入方式：
- 在元素标签的事件中添加js代码事件：点击事件
- 在head标签中添加script标签
- 在单独的js文件中写js代码通过script标签的src属性，引入
2. 数据类型
- 数值类型 number
- 字符串类型 string
- 布尔值类型 boolean
- 未定义类型 undefined
- 对象类型 object
3. 变量声明和赋值
- js属于弱类型语言 var x=10;
4. 数据类型间的隐式转换
- 字符串转数值：能转直接转不能则转NaN 转布尔值：""->false 其他true
- 数值类型转字符串：直接转转布尔值 0和NaN转false 其它true
- 布尔值转字符串：直接转转数值 true->1 false->0
- 未定义类型转字符串：直接转转数值 NaN 转布尔值 false
- null 转字符串：直接转转数值 0 转布尔值 false

5. 运算符和java大体相同
- ==和=== ==先统一类型再比较值，===先比较类型再比较值
- typeof 获取变量的类型
- 除法自动转换整数和小数
6. 语句和java大体相同
- if和while括号里面的内容如果不是布尔值类型会自动隐式转换
- for int i 改成 var i 不支持增强for循环
7. 函数声明
- 第一种格式： function 方法名（参数列表）{ return xxx;}
- 第二种格式： var 方法名 = function(参数列表){return xxx;}
8. 页面相关的方法
- 通过id获取页面元素 var x = document.getElementById("id");
- 获取和设置文本框的内容 x.value
- 给元素设置文本内容 x.innerText+="abc";
- 给元素添加html内容 x.innerHTML += "<h1>xxx</h1>";

###String相关内容
1. 创建字符串的两种方式
var str = "abc"; 支持单引号或双引号
var str = new String("abc");
2. 把字符串转数值
parseInt() 把字符串或小数转成整数
parseFloat() 把字符串转成小数或整数
Number() 等效parseFloat()
3. 字符串转大小写
str.toUpperCase();//转大写
str.toLowerCase();//转小写
4. 获取字符串出现的位置从0开始
var str = "abcdefg";
str.indexOf("e"); //找第一个出现的位置
str.lastIndexOf("e");//找最后一个出现的位置
5. 截取字符串
str.substring(start,[end]);
str.substring(3);//从3截取到最后
str.substring(3,5);//从3截取到5
6. 替换字符串
str.replace();
color
var str ="<div class='[c]'></div>"
str = str.replace("[c]",color);
7. 拆分字符串
str.split(",");//将一个字符串拆分成多个字符串，返回值为数组数组里面装着多个字符串
###数值相关四舍五入
18.34567.toFixed(3);

###数组相关
1. 创建数组数组中可以保存任意类型的数据
var arr1 = ["刘备",18,true];
var arr2 = new Array();
var arr3 = str.split(","); //数组声明时没有[]

2. 向数组里面添加内容
arr.push("张学友");
arr.push(18);
arr.push(false);
3. 修改数组的长度（Java数组的长度不能改）
var arr = ["张三","李四","王五","赵六","田七"];
arr.length=3;

4. 数组的遍历
var arr = ["张三","李四","王五","赵六","田七"];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
5. 数组反转 "a","b","c" c b a
arr.reverse();

上午内容回顾：
1. 字符串相关
- 创建字符串 var str = "abc"; str = new String();
- 字符串转数值 parseInt parseFloat Number
- 转大小写 toUpperCase() toLowerCase();
- 获取字符串出现的位置 str.indexOf() str.lastIndexOf();
- 截取字符串 str.substring(start,?end)
- 替换字符串 str.replace(old,new);
- 拆分字符串 var arr = str.split(",");
2. 四舍五入 number.toFixed(n) n代表保留几位小数
3. 数组相关
- 创建数组 var arr1 = ["abc",18,true]; var arr2 = new Array();
- 数组中添加元素 arr.push("abc");
- 修改数组的长度 arr.length=3;
- 遍历数组
- 数组内容反转 arr.reverse(); a b c c b a

6. 数组排序
- 默认的排序规则是以字符串的形式进行排序，排序规则是通过Unicode字符编码进行排序，比完第一位再比第二位以此类推。
var arr = [25,1,8,15,22,35,40];
arr.sort();
- 自定义排序：

//声明一个自定义排序的方法
function sortfn(a,b){
//return a-b;//升序
return b-a;//降序
}
//如果方法是作为参数传递的话不写括号
//方法调用时才需要写括号
arr.sort(sortfn); */
//给排序方法传递一个匿名函数
/* arr.sort(function(a,b){
return a-b;
});

- 第三种声明函数的方式
/* var myfn = new Function("x","alert(x);");
myfn(18); */

//传递匿名函数
arr.sort(new Function("a","b","return a-b;"));

###日期相关内容
- 服务器时间和客户端时间
1. 获取当前时间(客户端时间)
var d1 = new Date();
2. 把从服务器端请求到的时间字符串转成Date对象
var d2 = new Date("2018/10/11 14:33:22");
3. 从时间对象中获取和设置时间戳（距离1970年1月1日 00：00：00）
d1.getTime();
d1.setTime(1000); 1970/1/1 08:00:01
4. 从时间对象中获取时间分量（单独的年月日时分秒星期几）
- d1.getFullYear(); //年
- d1.getMonth();//月从0开始
- d1.getDate();//日
- d1.getDay();//星期几
- d1.getHours();//时
- d1.getMinutes();//分
- d1.getSeconds();//秒
5. 获取年月日和获取时分秒
- 年月日 d1.toLocaleDateString();
- 时分秒 d1.toLocaleTimeString();

###正则表达式
- 应用场景： 1. 查找内容 2. 校验文本

. : 匹配任意字符除了换行
w : 匹配任意数字、字母、下划线
d : 匹配任意数字
s : 匹配任意空白
^ : 开头
$ : 结尾
- 创建正则对象的两种方式：
1. var reg = /规则/模式; （模式：g代表全局查找， i忽略大小写）
2. var reg = new RegExp(规则,?模式); 这种方式创建正则对象时如果有反斜杠需要转译

//第一种创建正则对象的方式
//创建一个以a开头的正则，i代表忽略大小写
var reg1 = /^a/i;
//创建一个以m结尾的正则
reg1 = /m$/;
//创建一个包含两位数字的正则
reg1 = /d{2}/;
//创建一个以三位数字开头的正则
reg1 = /^d{3}/;
//创建一个以y开头以m结尾中间有5位数字
reg1 = /^yd{5}m$/;
//创建一个由3-5位数字组成的正则
reg1 = /^d{3,5}$/;
//创建一个6-10位数字字母下划线的正则
reg1 = /^w{6,10}$/;
//第二种创建正则对象的方式 new RegExp(规则,？模式);
var reg2 = new RegExp("^\w{6,10}$");

- 和正则相关的几个方法：
1. reg.exec(str) 查找内容

//1. 查找内容
var str = "you can you up no can no b b ";
//全局查找no
var reg = /no/g;
//exec执行(execute)
//alert(reg.exec(str)); //找到第一个no
//alert(reg.exec(str)); //找到第二个no
//alert(reg.exec(str)); //null 代表没有了
2. reg.test(str) 校验文本

reg = /^You/i;
if(reg.test(str)){
alert("格式正确");
}else{
alert("格式错误");
}
3. 字符串中和正则相关的方法：1. 查找内容
var str = "you can you up no can no b b ";
var reg = /no/g;
//此方法一次性查询到所有出现的内容装在一个数组中返回
var arr = str.match(reg);
4. 字符串中和正则相关的方法：2. 查找替换
var str = "you can you up no can no b b ";
var reg = /no/g;
//查找到正则匹配的所有内容并全部替换掉
str.replace(reg,"不");

###课程回顾：
1. js 用于给页面添加动态效果和动态内容
2. 三种引入方式:
- 标签内的事件属性中添加
- 在head标签内部添加 script标签
- 在单独的js文件中写js代码通过 script标签的src属性引入
3. 数据类型
- 数值类型 number
- 字符串 string
- 布尔值 boolean
- 未定义 undefined
- 对象 object
4. 变量声明和赋值弱类型语言 var x = 10;
5. 隐式转换
6. 运算符和Java大体相同
- ==和=== ==先统一类型再比较值 ===先比较类型再比较值
- typeof 获取变量的类型
- 除法会自动转换整数和小数
7. 语句 if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值，for 把int i改成var i 不支持增强for
8. 方法声明：
- function 方法名(参数列表){return xxx;}
- var 方法名 = function(参数列表){return xxx;}
- var 方法名 = new Function("参数","参数","方法体代码");
9. 和页面相关
- 通过id获取页面中的元素对象 var x = document.getElementById("id");
- 给文本框获取和设置文本内容input.value = "xxx" var x = input.value
- 给元素添加文本内容 div.innerText+="xxx";
- 给元素添加html内容 div.innerHTML+="<h1>xxx</h1>";
- 修改元素的class div.className="xxx";
10. 字符串相关
- 创建 var str = "abc"; var str = new String("abc");
- 转数值 parseInt() parseFloat() Number()
- 获取字符串出现的位置 str.indexOf("a") str.lastIndexOf("b")
- 大小写 str.toUpperCase() str.toLowerCase();
- 截取 str.substring(start,?end);
- 替换 str.replace(old,new);
- 拆分 var arr = atr.split(",");
11. 四舍五入 num.toFixed(n); n代表保留几位小数
12. 数组
- 创建数组 var arr = [18,20]; var arr = new Array();
- 添加元素 arr.push();
- 修改长度 arr.length = 3;
- 遍历和Java一样
- 反转 arr.reverse() a,b,c c,b,a
- 排序 arr.sort() 自定义排序 arr.sort(mysort)

function mysort(a,b){
return a-b;//升序 b-a降序
}
13. 日期相关
- 获取客户端时间 var d = new Date();
- 把字符串时间转成时间对象 var d = new Date("2018/10/22 18:33:22");
- 获取和设置时间戳 d.getTime() d.setTime(1000)
- 获取时间分量 d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()
- 获取年月日 toLocaleDateString() 时分秒 toLocalTimeString()
14. 正则
- .任意字符除了换行
- d 任意数字
- w 任意数字字母下划线
- s 任意空白
- ^ 开头
- $ 结尾
1. 创建正则的两种格式
- var reg = /规则/模式(g全局查找和i忽略大小写)
- var reg = new RegExp(规则,模式); 如果有需要转译
2. 相关方法
- 查找 reg.exec(str);
- 校验 reg.test(str);
- 查找 str.match(reg) 返回值为查找到的所有内容保存在一个数组里面
- 查找替换 str.replace(reg,new) 替换正则匹配到的所有内容

第九天：

###数组相关
1. 创建数组数组中可以保存任意类型的数据
var arr1 = ["刘备",18,true];
var arr2 = new Array();
var arr3 = str.split(","); //数组声明时没有[]

4. 数组的遍历
var arr = ["张三","李四","王五","赵六","田七"];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
5. 数组反转 "a","b","c" c b a
arr.reverse();

- 第三种声明函数的方式
/* var myfn = new Function("x","alert(x);");
myfn(18); */

//传递匿名函数
arr.sort(new Function("a","b","return a-b;"));

###正则表达式
- 应用场景： 1. 查找内容 2. 校验文本

- 和正则相关的几个方法：
1. reg.exec(str) 查找内容

第十天：

###课程回顾
1. 事件取消 return false;
2. 自定义对象
- function Person(name,age){
this.name=name;
this.age=age;
this.run = function(){}
}
- var p = {
"name":"程咬金",
"age":18,
"run":function(){}
}
3. DHTML = html+css+js
4. DHTML包括 BOM 浏览器对象模型和 DOM 文档对象模型
5. window里面的变量称为全局变量调用时可以省略window.
- location.href 获取浏览器访问的地址还可以修改
- history.length history.back()/forward()/go(n)
- screen.width/height screnn.availWidth/availHeight 可用宽高
- navigator.userAgent 获取浏览器版本信息
6. window相关事件窗口点击事件 onclick= function(){} 页面加载完成事件 onload=function(){} 获取焦点事件 onfocus=function(){} 失去焦点事件 onblur=function(){}
7. eval() 可以将字符串以js代码的形式执行
8. 弹出框： 1.alert() 2.confirm() 3. prompt() 弹出文本框
9. 添加样式 xx.style.样式名称="值";
10. 定时器 setInterval(方法,时间间隔)
11. 创建元素对象 var x = document.createElement("img");
12. 往body（页面）中添加元素对象 document.body.appendChild(x);
13. 随机数 Math.random() 0-1
14. 向下取整 Math.floor()
Math.floor(Math.random()*3+3)
获取4-9的随机数 0-5 Math.floor(Math.random()*6+4)

###停止定时器
var timeId = setInterval(方法名,时间间隔);
clearInterval(timeId);

###setTimeout(方法名,时间间隔);

setTimeout()

###DOM

文档对象模型，学习DOM主要用于对页面中的元素进行增删改查操作
####查找元素
- 通过id查找
var x = document.getElementById("id");
- 通过标签名查找
var imgs = document.getElementsByTagName("img");
- 通过class查找元素
var divs = document.getElementsByClassName("c1");
- 通过name属性值查找
var arr = document.getElementsByName("gender");

####创建元素
var div = document.createElement("div");
- 添加元素到最后 document.body.appendChild(div);
- 插入元素父元素.insertBefore(新元素,弟弟元素);
- 删除元素父元素.removeChild(被删除的元素对象);

###JS
1. 用于给页面添加动态效果和动态内容
2. 三种引入方式
- 标签属性事件中添加
- 在head标签里面添加script标签
- 在单独js文件中
3. 数据类型数值类型number 字符串类型string 布尔值类型boolean 未定义类型undefined 对象类型object
4. 运算符大体相同 ==和=== 除法 typeof 66+6 number6
5. 语句大体相同 if和while括号里面的内容会自动转成布尔值类型 for var
不支持增强for循环
6. 函数方法
- function 方法名(参数列表){方法体};
- var 方法名 = function(参数列表){方法体};
- var 方法名 = new Function("参数1","参数2","方法体")
7. 字符串相关：
- 创建 var str = "" ; str = new String();
- 转数值 parseInt() parseFloat() Number()
- 获取字符串出现的位置 str.indexOf("a"); str.lastIndexOf("a");
- 转大小写 toUpperCase() toLowerCase();
- 截取 substring(start,end?)
- 替换字符串 replace（old,new）
- 拆分 var arr = str.split(",");
8. 四舍五入 num.toFixed(保留小数点位数)
9. 数组相关
- 创建 var arr = [20,18]; var arr = new Array("",18);
- 添加 arr.push();
- 长度 arr.length=3;
- 反转 arr.reverse();
- 排序 arr.sort(); arr.sort(new Function("a","b","return a-b;"));
10. 日期
- 创建 var d = new Date();
- 通过字符串创建时间对象 var d = new Date("2018/10/11 20:18:22");
- d.setTime(); d.getTime();
- d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()
- d.toLocaleDateString() d.toLocaleTimeString();
11. 正则： . d w s ^ $
- var reg = /规则/模式; var reg = new RegExp(规则,模式?);
- reg.exec(str) reg.test(str)
- str.match(reg) str.replace(reg,new)

第十一天：

###JavaScript中的事件处理
- 事件包括：鼠标事件、键盘事件、状态改变事件
- 鼠标事件：点击事件：onclick 鼠标移入:onmouseover 鼠标移出：onmouseout 鼠标按下：onmousedown 鼠标松开： onmouseup 鼠标移动：onmousemove
- 键盘事件：键盘按下:onkeydown 键盘松开: onkeyup
- 状态改变事件： onchange(value值改变事件) onload(页面加载完成事件)
onfocus（获取焦点事件） onblur(失去焦点事件) onsubmit（表单提交事件） onresize(窗口尺寸改变事件)
####事件的绑定
1. 在元素内添加事件方法中的this代表的是window对象
<input id="btn" type="button" value="点我试试"
onclick="alert('试试就试试')">
2. 通过js代码添加事件（动态绑定）动态绑定时方法中的this代表事件源

/* 给按钮动态绑定点击事件 */
btn2.onclick = function(){
alert("动态绑定成功！");
}
####事件的取消
- 在事件中执行 return false;则可以取消掉当前的事件
####Event事件对象
- event对象中保存着和事件相关的信息
- 在鼠标事件中通过event可以得到鼠标的坐标 event.clientX/Y
- 在键盘事件中通过event可以得到键盘每个键的编码 event.keyCode
- 在事件中可以通过event对象得到事件源

//获取事件源
//alert(event.target.nodeName);
//获取事件源存在兼容性问题
//alert(event.srcElement.nodeName);
//通过以下写法解决兼容性问题以下写法只要有一个成功即可
var obj = event.target||event.srcElement;
alert(obj);
####事件冒泡（事件传递）
如果一个区域内有多个元素的事件响应，则响应顺序是从最底下的元素往上级元素传递，这个传递过程类似气泡从下到上，所以称为事件冒泡。
- 应用场景：如果页面中的多个元素需要添加事件，只需要在多个元素共同的祖先元素上添加事件，则多个元素都具备点击事件，通过event获取事件源来区分到底点的是哪一个
function myfn(){
var obj = event.target||event.srcElement;
if(obj.nodeName=="DIV"){
alert("点击了div")
}else if(obj.nodeName=="P"){
alert("点击了P");
}else{
alert("点击了按钮");
}
}
</script>
</head>
<body>
<div onclick="myfn()">
<p>
<input type="button" value="按钮">
</p>
</div>

第十二天：

###jQuery (jq)
是一个js代码的框架，用于简化原生JavaScript代码，可以让程序员写的更少，但做的更多，此框架本身就是通过js语言写的
####jQuery优势
1. 简化js代码
2. 可以像css一样获取元素
3. 可以直接修改元素样式
4. 解决部分兼容性问题

####jQuery引入方式
jq本身就是一个js文件，和普通的js文件的引入方式一样

####获取按钮并动态绑定事件

//jq动态绑定事件
$("#btn").click(function(){
alert("jq动态绑定成功！");
})

###选择器
###基本选择器
1. 标签名选择器选取所有div $("div")
2. id选择器选取id为abc的元素 $("#abc")
3. 类选择器选取class为c1的元素 $(".c1")
4. 分组选择器选取 h1,p,div $("h1,p,div")
5. 所有元素选择器选取所有元素 $("*")
###层级选择器
1. $("div span") 获取div下所有的span 子孙后代选择器
2. $("div>span") 获取div的span子元素子元素选择器
3. $("div+span") 获取div后面紧邻的span兄弟元素
4. $("div~span") 获取div后面所有的span兄弟元素
###层级函数
1. 获取元素的所有兄弟元素
$("#one").siblings("div") 获取id为one元素的所有div兄弟元素
2. 获取元素的哥哥元素
$("#one").prev("span") 获取id为one元素的上一个兄弟元素
3. 获取元素的哥哥们元素
$("#one").prevAll() 获取id为one元素的所有哥哥元素
4. 获取元素的弟弟元素
$("#one").next()
5. 获取元素的弟弟们元素
$("#one").nextAll()

###$介绍
- $是 jQuery的缩写 $("#one") 等效 jQuery("#one")

###课程回顾：
- 动态绑定： $("#id").click(function(){})
- 页面加载完成事件 $(function(){})
- 基础选择器
1. 标签名
2. id
3. 类
4. 分组
5. 任意元素
- 层级
1. 子孙后代 div span
2. 子元素 div>span
3. 弟弟 div+span
4. 弟弟们 div~span
- 层级函数
1. 所有兄弟 siblings("")
2. 弟弟 next()
3. 弟弟们 nextAll()
4. 哥哥 prev()
5. 哥哥们 prevAll()

###过滤选择器
1. $("div:first") 匹配所有div中的第一个元素
2. $("div:last") 匹配所有div中的最后一个
3. $("div:even") 匹配所有div中下标为偶数的div
4. $("div:odd") 匹配所有div中下标为奇数的div
5. $("div:lt(n)") 匹配div下标小于n的div
6. $("div:gt(n)") 匹配div下标大于n的div
7. $("div:eq(n)") 匹配div下标等于n的div
8. $("div:not(.one)") 匹配所有div中 class值不为one的
###内容选择器
1. $("div:has(p)") 匹配含有p标签的所有div
2. $("div:empty") 匹配所有空的div
3. $("div:parent") 匹配所有非空的div
4. $("div:contains('abc')") 匹配所有div中包含abc文本的元素
###可见选择器
1. $("div:hidden") 匹配所有隐藏的div元素
2. $("div:visible"）匹配所有可见的div元素
###jq中和显示隐藏相关的函数
//让元素隐藏
$("#abc").hide();
//让元素显示
$("#abc").show();
//让元素隐藏显示切换
$("#abc").toggle();
###属性选择器
1. $("div[id]") 匹配所有有id属性的div
2. $("div[id='xxx']") 匹配所有id属性值为xxx的div
3. $("div[id!='xxx']") 匹配所有id属性值不为xxx的div

###子元素选择器
1. $("div:nth-child(n)") 匹配所有div中是子元素并且是第n个子元素
2. $("div:first-child") 匹配所有div中是子元素并且是第一个子元素
3. $("div:last-child") 匹配所有div中是子元素并且是最后一个子元素

###表单选择器
1. $(":input") 匹配所有input 包括(文本框，密码框，按钮，单选。。。。)
2. $(":password") 匹配所有密码框
3. $(":radio") 匹配所有单选
4. $(":checkbox") 匹配所有多选
5. $(":checked") 匹配所有被选中的单选、多选、下拉选
6. $("input:checked") 匹配所有被选中的单选、多选
7. $(":selected") 匹配所有被选中的下拉选

###选择器回顾
1. 基本选择器
- 标签名
- id
- class
- 分组
- 任意元素
2. 层级选择器
- div span
- div>span
- div+span
- div~span
- 元素.siblings()
- 元素.prev()
- prevAll()
- next()
- nextAll()
3. 过滤选择器
- div:first
- div:last
- div:not(.one)
- div:eq(n) 0开始
- div:lt(n)
- div:gt(n)
- div:even
- div:odd
4. 内容选择器
- div:has(p)
- div:empty
- div:parent
- div:contains('xxx')
5. 可见选择器
- div:hidden
- div:visible
- show()
- hide()
- toggle()
6. 属性选择器
- div[id]
- div[id='xxx']
- div[id!='xxx']
7. 子元素选择器
- div:nth-child(n) n从1开始
- div:first-child
- div:last-child
8. 表单选择器
- :input
- :password
- :radio
- :checkbox
- :checked
- input:checked
- :selected
- each() 遍历

###js对象和jq对象互相转换
- js转jq

//得到js对象
var input = document.getElementById("i1");
//把js转成jq对象
// var jq = $(input);
// alert(jq.val());
alert($(input).val());
- jq转js

//得到jq对象
var jq = $("#i1");
//把jq转成js 第一种
var js1 = jq[0];
//把jq转成js 第二种
var js2 = jq.get(0);

###jq的文档操作
1. 创建元素
var jq = $("<div id='xxx'>abc</div>");
2. 添加元素
- 添加到最后面
$("body").append(元素)
- 添加到最前面
$("body").prepend(元素)
3. 插入元素
- 插入到兄弟元素的后面
兄弟元素.after(新元素);
- 插入到兄弟元素的前面
兄弟元素.before(新元素);
4. 删除元素
元素.remove();

5. 样式相关
$("#xxx").css("width","200px");
var width = $("#xxx").css("width");
//设置多个样式
$("div").css({"background-color":"yellow",
"width":"200px"});
6. 属性相关
$("#xxx").attr("属性名","属性值");//给元素添加属性
var str = $("#xxx").attr("属性名");//获取属性值

7. 文本相关 innerText
$("#xxx").text("abc");//给元素文本赋值
var str = $("#xxx").text(); //获取元素的文本内容
8. html相关 innerHTML
$("#xxx").html("<h1>xxx</h1>"); //给元素添加html内容
var str = $("#xxx").html(); //获取元素的html内容

###课程回顾：
1. $(function(){ })
2. 选择器
- 基本选择器标签名 id class 分组任意元素
- 层级选择器 div span , div>span , div+span, div~span , siblings()所有的兄弟 prev() prevAll() , next() nextAll()
- 过滤选择器 div:first div:last , div:even div:odd , div:lt(n) div:gt(n) div:eq(n) , div:not(.one)
- 内容选择器 div:has(p) div:empty div:parent div:contains('xxx')
- 可见选择器 div:hidden div:visible ， show() hide() toggle()
- 属性选择器 div[id] div[id='xxx'] div[id!='xxx']
- 子元素选择器 div:first-child div:last-child div:nth-child(n) 从1
- 表单选择器 :input :password :radio :checkbox :checked input:checked :selected
- each遍历
3. js和jq互相转换
- js转jq var jq = $(js);
- jq转js var js = jq[0]; jq.get(0);
4. 创建元素 var div = $("<div></div>");
5. 添加 $("body").append(xxx)最后面 $("body").prepend(xxx)最前面
6. 插入兄弟元素.after(xxx) 兄弟元素.before(xxx)
7. 删除元素.remove()
8. 样式元素.css("样式名称","值") 元素.css("样式名称") 元素.css({"样式名称":"值","样式名称":"值"})
9. 属性元素.attr("属性名","值") 元素.attr("属性名")
10. 文本元素.text("xxx") 元素.text()
11. html 元素.html("<xx></xx>") 元素.html()

第十三天：

###课程回顾
1. $(function(){ })
2. $("#abc").click(function(){})
3. 选择器
- 基础选择器标签名 id class 分组，任意元素
- 层级选择器 div span ,div>span, div+span,div~span ,siblings(),prev(),prevAll(),next(),nextAll()
- 过滤选择器 div:first div:last , div:even div:odd, div:lt(n) div:gt(n) div:eq(n) ,div:not(.one)
- 内容选择器 div:has(p) div:empty div:parent div:contains('xxx')
- 可见选择器 div:hidden div:visible , show() hide() toggle()
- 属性选择器 div[id] div[id='xxx'] div[id!='xxx']
- 子元素选择器 div:nth-child(n) div:first-child div:last-child
- 表单选择器 :input :password :radio :checkbox :checked input:checked :selected
4. js对象和jq对象互相转换
- js转jq var jq = $(js)
- jq转js var js = jq[0] jq.get(0)
5. 创建元素对象 var xxx = $("<div></div>")
6. 添加元素父元素.append(xxx)最后面父元素.prepend(xxx)最前面
7. 插入元素兄弟元素.after(xxx) 兄弟元素.before(xxx)
8. 删除元素元素.remove()
9. 样式 xxx.css("color","red") .css({"":"","":""})
10. 属性 xxx.attr("id","xxx")
11. 文本 xxx.text("xxxx")
12. html xxx.html("<h1>xxx</h1>")

实现步骤：
1. 导入jq框架并创建一个新的script标签写代码
2. 在页面加载完成事件里面给按钮动态绑定点击事件
3. 在点击事件里面创建三个td td的内容为三个文本框里面的内容，再创建一个tr，把三个td添加到tr里面
4. 把创建好的tr添加到table里面，搞定!

###事件模拟

//模拟按钮的点击事件
$("input").trigger("click");

###hover()
- 格式 hover(fn1,fn2); 等效 onmouseover+onmouseout

//给所有div 添加移入移出事件
$("div").hover(function(){
$(this).css("color","blue");
},function(){
$(this).css("color","red");
})

###动画

if($(this).val()=="隐藏"){
$("img").hide(3000);
}else if($(this).val()=="显示"){
$("img").show(2000,function(){
$("img").hide(2000,function(){
$("img").show(1000);
});
});
}else if($(this).val()=="上滑"){
$("img").slideUp(3000);
}else if($(this).val()=="下滑"){
$("img").slideDown(3000);
}else if($(this).val()=="淡出"){
$("img").fadeOut(3000);
}else if($(this).val()=="淡入"){
$("img").fadeIn(3000);
}else{
$("img").animate({"left":"250px"},1000)
.animate({"top":"250px"},1000)
.animate({"left":"0"},1000)
.animate({"top":"0"},1000)
.animate({"width":"400px","height":"300px"},1000)
.animate({"width":"200px","height":"150px"},1000);
}

###下雪练习