Web开发学习笔记(日更)
1、h1 h2 h3 ... h6 对应六个标题
2、开头加<!DOCTYPE html> 是html 5 的定义
3、所有内容都在<html> 内， 里面有head和body
4、<p> 定义段落，在文字后加东西，就是加在后面，而对段落加东西会另起一行, 换行的东西跟前面有行间距
5、超链接，用a标签，里面href参数=地址，中间的内容是带上这个超链接的
6、<img> 里面放参数src是地址
7、<br\>换行无间距，而段落的换行有间距
8、属性以键值对的方式出现，比如
<a>的href:标签获得超链接
的target：规定在何处打开链接
_blank 在新的页面打开网页
_self 覆盖当前页面
<h1>的align对齐方式
right
left
center
<body>的bgcolor背景颜色
通用：
class：规定元素类名
id：规定元素唯一ID
style：规定元素样式
type = text/css 引入css样式
title：规定元素额外信息
放在head里，文字就是网页标题
9、格式化
定义***的字
b 粗体文本
big 大号字
em 着重字体
i 斜体
small 小号字
strong 加重语气
sub 下标字
sup 上标字
ins 插入字（有下划线）
del 删除字（有删除线）
10、HTML样式
标签
<style> 样式定义
<link> 资源引用
属性
rel = "stylesheet": 外部样式表
type = "text/css": 引入文档的类型
margin-left: 边距
样式插入方法
1、外部样式表
<link rel = "stylesheet" type = "text/css" href = "mystyle.css"> 自己写一个文件mystyle.css
2、内部样式表
<style type = "text/css">
body {
background-color: red
},
p {
margin-left: 20px
}
</style> 对...标签加入...样式
3、内联样式表
<p style = "color":red> 只修改当前的，原地修改
11、html链接
1、链接数据
文本链接
图片链接
2、属性
href属性 指向另一个文档的链接 标签里的所有东西包括图片都会获得超链接
name属性 创建文档内的链接 当前页面内的链接
<a name = "fuck"> abc </a>
<a href = "#fuck"> 跳转到fuck </a>
点击跳转到fuck，我们就会跳转到abc所在的位置，（某些网站回到顶部同理）
3、img标签属性
alt 替换文本属性 (比如我打错了一个图片的名字，就会显示不出来那个图片，相应位置会出现alt设置的内容）
width 宽 px(像素)
height 高 px
12、html表格
<table> 定义表格
border = 1 定义边框厚度
cellpadding = 10 每个单元格放大多少
cellspacing = 10 相邻单元格的间距（不改变单元格本身大小）
background = 颜色/图片文件
<caption> 定义表格的标题
<th> 定义表格的表头
<tr>
<th>222</th>
<th>222</th>
<th>222</th>
</tr>
<tr> 定义表格的行
<td> 定义表格的单元
空单元格：里面不写内容
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
<ul> 表格内的列表
里面的每一项通过<li>来定义
EX
<tr>
<td>
<ul>
<li>pg</li>
<li>pc</li>
<li>cg</li>
</ul>
</td>
</tr>
EX
<table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
<td>单元格1-3</td>
</tr>
<tr>
<td>单元格2-1</td>
<td>单元格2-2</td>
<td>单元格2-3</td>
</tr>
</table>
13、html列表
<ol> 有序列表，列表标着123
<ul> 无序列表，每行前面是一个点
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述
1.无序列表
标签 <ul> <li>
属性 type = "disc" / "circle" / "square" 前面小圆点的样式
2.有序列表
标签 <ol> <li>
属性 A a L l start
前面数字的样式
A --> ABCD
a --> abcd
I --> I II III IV
i --> i ii iii iv
start 从几开始
3.嵌套列表
标签 <ul> <ol> <li>
无序列表嵌套：
<ul>
<li>人类</li>
<ul>
<li>中国人</li>
<li>英国人</li>
</ul>
</ul>
4.自定义列表
标签 <dl> <dt> <dd>
dl 等价于ul ol，不过没有前面的数字或点点
dt 为dl里的每一个列表项
dd 为dt的一个描述，在dt的下面会+tab显示出来
<dl>
<dt>helloworld</dt>
<dd>abc</dd>
<dt>helloworld</dt>
<dd>abc</dd>
<dt>helloworld</dt>
<dd>abc</dd>
</dl>
效果：
helloworld
abc
helloworld
abc
helloworld
abc
14、html块
1.html块元素
块元素在显示时，通常会以新行开始
ex: <h1> <p> <ul>
2.html内联元素
内联元素通常不会以新行开始
ex: <b> <a> <img>
3.html<div>元素
<div>元素也被称为块元素，其主要是组合html元素的容器
正常情况加不加没啥区别，主要与css结合
需要定义一个id属性，从而在css里编辑
PS: 用CSS需要在head里引入
<link rel="stylesheet" type="text/css" href="ls.css">
CSS样式书写时
#加id名加大括号
如果id名后加p，那么html里只会对p标签产生影响
4.html<span>元素
<span>元素是内联元素，可作为文本的容器
在head里也可以自定义样式
<style type = "text/css">
span{
}
</style>
15、html布局
见代码1.html
16、html表单
1.表单
获取不同类型的用户输入
<form> 表单
所有的表单类型都套在里面
<input> 输入域
<form>
用户名:
<input type="text">
<br/>
密码:
<input type="password">
<br/>
你喜欢的水果有?(多选，checkbox是复选框)
<br/>
苹果<input type="checkbox">
西红柿<input type="checkbox">
香蕉<input type="checkbox">
<br/>
请选择您的性别?(单选)
<br/>
男<input type="radio" name="sex">
女<input type="radio" name="sex">
(radio是单选框，加name的目的是相同name的是一组)
<input type = "button" value = "按钮">
<input type = "submit" value = "确定">
(两种类型的按钮)
</form>
<textarea> 文本域
可以独立于form之外
<textarea cols = "30" rows = "30">填写个人信息</textarea>
(cols和rows分别设置框内文字几列几行，框内初始内容为填写个人信息)
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<form>
请选择你的城市
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>陕西</option>
</select>
</form>
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 按钮
17、html框架(套娃: 页面的嵌套，可以将一个页面缩小植入当前页面里成为独立页面)
1.框架标签frame
2.框架集标签framset
定义如何将窗口分割为框架
每一个frameset定义一系列行or列
rows 和 cols规定了每行或每列占据屏幕的面积
EX: 写三个html，在body定义颜色
<frameset cols = "20%, 50%, 30%">
<frame src = "1.html></frame>
<frame src = "2.html></frame>
<frame src = "3.html></frame>
</frameset>
3.常用标签
noresize 固定框架大小
4.内联框架
iframe(没过时)
EX:
<iframe src = "1.html" frameborder = "0" width = "400px" height = "400px">
(可以自己设定大小，并且可以通过frameborder调整当前frame的边框厚度)
</iframe>
如果A包含B, B包含C, C包含D
D内超链接target = _self 在D中打开网页
_parent 在C中打开网页
_blank 空白页打开
(前两个已经out)
18、html背景
1.背景标签
background = "***.jpg"
2.背景颜色
bgcolor = "#66ccff"
3.颜色
十六进制颜色码
19、html实体
1.实体
< > & 等等无法直接展示
有专门的代码代替-->实体
< <
> >
等等
链接:https://baike.baidu.com/item/HTML%E5%AE%9E%E4%BD%93/9172201?fr=aladdin
20、html5新增元素
section 内容块，可与h1...h6结合使用 (有标题的独立文章)
article 与上下文不相关的独立内容，ex博客的一篇文章
<!DOCTYPE html>
<html>
<head>
<title>Article Introduction</title>
</head>
<body>
<article>
<header>
<h1>olinr的博客</h1>
<p>欢迎光临</p>
</header>
<article>
<header>作者</header>
<p>评论</p>
<footer>time</footer>
</article>
<footer>
<p>底部</p>
</footer>
</article>
</body>
</html>
aside 与article相关的，辅助信息
header 通常表示标题
hgroup 对整个页面的内容块的标题进行结合
footer 通常承载作者姓名，日期etc
nav 页面中导航链接的部分
传统导航条
侧边栏导航
页内导航
翻页操作
figure 一段独立的内容，一般表示主体 内容的一个独立单元
video 定义视频元素
audio 定义音频元素
canvas 提供画布
input元素类型
email url number range DatePickers
21、html5新增全局属性
全局属性： 所有标签都能用
contentEditable 允许用户编辑元素中的内容，(必须是可以获得鼠标焦点的元素)，点击后有插入符号, true false
designMode 整个页面是否可编辑(只要是能获得鼠标焦点的元素)，都能编辑or不能编辑 on off
hidden 所有元素都能用，使浏览器无法渲染该元素，使其处于不可见状态，但是元素中的内容还是浏览器创建的，可以使用js脚本取消该状态，是bool类型 true and false
spellcheck 用户输入的拼写检查 true or false
tabindex =n 即在页面中，按n次tab才能将焦点锁定到这个元素上 =-1 不能获取到焦点
22、一些属性
required = "required" 用户输入内容不能是空白
<label for = "123"> 是给id为123的元素的标签
maxlength 可以规定input位数
datalist 有下拉框，也支持自己输入，见3.html
<form action = "file.html"> 表单内的submit可以打开本地网页
<input type = "checkbox" indeterminate> 复选框可以有第三个选选项（不确定是否选择）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>布局</title> 6 <style type="text/css"> 7 body { 8 margin: 0px; 9 /* 页边距为0 */ 10 } 11 #container { 12 width: 100%; 13 height: 950px; 14 background-color: darkgray; 15 /* 宽*高的部分都为container的范围，并设置了背景颜色 */ 16 } 17 #heading { 18 width: 100%; 19 height: 10%; 20 background-color: aqua; 21 } 22 #content_menu { 23 width: 30%; 24 height: 80%; 25 background-color: aquamarine; 26 float: left; 27 /* 定义可以从左往右排的方式，相同类型的如果能放一排就一排了（从左往右） */ 28 } 29 #content_body { 30 width: 70%; 31 height: 80%; 32 background-color: blueviolet; 33 float: left; 34 } 35 div#footing { 36 width: 100%; 37 height: 10%; 38 background-color: black; 39 clear: both; 40 } 41 42 </style> 43 </head> 44 <body> 45 <div id="container"> 46 <div id="heading">头部</div> 47 <div id="content_menu">内容菜单</div> 48 <div id="content_body">内容主体</div> 49 <div id="footing">底部</div> 50 </div> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta type="UTF-8"> 4 <head> 5 <title>table布局</title> 6 </head> 7 <body marginheight="0px" marginwidth="0px"> <!--上下/左右页边距--> 8 <table width="100%" height="950px" style="background-color: darkgray"> 9 <tr> 10 <td colspan="3" width="100%" height="10%" style="background-color: aqua;"> 11 <!--colspan向右合并几个单元格--> 12 这是头部 13 </td> 14 </tr> 15 <tr> 16 <td width="20%" height="80%" style="background-color: blue;"> 17 <ul> 18 <li>ios</li> 19 <li>android</li> 20 <li>html5</li> 21 </ul> 22 </td> 23 <td width="60%" height="80%" style="background-color: blueviolet;">内容主体</td> 24 <td width="20%" height="80%" style="background-color: deeppink;">右菜单</td> 25 </tr> 26 <tr> 27 <td width="100%" height="10%" colspan="3" style="background-color: darkcyan;"> 28 这是底部 29 </td> 30 </tr> 31 </table> 32 </body> 33 34 </html>
1 <!DOCTYPE html> 2 <html lang = "en"> 3 <head> 4 <meta charset = "UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form> 9 <input type = "text" list = "abcd"> 10 <datalist id = "abcd" style = "display: none;"> 11 <option value = "124"></option> 12 <option value = "455"></option> 13 <option value = "789"></option> 14 <option value = "456"></option> 15 </datalist> 16 </form> 17 </body> 18 </html>
CSS
1、语法
元素, 元素, 元素, 元素 {
属性: 值;
属性: 值;
属性: 值;
属性: 值;
}
若值的单词大于1个（有空格）要加引号
可以有多个样式，选择最里面的（优先级）
比如<body><p></p></body> 若p有样式，则用p的，否则用body的
2、一些设置
font-size: 50px 设置字体大小
3、CSS派生选择器
通过依据元素在其位置的上下文关系来定义样式
格式
元素1 元素2（注意是空格分隔, 可以有更多的元素）{
样式
}
意为元素1里的元素2会采用此样式，没有元素1套着的元素2不会采用此样式
如果单独定义了元素2，又定义了元素1下的元素2，那么谁更具体显示谁，即满足嵌套关系就用嵌套关系的样式
4、CSSid选择器
为标了id的元素进行指定的定义样式
id选择器以#定义
# + id名称 {
样式
}
对带有特定id的元素定义样式，也可以使用派生选择器
5、类选择器
类似id选择器
除了定义不同.+class名
其它一样
PS: id每个元素唯一，class可以多个元素用一个
6、属性选择器
[属性] {
样式
}
具有这个属性的标签获得此样式
7、属性和值选择器
[属性=值] {
样式
}
只有具有这个属性，并且该属性的值一样的标签才获得此样式
8、CSS背景
background-attachment 背景图片是否固定或随着页面的其余部分滚动
fixed 不跟随滚动而滚动，无论怎么滚动，在屏幕位置固定
不加这个 默认跟随滚动
background-size 图片尺寸 大小裁剪
100px 100px 100*100
background-origin 规定背景图片定位区域
background-clip 规定背景绘制区域
background-color 设置背景颜色
background-image 设置背景图片 url("")
background-position 设置背景图片的起始位置
right top
在元素的右面，从上面开始显示
100px 100px 距上100 距左100 这点为图的左上角，开始显示(更方便)
background-repeat 设置当前背景图片是否允许重复
repeat
repeat-x 横向重复
repeat-x 纵向重复
no-repeat 不重复
9、一些常用属性
padding 设置内边距
padding-left 左边距
padding-top 上边距
padding-bottom 下边距
padding-right 右边距
width 设置宽
height 设置高
10、CSS文本
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
left 左对齐
center 居中
right 右对齐
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行 从当前位置向右移动 nem n可以是负数
text-transform 元素中的字母
capitalize 每个单词首字母变大写
lowercase 所有字母变小写
uppercase 所有字母变大写
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
text-shadow 向文本添加阴影 apx bpx cpx #66ccff
阴影在本体右边apx，下边bpx，清晰度cpx， 颜色#66ccff
word-rap 规定文本换行规则
normal 自动换行（单词不会拆开（拐弯））
11、CSS字体
font-family 设置字体系列
引入新字体，在CSS里
@font-face {
font-family: myfont;
src: url()
}
font-size 设置字体尺寸
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示文本
font-weight 设置字体的粗细
12、CSS链接
四种状态
a:link 普通的，未被访问的链接
text-decoration = none 取消链接的下划线（全部）
设置背景颜色后，依然一直存在
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接上方
a:active 链接被点击的时刻
设置方式
a:link {
样式
}
13、CSS列表
list-style 简写列表项
list-style-image 列表项图像(文字前的（本来是数字或小圆点）标识)
url()
list-style-position 列表标志位置（不太明显）
inside 比较靠里
outside 比较靠外
list-style-type 列表类型
14、CSS表格
border: apx solid #66ccff 边框距apx， 设置边框颜色
border-collapse: collapse 合并边框，双边框-->单边框
width 表格宽
height 表格高
text-align 设置对其方式
15、CSS轮廓
outline 设置轮廓属性
outline-color 设置轮廓颜色
outline-style 设置轮廓样式
groove 大粗线
double 双细线
dotted 虚线
outline-width 设置轮廓宽度(厚度)
16、CSS定位-定位
改变元素在页面上的位置
普通流: 元素按照其在HTML中的位置顺序决定排布的过程
CSS定位属性:
position 把元素放在一个静态的、相对的、绝对的、或固定的位置中
static 偏移量没用了 固定在那作为静态的了 z-index也没用，永远在最下层
relative 占用位置
absolute 定在那里，不占空间，位置绝对固定
fixed 定在屏幕的那里，不占空间，位置相对于屏幕固定
top 元素向下的偏移量(！！注意方向！！)
lift 元素向右的偏移量
right 元素向左的偏移量
bottom 元素向上的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素垂直对齐方式
z-index 设置元素堆叠顺序 值谁大，谁呈现在前面
17、CSS定位-浮动
float 浮动
left 向左浮动
right 向右浮动
none 不浮动
inherit 从父级继承浮动属性
clear 去掉浮动属性(包括继承来的属性)
left 去掉向左浮动
right 去掉向右浮动
both 左右两侧均去掉浮动
inherit 从父级继承来的clear属性
四个方向的边距
margin-left
margin-right
margin-bottom
margin-top
margin: apx bpx 上下a， 左右b， 可以写auto，为自适应 EX: margin: apx auto;
18、CSS盒子模型
概述
content 内容
padding 内边距
margin 外边距
border 边框
height 内容的高
width 内容的宽
内边距
padding 各个方向内边距
padding-四个方向 某方向边距
边框
border-style 边框样式（四个边一样的）
border-方向-style 可以定义四个边不同的样式
border-width 边框厚度
border-方向-width 可以定义四个边不同的厚度
border-color 边框颜色
border-方向-color 可以定义四个边不同的颜色
border-radius 圆角边框：apx （圆角半径）
border-shadow 添加阴影 apx bpx cpx #66ccff
阴影在本体右边apx，下边bpx，清晰度cpx， 颜色#66ccff
外边距
margin 设置所有边距（四个边的）
margin-方向 四个方向不同的外边距
外边距自动叠加合并，比如上面的下外边距100px，下面的上外边距200px，则相距200px
19、CSS常用操作
对齐
margin进行水平对齐
margin-left: auto;
margin-right: auto;
position进行左右对齐
position: absolute
left: 0px;
或者right: 0px; 进行左右对齐
float进行左右对齐
float: left / right;
尺寸
height
width
line-height 设置行高 normal为正常，可以写数字，百分数（normal的百分之多少）（注意不是字体高度，对行间距有影响）
max-height 在内容充足的情况下，最大高度
min-height 在内容充足的情况下，最小高度
max-width 在内容充足的情况下，最大宽度
min-width 在内容充足的情况下，最小宽度
分类
clear 设置一个元素的侧面是否允许其它的浮动元素
cursor 规定当指向某元素之上时显示的指针类型 改变指向他时的鼠标形状
auto 就是普通的（自动）
cell 十字
alias 反箭头
display 设置是否及如何显示元素
inline 元素在一行显示（导航栏）
float 定义元素在哪个方向浮动
position 把元素放在一个静态的、相对的、绝对的、或固定的位置中
visbility 设置该元素是否可见
导航栏
display: block;
垂直or水平
每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
图片
opacity 透明度
20、CSS选择器
元素选择器
为元素加上CSS样式
选择器分组
元素1，元素2，元素3 {
}
通配符， 为所有东西安上样式
* {
}
类选择器
.class {
}
结合元素使用
p的class样式
p.class {
}
id选择器
#id {
}
一个id只能使用一次，而class没这限制
id选择器不能结合使用（反正就一个id，也不需要结合）
属性选择器
[属性] {
}
[title] {
}
还可以具体点
[属性=值] {
}
必须完全匹配才能使用这样的样式
[属性~=值] {
}
只要当前值里含有这个值就行，比如
[title ~= "title"] {
}
那么<p title = "title abcd"> 可以用
后代选择器
p a ul li {
}
p 里的 a 里的 ul 里的 li获得此样式
子元素选择器
与后代选择器的区别:
1.元素直接用>分开而不是空格
2.相邻的元素必须是父子关系，不能隔代
相邻兄弟选择器
a+b {
}
b接在a后面，且ab具有相同的父亲，那么b获得此样式
EX
<ul>
<li></li>
<li></li>
<li></li>
</ul>
li+li {
}
第二个和第三个li获得此样式
21、CSS动画
2D、3D转换
2D方法
translate(向右多少px，向下多少px)
rotate(顺时针转多少deg)
scale(宽度放大多少倍，高度放大多少倍)
skew(绕x轴转多少deg，绕y轴转多少deg)
matrix(a, b, c, d, e, f)
a c e 当前x ax+cy+e 实现坐标的变换
b d f * 当前y = bx+dy+f
0 0 1 1 1
例如matrix(1, 0, 0, 1, 100, 100) 等价于translate(100px, 100px)
3D方法
rotateX(绕x轴转多少deg)
rotateY(绕y轴转多少deg)
兼容问题
transform: translate(200px, 200px); /*safari chrome*/
-ms-transform: translate(200px, 200px); /*IE*/
-o-transform: translate(200px, 200px); /* Opera */
-moz-transform: translate(200px, 200px); /*Firefox*/
过渡
动画效果的CSS
动画执行的时间
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间
transition:属性1 改变用时几s, 属性2 改变用时几s;
例
div {
width: 100px;
height: 100px;
transition: width 2s, height 2s, transform 2s;
transition-delay: 2s; 加上此行，则鼠标移到div上，两秒后开始变换
}
div:hover {
width: 200px;
height: 200px;
transform:rotate(360deg)
}
动画，遵循@keyframes规则
规定动画的名称
规定动画的时长
定义动画
animation: 动画名 动画执行总时间;
动画无限循环，在上面的定义最后面加上infinite
animation: 动画名 动画执行总时间
对动画的配置(百分之几可以自己修改）
@keyframes 动画名称{
0%{
改变的东西（到这个进度的物体的状态）
}
10% {
}
.
.
.
100% {
}
}
多列
创建多列来对文本或区域进行布局
column-count: 分成几列
column-gap: 每一列中间间隔距离为多少px
column-rule: 间隔线厚多少px outset 间隔线的颜色
<hr/> 分割线
JS
1、简介
用法:
HTML中的脚本必须位于script标签之间
一般被放到head里面
不限制脚本数量
js文件中不需要标签，引入方法
<script src = "myjs.js"></script>
some 操作
document.write(); 输出
alert(对话框显示的内容); 弹出对话框
里面可以输出带标签的
document.write("<h1>hello</h1>")
document.getElementById(id) 通过id获得元素
元素.innerHTML 获取一对标签内的值，可以通过赋值修改标签内的值
元素.value 可以获取input的值
2、语法
向浏览器发出命令，告诉浏览器做什么
语句之间用;分隔
按照顺序执行
标识符:
必须以字母、下划线或$开始
大小写敏感
3、注释
//
/* */
4、变量
var i = 。。。
定义变量i等于。。。
5、数据类型
String
Number
Boolean
Array
var a = [1, 2, 3, 4];
或者
var a = new Array(1, 2, 3, 4);
document.write(a[2]);
or
var a = Array();
a[3] = 1;
此时只有a[3]被定义且有值，其它没有(动态)
Object
null
未定义(undefined)
赋值为null清除变量
6、运算符
算数运算符
+ - * / % ++ --
赋值运算符
= += %= -= /= *=
字符串操作
a+b 字符串拼接
任何类型与字符串相加都会被转换为字符串类型
比较运算符
== === != !== > < >= <=
10 == "10" is true!!!
10 === "10" is false!!!
=== 必须保证类型也相同
逻辑运算符
&& || !
条件运算符
x < 10? "x比10小" : "x比10大"
7、条件语句
if(条件) {
}
switch(变量) {
case 值:
}
8、循环语句
while(条件) {
}
for(var i = 1; i <= n; i++) {
}
do {
}while(条件)
9、跳转语句
continue
break
10、函数
定义
function 函数名(参数，参数) {
}
调用
在script里直接调用
button类型调用
<input type = "button" value = "按钮" onclick = "函数名()">
或者
<button onclick = "函数名()">按钮</button>
点击按钮执行函数
11、异常捕获
try {
问题代码块
throw "123"
//执行throw时，直接跳转catch，并且弹出的信息是123
} catch(err) {
alert(err);
}
如果出现问题，就会弹出含有错误信息的报错对话框
12、事件
可以被JavaScript侦测到的行为
onclick 单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移出事件
onchange 文本内容改变事件
onselect 文边框选中事件
onfocus 光标聚集事件
onblur 移开光标事件
onload 网页加载事件
onunload 网页关闭事件
写在标签里+js
<button onclick = "abc()"></button>
13、DOM操作HTML
js能改变页面中所有的HTML元素
js能改变页面中所有的HTML属性
js能改变页面中所有的CSS 样式
js能够对页面中所有的事件作出反应
1.改变HTML输出流
document.write()
注：在文档加载完成之后再执行会覆盖掉原文档
2.寻找元素
通过id寻找
getElementById
通过标签寻找
getElementsByTagName
返回一个数组，按顺序对应所有的标签
3.改变HTML内容
使用属性: innerHTML
4.改变HTML属性
使用属性: attribute
元素.属性 = 新的值
14、DOM操作CSS
1、通过DOM对象改变CSS
document.getElementById(id).style.具体的样式属性 = 值;
15、EventListener
方法:
addEventListener(类型，函数); 方法用于向指定元素添加事件句柄
removeEventListener(类型，函数); 移出方法添加的事件句柄
16、事件流
事件冒泡
事件由内而外不断向父亲传播
比如div里有个button，div和button都定义了点击事件，那么点击button，先触发button的事件，再触发div的事件
事件捕获
由外到内更精确的捕获接收
17、事件处理
HTML事件处理
直接添加到HTML结构中
DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
在script里写
btn = getElementById("btn")
btn.onclick = function() ...
在里面搞属性
DOM2级事件处理
addEventListener(事件名， 事件处理函数， true/false 事件捕获/事件冒泡)
removeEventListener()
IE事件处理程序
attachEvent
detachEvent
18、事件对象
在出发DOM事件的时候都会产生一个事件对象
type 获取事件类型
target 获取事件目标
stopPropagation() 阻止事件冒泡
preventDefault() 阻止事件默认行为
比如可以阻止a标签的跳转行为
函数中定一个event参数，即可通过event.type实现这些
19、JS内置对象
var now = Object()
可以直接定义
now.abc = 1;
直接定义now的成员
或者以字典形式定义
now = {abc : 1}
自定义对象：
1 定义并创建对象实例
2 使用函数来定义对象，然后创建新的对象实例（构造函数)
function people(name, age) {
this._name = name;
this._age = age;
}
now = new people("hhh", 11);
字符串对象
String对象用于处理已有的字符串
字符串可以使用单引号or双引号
.length 返回长度
.indexOf(串) 串第一次出现的位置，没有，-1
.match(串) 有就返回这个串，否则返回null
.replace(串1, 串2) 串1替换为串2
.toUpperCase() 全变为大写
.toLowerCase() 全变为小写
.split(符号) 以符号位界，将字符串分割为几个部分，存在数组里
Date日期对象
now = new Date()
直接输出 获得精确时间
.getTime() 获得从1970年到现在的毫秒数，一个时间戳
.getFullYear() 获得年份
.setFullYear() 设置日期
.getDay() 获取日期
setTimeout(function(), 毫秒); 隔多少毫秒执行一次
放一个函数里套娃，可以实现这个函数每隔多少秒执行一次
Array数组对象
数组1.concat(数组2) 返回两个数组的合并 1 后面连着 2
.sort() 排序
顺序
sort(function(a, b) {
a-b; //a 到 b
})
.push() 在末尾加入元素
.reverse() 倒转
Math对象
Math.
round() 四舍五入
random() 返回0-1之间的随机数
max() 返回最大值
min() 返回最小值
abs() 返回绝对值
parseInt() 将里面的数转为int
20、DOM对象控制HTML元素
getElementsByName() 通过name获取元素
getElementsByTagName() 通过标签获取元素
getAttribute(属性) 获取元素属性的值
setAttribute(属性，值) 设置元素属性
childNodes 获得子节点
parentNode() 获得父节点
createElement() 创建元素节点
var body = document.body;
var input = document.createElement("input")
input.type = "button"
input.value = "按钮"
body.addChild(input)
createTextNode() 创建文本节点
insertBefore(新节点，在此前插入) 插入节点
removeChild() 删除节点
offsetHeight/Width 获得网页尺寸（不包含滚动条）
scrollHeight/Width 获得网页尺寸（包含滚动条）
节点 .noneType 获得其内容
.nodeName 返回节点的标签名字
21、JS浏览器对象
window对象
全局变量是window的属性
全局函数是window的方法
window.可省略
window.innerHeight 浏览器窗口内部高度
.innerWidth 浏览器窗口内部宽度
.open(页面，页面名字，窗口大小("height = ..., width = ..., top = ...")) 打开新窗口(窗口大小，距上距左等等)
.close() 关闭新窗口
计时器
计时方法
1.setInterval() 间隔指定毫秒数不停的执行指定的代码
clearInterval() 停止上面的函数
2.setTimeout() 暂停指定毫秒数后执行指定代码
clearTimeout() 停止上面的函数
history
.back() 与在浏览器点击后退按钮相同
.forward() 与在浏览器点击向前按钮相同
.go() 进入历史中的某个页面 +2 向前两次 -2 向后两次
Location
.hostname 返回web主机的域名
.pathname 返回当前页面的路径和文件名
.port 返回web主机的端口
.protocol 返回所使用的web协议
.href 返回当前页面url
.assign() 方法加载新的文档 当前页面变为括号里的页面（当连接用可以）
screen
.availWidth 可用的屏幕宽度
.availHeight 可用的屏幕高度
.Height 屏幕高度
.Width 屏幕宽度
