css3 和 html5 笔记
1.css3 ie下大部分不兼容 ie9以下
浏览器低版本不兼容 需要写
-webket-transition:1s
-moz-transition: 1s
-o-transition:1s
transition:1s
这些
2.Css3 选择器 --属性选择器(1)
E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
实例：百度文库;
备注：IE7及以上支持;
p{boder:1px solid black}
p[mname]{background:red}
p[mname=alex]{background:blue}
p[mname~=handsome]{font-size:30px;color:#fff} /* ~ 属性值中有词列表(不止一个属性值),其中包含有 handsome的那个元素 */
p[mname^=f]{background:pink} /*属性值中指定f开头的*/
p[mname$=zm]{ background:#cc0 } /*mname$=m] 属性值中指定m结束的*/
p[mname*=e]{ background:#800080 }/*[mname*=e] 属性值中包含e的*/
p[mname|=b]{background:#2272BD} /*[mname|=b] 指定的value值b- 开始的 或者 纯粹的value值 b */
3.Css3 选择器 –结构性伪类
E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red} /*可以计算 2n 2n-1等等*/
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点:空标签
p:nth-child(2){ background:red } /*找到p标签父级下的第2个子节点,并且这个子节点还得是p标签*/
p:nth-child(odd){ background:blue } /*找到p标签父级下的第奇数个子节点,并且这个子节点还是p标签*/
p:nth-child(even){ background:orange } /*找到p标签父级下的第偶数个子节点,并且这个子节点还是p标签*/
div *:nth-child(1){ background:yellow } /*找到div下的第一个子元素,不管它是什么标签*/
p:nth-last-child(1){background:#000000;color:#fff} /*找到p父级下的 倒数第1个子元素,并且这个元素是p*/
p:nth-of-type(1){background:#006666}/*找到p父级下的 第1个p标签*/
p:nth-last-of-type(1){background:#DE4465}/*找到p父级下的 倒数第1个p标签*/
div *:nth-of-type(1){background:#00CCFF} /*找到div下的所有类型标签,每个类型的第一个元素*/
E:first-child 表示E元素中的第一个子节点 相当于 E:nth-child(1)
E:last-child 表示E元素中的最后一个子节点 相当于 E:nth-last-child(1)
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的,父级下的第一个E类型的标签 相当于 E:nth-of-type(1)
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 ,父级下的倒数第一个E类型的标签 相当于 E:nth-last-of-type(1)
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点 /*父元素中只有一个子节点,并且该节点就是e元素类型*/
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点 /*所有在父元素中只出现一次的e元素*/
结构伪类(Structural pseudo-classes)
E:only-child
匹配那些是其父元素唯一孩子的 E 元素。
p1, 子元素1：em
p2, 子元素1：em，子元素2：strong
p3, 子元素1：strong
E:only-of-type
根据 E 的类型，匹配那些在其兄弟里是唯一此类元素的 E 元素。
p1, 子元素1：em
p2, 子元素1：em，子元素2：strong
p3, 子元素1：em，子元素2：em，子元素3：strong
E:empty
匹配没有子元素的E元素。
实例：新浪头部导航
4.伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性
p{width:300px;padding:10px;border:1px solid black;margin:40px auto;font:13px/25px microsoft yahei}
p:first-line{background:red}
p:first-letter{font-size:40px}
p::selection{background:#008000;color:#fff}
p:before{content: "Alice"; color:orange}
p:not(.paichu){ background:#CCCCFF }
5.新增颜色模式
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1
实例: 背景透明，文字不透明
6.文字阴影
text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡
文字阴影应用
最简单用法
text-shadow:2px 2px 4px black
阴影叠加,逗号隔开
text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的
几个好玩的例子
层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
-webkit-text-stroke:宽度 颜色 只有webkit浏览器支持
7.新增文本功能
Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左向右排列
注意要配合unicode-bidi 一块使用 unicode-bidi:bidi-override;
Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
8.自定义字体
9.弹性盒模型:只支持webkit内核的浏览器
父级：display:-webkit-box 或者 display:-webkit-inline-box 属性值前-webkit
Box-orient 定义盒模型的布局方向:属性前加-webkit
Horizontal 水平显示
vertical 垂直方向 默认垂直
box-direction 元素排列顺序:属性前加-webkit
Normal 正序 默认正序
Reverse 反序
box-ordinal-group 设置元素的具体位置：属性前加-webkit
10.Box-flex 定义盒子的弹性空间 分份
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
11.box-pack 对盒子富裕的空间进行管理
Start 所有子元素在盒子左侧显示，富裕空间在右侧
End 所有子元素在盒子右侧显示，富裕空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
12.box-align 在垂直方向上对元素的位置进行管理,类似text-align
Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中
13.box-shadow:[inset] x y blur [spread] color
参数
inset：投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影
color
14.box-reflect 倒影
direction 方向 above|below|left|right;
距离
渐变（可选）
15.resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
16.box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
17.column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
18.Css3响应式布局
媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
关键字
and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型
媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
样式引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
@import url("css/reset.css") screen;
@media screen{
选择器{
属性：属性值；
}
}
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">
<meta name="viewport" content="" />
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
19.border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样
border-radius: 10px/5px; border-radius:value1 / value2 :value1指的是x轴的半径,value2指的是y轴的半径,配合盒子尺寸
每个角都有x轴半径和Y轴半径 /之前的是x轴的,/之后是y轴的 border-radius: 10px 20px 30px 40px/10px 20px 30px 40px
参数
各种长度单位都可以：px，%，…
%有时很方便
但宽高不一致时不太好
20.边框：只支持webkit内核浏览器
边框图片 border-image
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式
round 平铺,repeat 重复,stretch拉伸
边框颜色 border-colors
21.线性渐变
线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上
IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
参数
起点：从什么方向开始渐变 默认：top
left、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
black 50%，位置可选
线性渐变实例
最简单
red, green
从上到下
起点位置
left top, red, green
30deg, red, green
逆时针
repeating-linear-gradient
22.线性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px
配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
实例：百度音乐图片光影效果
23.径向渐变
radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字
24.多背景
多背景
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
background-origin ： border | padding | content
border-box： 从border区域开始显示背景。
padding-box： 从padding区域开始显示背景。
content-box： 从content区域开始显示背景。
background-clip
border： 从border区域向外裁剪背景。
padding： 从padding区域向外裁剪背景。
content： 从content区域向外裁剪背景。
no-clip： 从border区域向外裁剪背景。
实例：iphone开机动画
25.遮罩
Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果
26.Transition过渡
transition-property 要运动的样式 （all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/
实例：幻灯片效果
27.
过渡完成事件
Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);
实例：苹果产品展示
实例2：360浏览器 ipad 版导航
29.transform
rotate() 旋转函数 取值度数
deg 度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
skewX()
skewY()
scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
translate() 位移函数
translateX()
translateY()
实例1：钟表效果
实例2：怪异的导航
Transform 执行顺序问题 — 后写先执行
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
30.3d变换
transform-style（preserve-3d） 建立3D空间
Perspective 景深
Perspective- origin 景深基点
Transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()
实例2：3D图片切换
31.animation
关键帧——keyFrames
类似于flash
只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
格式
@keyframes 动画名称
{
动画状态
}
格式(2)
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}
可以只有to
调用的标签(#div1、xxx:hover之类的)
必要属性
animation-name 动画名称（关键帧名称）
animation-duration 动画持续时间
例如：
-webkit-animation-name: ‘miaov';
-webkit-animation-duration: 4s;
例子：进度条
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
可选属性
animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
可选属性(2)
animation-delay 动画延迟
只是第一次
animation-iteration-count 重复次数
infinite为无限次
animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行
通过class
在class里加入animation的各种属性
直接给元素加-webkit-animation-xxx样式
animation的问题
写起来麻烦
没法动态改变目标点位置
obj.addEventListener('webkitAnimationEnd', function (){}, false);
实例1：无缝滚动
-------------------------------------------
html5
第一课：
语义化标签的由来http://devfiles.myopera.com/articles/572/idlist-url.htm
1.<header></header> 主要用于页面的头部的信息介绍，也可用于板块头部
2.<hgroup></hgroup> 页面上的一个标题组合
一个标题和一个子标题，或者标语的组合
<hgroup>
<h1>妙味课堂</h1>
<h2>带您进入富有人情味的IT培训</h2>
</hgroup>
3.<nav></nav> 导航 （包含链接的的一个列表）
<nav><a href=“#”>链接</a><a href=“#”>链接</a></nav>
<nav>
<p><a href=“#”>妙味课堂</a></p>
<p><a href=“#”>妙味课堂</a></p>
</nav>
<nav>
<h2>妙味精品课程</h2>
<ul>
<li><a href=“#”>javascript</a></li>
<li><a href=“#”>html+css</a></li>
</ul>
</nav>
4.<footer></footer>页脚 页面的底部 或者 版块底部
5.<section> <section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节
6.<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
7.<aside></ aside>
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
8.<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<figure>
<img src=“miaov.png”/>(注意没有alt)
<figcaption> 妙味课堂 photo © 妙味趣学</figcaption>
</figure>
9.<time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
10.<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
11.<details></details>用于描述文档或文档某个部分的细节
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开
< summary></summary> details 元素的标题
<details>
<summary>妙味课堂</summary>
<p>国内将知名的IT培训机构</p>
</details>
12.<dialog></dialog>定义一段对话
<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
13.<address></address> 定义文章 或页面作者的详细联系信息
14.<mark></mark> 需要标记的词或句子
15.<keygen>给表单添加一个公钥
<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>
16.<progress><progress>定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>
17.标签
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下：
在页面的头部加下：
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
</script>
样式
HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里 要对这些标签定义一下 它默认的display
18.新的输入型控件
email : 电子邮箱文本框，跟普通的没什么区别
当输入不是邮箱的时候，验证通不过
移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
search : 搜索引擎
chrome下输入文字后，会多出一个关闭的X
range : 特定范围内的数值选择器
min、max、step( 步数 )
例子 : 用JS来显示当前数值
新的输入型控件_2
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息
例子 : 微博的密码框提示
autocomplete : 是否保存用户输入值
默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空
Pattern : 正则验证 pattern="\d{1,5}“
Formaction 在submit里定义提交地址
表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
表单验证
Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
第二课：
1.HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index
新的选择器
querySelector
querySelectorAll
getElementsByClassName
2.获取class列表属性
classList
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
3.JSON的新方法
parse() : 把字符串转成json
字符串中的属性要严格的加上引号
stringify() : 把json转化成字符串
会自动的把双引号加上
新方法与eval的区别
新方法的应用
深度克隆新对象
如何其他浏览器做到兼容
http://www.json.org/去下载json2.js
4.data自定义数据
dataset
data-name : dataset.name
data-name-first : dataset.nameFirst
Data数据在jquery mobile中有着重要作用
5.延迟加载JS
JS的加载会影响后面的内容加载
很多浏览器都采用了并行加载JS，但还是会影响其他内容
Html5的defer和async
defer : 延迟加载，会按顺序执行，在onload执行前被触发
async : 异步加载，加载完就触发，有顺序问题
Labjs库
6.历史管理
onhashchange ：改变hash值来管理
history ：
服务器下运行
pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
popstate事件 : 读取数据 event.state
注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
7.拖放事件
draggable ：
设置为true，元素就可以拖拽了
拖拽元素事件 : 事件对象为被拖拽元素
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发
目标元素事件 : 事件对象为目标元素
dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发
拖放事件_2
事件的执行顺序 ：drop不触发的时候
dragstart > drag > dragenter > dragover > dragleave > dragend
事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)
dragstart > drag > dragenter > dragover > drop > dragend
不能释放的光标和能释放的光标不一样
拖放事件_3
解决火狐下的问题
必须设置dataTransfer对象才可以拖拽除图片外的其他标签
dataTransfer对象
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
8.dataTransfer对象_2
effectAllowed
effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
setDragImage
三个参数：指定的元素，坐标X，坐标Y
files
获取外部拖拽的文件，返回一个filesList列表
filesList下有个type属性，返回文件的类型
9.FileReader(读取文件信息)
readAsDataURL
参数为要读取的文件对象，将文件读取为DataUrl
onload
当读取文件成功完成的时候触发此事件
this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
实例
拖拽删除列表
拖拽购物车
上传图片预览功能
理解新的选择器
获取class列表属性
Json的新方法
data自定义数据
延迟加载JS
历史管理
拖放事件
----------------------------------------------
第三课：canvas
不支持canvas的浏览器 可以看到canvas里面的标签的内容
<canvas id="c1" width="400" height="400">
<span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
canvas宽高 要在行内写，如果在style里写会有一些不一样
canvas 默认大小 300*150
绘制环境：目前只支持2d
getContext('2d')
绘制方块：
fillRect(L,T,W,H) 填充的方块,默认填充的是黑色
strokeRect(L,T,W,H) 带边框的方块
设置绘图：
fillStyle:填充颜色
lineWidth:边框宽度
strokeStyle:边框颜色
边界的绘制：
lineJoin:边界连接点样式
-miter(默认),round(圆点),bevel(斜角)
lineCap:端点样式
butt(默认),round(圆角),square(高度多出为宽度一半的值)
绘制路径：
beginPath():开始绘制路径
moveTo(x,y): 移动到绘制的新目标 绘制的起始点 //x y坐标
lineTo(x,y):新的目标点 //x y坐标
closePath():结束绘制路径
stroke() 画线
fill() 填充
注意点：针对不同的操作一定要有beginPath() 和closePath() 绘制不同的图形都要有自己的 开始 和结束
rect(L,T,W,H);
fill();
clearRect(L,T,W,H) 删除画布的矩形区域
var oGC = oC.getContext('2d');
oGC.beginPath();
oGC.rect(100,100,100,100);
oGC.closePath();
oGC.fill(); //绘制 方块才会出来
oGC.clearRect(0,0,oC.width,oC.height);
save和restore保证当前绘制只在当前图形中起作用 //oGc.save() 和 oGC.restore(); 把代码封装起来 不会影响下面的代码
save()
restrore()
绘制圆形：
arc(x,y,半径,起始弧度,结束弧度，旋转方向)
x,y:起始位置
弧度与角度的关系：弧度=角度*Math.PI/180
旋转方向：顺时针(false 默认),逆时针(true)
canvas绘制其他曲线：
arcTo( x1 , y1 , x2 , y2 , r )
-第一组坐标 第二组坐标 半径
quadraticCurveTo( dx , dy, x1 , y1 );
-贝塞尔曲线,第一组控制点,第二组结束坐标,控制点控制弧度的弯曲方向,类似拉弓
bezierCurveTo( dx1 , dy1 , dx2 , dy2, x1 , y1 )
-贝塞尔曲线,第一组控制点,第二组控制点,第三组结束坐标
translate(L,T)
rotate(弧度)
scale(w,h) 宽和 高的比例
canvas 插入图片：
等图片加载完,在执行canvas操作
-图片预加载,在onload中调用方法
drawImage(oImg,x,y,w,h)
-oImg:当前图片 x y ： 坐标 wh:宽高
注意：旋转前后 x 和 y 轴不变
设置背景：
createPattern( oImg , 平铺方式 ) repeat repeat-x repeat-y no-repeat
渐变：
createLinearGradient(x1,y1,x2,y2)
-线性渐变
-第一组参数：起始点坐标 第二组参数：结束点坐标
-addColorStop(位置,颜色) 添加渐变点
var oC=document.getElementById('hb');
var oCg=oC.getContext('2d');
var obj=oCg.createLinearGradient(100,100,100,200);
obj.addColorStop(0,'red');//起点用0表示
obj.addColorStop(0.3,'yellow'); //中间点可以添加任意个
obj.addColorStop(1,'blue');//终点用1表示
oCg.fillStyle=obj;
oCg.fillRect(0,0,300,300)
createRadialGradient(x1,y1,r1,x2,y2,r2)
-放射性渐变
-第一组坐标：第一个圆的坐标和半径 第二组坐标：第二个圆的坐标和半径
canvas文本：
strokeText( 文字 ,x y ) -文字边框
fillText( 文字 ,x y ) -文字填充
font:文字大小 '60pximpact'
textAlign:end right center
textBaseline:文字上下默认对齐方式的默认:alphabetic 可设置 top middle bottom
measureText():
measureText(str).width:只有宽度 没有高度
阴影：shadowOffsetX shadowOffsetY x轴偏移 y轴偏移
shadowBlur 高斯模糊值
shadowColor 阴影颜色
eg:var oC=document.getElementById('hb');
var oCg=oC.getContext('2d');
oCg.font='60px impact';//参数二可以为任意 但是不能不写
oCg.textBaseline='top';
//阴影
oCg.shadowOffsetX=5;
oCg.shadowOffsetY=5;
oCg.shadowBlur=5;
oCg.shadowColor="red";
//居中 填充文字
var w=oCg.measureText('张嘉丽').width;//获取文本宽度
oCg.fillText('张嘉丽',(oC.width-w)/2,(oC.height-60)/2);
//路径文字
oCg.strokeStyle="red";
oCg.strokeText('张嘉宏',0,200);
像素： getImageData( x,y,w,h ) 获取图像数据
var oImg=oCg.getImageData( 0,0,100,100 );
oImg.data.length
putImageData( 获取图像,x,y ) 设置新的图像数据
createImageData( w , h )
属性：-width:一行的像素个数
-height:一列的像素个数
-data:-个数组，包含每个像素的rgba四个值,注意每个值都在0-255之间的整数
合成：
1.全局alpha值(颜色的叠加)-globalAlpha
2.覆盖合成：图形元素的叠加
-源：新的图形
-目标：已经绘制过的图形
-globalCompositeOperation属性
>>source-over destination-over source-atop
>>destination-atop source-in destination-in
>>source-out destination-out lighter
>>copy xor
jcanvasScript.js
第五课：不同窗口间通信 iframe 和 window.open
如果我们要获取一个dom元素,首先要获取dom元素的window
myIframe.contentWindow
window.open 返回被打开窗口的window对象
iframe同域下子窗口也可以改变父窗口：
//parent => window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
parent.document.body.style.background = 'green';
window : 当前窗口
parent : 父级窗口
top : 顶级窗口 最外层的window
//window.opener : 通过window.open方法打开当前页面的窗口window
window.opener.document.body.style.background = 'green';
跨域：当本页面和被包含页面不在同一个域下面 就会有一个跨域安全限制
postMessage 可以通过这个对象下的方法给另外的一个窗口发送信息
接收消息的window对象.postMessage() 两个参数：发送的参数，接受的域
--------------------------------------------------------------
www.a.com下的5.postMessage.html 发送消息'1'给 http://www.b.com
var myIframe=document.getElementById('iframe1');
var oBtn=document.getElementsByTagName('input')[0];
oBtn.onclick=function(){
/*
第一个参数：发送的数据
第二个参数：接收数据的域名｛带上协议｝
*/
myIframe.contentWindow.postMessage('1','http://www.b.com')
}
<input type="button" value="点击我" />
<iframe id="iframe1" src="http://www.b.com/postMessage.html"></iframe>
www.b.com下的postMessage.html 接收www.a.com 发送的消息 通过监听事件对消息进行判断并作出处理
//window监听事件 接收www.a.com传过来的信息,并对信息进行判断 以作出不同的反应
window.addEventListener('message',function(ev){
if(ev.data=='1'){
document.body.style.background="green"
}
},false)
----------------------------------------------------------------
接收事件：
-message
-ev.origin 发送数据来源的域
-ev.data 发送的数据
ajax跨域：
标准浏览器下 访问的文件要设置header:
<?php
header('Access-Control-Allow-Origin:http://www.a.com'); //这是允许访问该资源的域
echo 'hello';
非标准浏览器下用对象 new XDomainRequest
eg:
var xhr=null;
document.onclick=function(){
//ie下的跨域
if(window.XDomainRequest){
xhr = new XDomainRequest();
xhr.onload = function() {
alert(this.responseText);
}
}else{//标准浏览器下的跨域
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){ //等到服务器返回内容
if(xhr.readyState==4){
if(xhr.status==200){
alert( xhr.responseText )
}
}
}
}
xhr.open('get', 'http://www.b.com/ajax.php', true);
xhr.send();
-------------------------------------------------------
模块化开发：
命名空间只能降低冲突，不能彻底解决冲突
seajs如何解决：
1.引入seajs
2.如何变成模块 define
普通模块变成sea模块
define(function(require,exports,module){
//js代码
function show(){alert(1)};
exports.show=show;//exports:对外提供接口的对象,在需要调用的地方 页面或其他js中调用exports.show()
}) 三个参数可以都写 也可以都不写，可以写前两个 也可以写前一个 不允许修改为a,b,c
3.如何调用模块 exports seajs.use
exports:对外提供接口的对象
seajs.use(模块的地址,加载好后的回调):引入模块,每个模块都有独立的对外接口exports,模块之间的exports互相不冲突。sea的默认根目录是sea.js这个文件,模块地址可以使用相对地址
seajs.use('./js/module1.js',function(ex){
ex.show() //ex就是exports
})
4.如何依赖模块 require
require:模块之间依赖的接口
require('./js/module2.js') //同样的相对地址
require('./module2.js');//module2是普通模块,不是sea模块
//模块1内部引入模块2 模块里面就可以建立依赖关系 不需要在页面中写成script标签的形式 内部的依赖比script标签要实用的多
构建工具：线上代码压缩
gruntjs（ http://gruntjs.com/ ）
安装流程
先安装nodejs和npm(包管理工具) npm已经合在nodejs里了
npm install -g grunt-cli
npm install grunt --save-dev
grunt –version 看grunt有没有安装成功
gruntjs（ http://gruntjs.com/ ）
使用流程
插件的概念：grunt有很多插件
合并插件："grunt-contrib-concat" : "~0.3.0",
压缩插件："grunt-contrib-uglify" : "~0.3.2"
"grunt-cmd-transport" : "~0.3.0",
"grunt-contrib-cssmin": "~0.5.0",
"grunt-contrib-clean" : "~0.6.0"
package.json 配置插件 与项目名 获取插件：进入项目目录：直行npm install 就会把插件下载下来 然后在gruntfile.js中进行配置,再执行grunt
package.json的配置目的主要是 配置插件,配置好了之后运行npm可以把插件下下来
package.json配置方法：
{
"name": "webqq2grunt",//项目名
"version": "0.1.0",
"devDependencies": {
"grunt" : "~0.4.2", //grunt版本
"grunt-contrib-concat" : "~0.5.0", //合并插件
"grunt-contrib-uglify" : "~0.3.2" //压缩插件
}
}
Gruntfile.js 构建 合并压缩之类的任务 配置完成之后可以直接在项目文件夹下运行grunt
配置方法1：
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat:{
webqq2grunt:{
files:{
'dist/main.js':['main.js','drag.js','scale.js','range.js'] //项目根目录下创建dist文件夹,合并js文件为main.js
}
}
},
uglify:{
webqq2grunt:{
files:{
'dist/main.min.js':['dist/main.js'] //压缩dist下的main.js 为 main.min.js
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');//加载插件
grunt.loadNpmTasks('grunt-contrib-uglify');//加载插件
grunt.registerTask('default', ['concat','uglify']);//添加任务
}
普通的grunt就是把所有的js合并压缩,并没有对依赖进行处理
seajs define合并要多出两个参数 (当前模块的id(模块地址),依赖模块的数组)
gruntjs（ http://gruntjs.com/ ）
Seajs + gruntjs开发 seajs是根据cmd规范开发的
grunt-cmd-transport //提取id和依赖插件
grunt-cmd-concat //对提取的依赖进行合并插件
seajs模块 package.json的配置：
{
"name": "webqq3gruntseajs",
"version": "0.1.0",
"devDependencies": {
"grunt" : "~0.4.2",
"grunt-cmd-transport" : "~0.3.0",
"grunt-cmd-concat" : "~0.2.7",
"grunt-contrib-uglify" : "~0.3.2"
}
}
gruntjs配置：
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
transport:{ //提取id和依赖 可以看到每个define中都多了两个参数 id 和 模块内部引用的模块数组
webqq3GruntSeajs:{
files:{
'.build':['main.js','drag.js','scale.js','range.js'] //将提取的id和依赖放在build文件夹中,注意依赖的顺序
}
}
},
concat:{
webqq3GruntSeajs:{
files:{
'dist/main.js':['.build/main.js','.build/drag.js','.build/scale.js','.build/range.js']
}
}
},
uglify:{
webqq3GruntSeajs:{
files:{
'dist/main.min.js':['dist/main.js']
}
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['transport','concat','uglify']);
}
深入学习seajs
配置信息
alias : 别名配置 防止id过长
paths : 路径配置 跟别名差不多 路径过长可以起个名字
vars : 变量配置
map : 映射配置
preload : 预加载项
debug : 调试模式
base : 基础路径
charset : 文件编码
https://github.com/seajs/seajs/issues/262
-1.别名alias
seajs.config({
alias:{
m3:'./js/module1.js'
}
})
seajs.use('m3',function(ex){})
-2.路径path
当目录比较深，或需要跨目录调用模块时，可以使用 paths 来简化书写。
seajs.config({
paths: {
'gallery': 'https://a.alipayobjects.com/gallery',
'app': 'path/to/app',
}
});
define(function(require, exports, module) {
var underscore = require('gallery/underscore');
//=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js
var biz = require('app/biz');
//=> 加载的是 path/to/app/biz.js
});
-3.有些场景下，模块路径在运行时才能确定，这时可以使用 vars 变量来配置。
seajs.config({
vars: {
'locale': 'zh-cn'
}
});
define(function(require, exports, module) {
var lang = require('./i18n/{locale}.js');
//=> 加载的是 path/to/i18n/zh-cn.js
});
-4.映射
该配置可对模块路径进行映射修改，可用于路径转换、在线调试等。
seajs.config({
map: [
[ '.js', '-debug.js' ]
]
});
define(function(require, exports, module) {
var a = require('./a');
//=> 加载的是 path/to/a-debug.js
});
module
id : 模块唯一标识
uri : 模块绝对路径
dependencies : 当前模块依赖
exports : 当前模块对外接口
require.async
异步加载模块
可以用module.exports进行输出,因为exports是module.exports的引用 两者是true
module.exports={
show:show,
show1:show1,
show2:show2
}
seajs 加载多个模块
seajs(['.js/module1.js','.js/module2.js'],function(ex,ex1){})
canvas库 JcanvaScript
html5 websocket互联网协议
http://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html
TCP/IP协议
-定义了互联网设备如何连入因特网,以及数据在他们之间的传输标准(如何传输)
-传输数据(协议)类型：www/email/ftp
HTTP协议：(我们经常打交道的是这个)
-浏览器和万维网服务器之间互相通信的规则
HTTP协议特点：
-功能很强大
-采用请求,响应模式,单项通信
-短连接,响应完成,链接断开( 客户端发送请求,服务器响应后就关闭链接 )
实时web交互：
股票,聊天室,网游等
如何实现实时应用,服务器推送(使用ajax定时发送请求来解决单项链接断开,但是对服务器的压力大)
于是出现了html5的websocket它是双向的 客户端向服务端发送请求,请求链接会永远的保存，
如果服务端有信息,会实时向客户端返回,而客户端随时可以向服务请求而不需要改变链接
什么是websocket?
基于TCP的双向的,全双工的数据链接
-双向的，客户端，服务端
-全双工：数据发送与接收，同时进行
建立socket应用？
-服务器必须支持 web socket
-nodejs简介：针对服务器进行编程
>>Ryan Dahl基于google V8引擎创建的一套用来编写高性能网络服务器的javascript工具包
-nodejs:用js去编写服务器应用
--------------------------------
1.移动端事件
ontouchstart 对应pc的onmousedown
ontouchmove 对应pc的onmousemove
ontouchend 对应pc的ontouchend
移动端的event对象不能直接用，要用一个对象
var touches = ev.changedTouches[0];
touches.clientX 或 touches.pageX
游戏引擎：
Crafty
GMP
lycheeJS
Akihabara
Clanfx
J5g3
Cocos2D
LimeJS
<audio src="song.mp3" controls="controls"></audio>
<vedio src="" controls="controls"></vedio>
inset 3px 3px 16px 5px rgba(208,208,208,1)
