css3 和 html5 筆記

時間 2019-11-13

標籤 css3 css html5 html 筆記欄目 CSS 简体版

原文原文鏈接

1.css3 ie下大部分不兼容 ie9如下
瀏覽器低版本不兼容須要寫
-webket-transition:1s
-moz-transition: 1s
-o-transition:1s
transition:1s
這些javascript

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)php

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-1css

實例: 背景透明，文字不透明

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;html

-webkit-text-stroke:寬度顏色只有webkit瀏覽器支持html5

7.新增文本功能
Direction 定義文字排列方式(全兼容)
Rtl 從右向左排列
Ltr 從左向右排列
注意要配合unicode-bidi 一塊使用 unicode-bidi:bidi-override;java

Text-overflow 定義省略文本的處理方式
clip 無省略號
Ellipsis 省略號 (注意配合overflow:hidden和white-space:nowrap一塊使用) node

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 全部子元素居中jquery

13.box-shadow:[inset] x y blur [spread] color
參數
inset：投影方式
inset：內投影
不給：外投影
x、y：陰影偏移
blur：模糊半徑
spread：擴展陰影半徑
先擴展原有形狀，再開始畫陰影
colorcss3

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 欄目間隔線 git

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;}}

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

調用的標籤(#div一、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 &copy 妙味趣學</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>給表單添加一個公鑰

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> 
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工具包