HTML與JS與Jquery

1、HTML浮云原理 （飄浮，釋放空間）盒模型Margin:外邊距Border:邊框Padding:內(nèi)邊距在定義盒子的寬度時，要考慮到內(nèi)填充，邊框，外邊距浮動原理解析 float對象浮動后，它就脫離了當(dāng)前的文檔流，可以理解為漂起來了，它原來的地方就空出來了，它后的內(nèi)容就會占用它原來的地方。清除浮動當(dāng)元素有浮動屬性時，會對其父元素或后面的元素產(chǎn)生影響，會出現(xiàn)一個布局錯亂現(xiàn)象，可以通過清除浮動的方法來解決，浮動元素的影響。Clear:None:默認(rèn)值，允許兩邊都可以有浮動Left:不允許左邊有浮動對象Right:不允許右邊有浮動對象Both:左右兩側(cè)不允許有浮動對象例：定位定位布局，就是可以通過元素p

2、osition屬性控制元素的位置。當(dāng)我們使用絕對定位時，必須要有兩個條件1必須給父元素加定位屬性，一般建議使用position:relative;2給子元素，加絕對定位position:absolute；同時要加方向?qū)傩?。相對定位與絕對定位的區(qū)別絕對定位是根據(jù)父元素為基準(zhǔn)點，進行定位，-會脫離文檔離相對定位是根據(jù)其自身為基準(zhǔn)點，進行定位。離開原位置，但還點著原來的位置position屬性( absolute | relative | static | fixed )詳解 什么是文檔流？      將窗體自上而下分成一行行, 并在每行中按從左至右

3、的順序排放元素,即為文檔流。      只有三種情況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。靜態(tài)定位(static) ：      static，無特殊定位，它是html元素默認(rèn)的定位方式，即我們不設(shè)定元素的position屬性時默認(rèn)的position值就是static，它遵循正常的文檔流對象，對象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。相對定位(relative) ：    &

4、#160; relative定位，又稱為相對定位，相對于自身在文檔流的位置發(fā)生偏移。絕對定位(absoulte) ：       absoulte定位，也稱為絕對定位，雖然它的名字號曰“絕對”，但是它的功能卻更接近于"相對"一詞，為什么這么講呢？原來，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的z-index 跟具體數(shù)字如：divz-index:100注意：z-index的數(shù)值不跟單位。z-index的數(shù)字越高越靠前，并且值必須為整數(shù)和

5、正數(shù)（正數(shù)的整數(shù)）。二、z-index使用條件   -   TOPZ-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常我們讓不同的對象盒子以不同順序重疊排列，我們就是要z-index樣式屬性。三、z-index應(yīng)用案例   -   TOP為了方便觀察z-index樣式屬性，我們設(shè)置3個DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色為黑色、紅色、藍色。CSS width為100px，css height為50px3、z-index案例截圖CSSCSS概述：css指層疊樣式表C

6、SS樣式表極大地提高了工作效率CSS基礎(chǔ)語法：1 selectorproperty:value例：h1color:red; font-size:14px;屬性大于1個之后，屬性之間用分號隔開如果值大于1個單詞，則需要加上引號：Pfont-family:”sans serif”;1選擇器分組： H1,h2,h3,h4,h5,h6color:red;通配符：* color:red;2繼承：(子標(biāo)簽可繼承父標(biāo)簽的樣式) Bodycolor:green;3派生類選擇器li strongcolor:red;4 id選擇器 1） Id選擇器可以為標(biāo)有id的HTML元素指定特定的樣式Id選擇器以“#”來定義

7、2）ID選擇器和派生選擇器目前比較常用的方式是ID選擇器常常用于建立派生選擇器。5類選擇器：以一個點顯示也可以與派生類一起使用。6屬性選擇器對帶有指定屬性的HTML元素設(shè)置樣式CSS3選擇器1在 CSS3 中，追加了三個屬性選擇器分別為：att*=val、att=val和att$=val，使得屬性選擇器有了通配符的概念。att*=val：表示包含屬性包含val字符串的都加樣式att=val：表示首字符包含val字符串的加樣式。att$=val：表示結(jié)束字符包含val字符串的加樣式。例css3-1.html2 結(jié)構(gòu)性偽類選擇器p:first-line color:red; /表示p元素的第一行加

8、樣式p:first-lettercolor:blue; /表示p元素的第一字加樣式li:beforecontent:"-" /表示li 元素前加樣式li:aftercontent:"對列表做一個解釋" /表示li元素后加樣式 font-size:10px; color:gray; 例css3-2.htmlRoot、empty、notroot 選擇器是綁定到頁面的根元素中，如果想對某個結(jié)構(gòu)元素使用樣式，但是想排除這個結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，可以使用 not，使用 empty 選擇器來指定當(dāng)元素中內(nèi)容為空白時使用的樣式。<style>:root

9、background-color:gray; bodybackground-color:green; /*如果有root樣式時，body的樣式只對有內(nèi)容的區(qū)域設(shè)置樣式，如果去掉root,再看效果。*/ div *:not(h2)color:red;:emptybackground-color:blue;/*目標(biāo)元素是div的話*/:targetbackground-color:black;</style>例css3-3.html1選擇器：first-child、last-child、nth-child和nth-last-childfirst-child、last-child、nth

10、-child 和 nth-last-child，利用這幾個選擇器能夠針對一個父元素中的第一個子元素、最后一個子元素、指定序號的子元素，甚至第偶數(shù)個或第奇數(shù)個子元素進行樣式的指定。li:first-childbackground-color:yellowli:last-childbackground-color:blue; li:nth-child(3)background-color:red; li:nth-last-child(2)background-color:green;li:nth-child(odd)background-color:green; li:nth-last-child

11、(odd)background-color:green; li:nth-child(even)background-color:green;li:nth-last-child(even)background-color:green; 例 1.html;2選擇器：nth-of-type 和 nth-last-of-typenth-of-type 和 nth-last-of-type，使用這兩個選擇器，可以避免一些問題的發(fā)生。使用這兩個選擇器時，CSS3在計算子元素是第奇數(shù)個子元素還是第偶數(shù)個子元素時，就只針對同類型的子元素進行計算了。h2:nth-child(odd)background-col

12、or:green;h2:nth-of-type(odd)background-color:green; h2:nth-of-type(even)background-color:gray; h2:nth-last-of-type(odd)background-color:green; h2:nth-last-of-type(even)background-color:gray;例2.html3nth-child(n) a*n+b; 其中a表示幾種樣式，b表示元素的位置。例3.html4 Only-child選擇器Only-child選擇器來代替nth-child和nth-last-child的

13、實現(xiàn)方法。例4.htmlUI元素狀態(tài)偽類選擇器11CSS3 選擇器 hover、focus、active 和 checked在 CSS3 的選擇器中，除了結(jié)構(gòu)性偽類選擇器外，還有一種UI元素狀態(tài)偽類選擇器，例如 hover、focus、active 和 checked 等<style>inputtype="text":hover /*鼠標(biāo)經(jīng)過的顏色*/background-color:red;inputtype="text":focus /*獲取焦點的顏色*/background-color:gray;inputtype="text

14、":active /*鼠標(biāo)按下的顏色*/background-color:green;</style>例1.html和2.html2enabled和disabled例3.htmlDisplaydisplay: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ 作者：一絲鏈接：來源：知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。box例：<!doctype html><html><

15、head><style>.containerwidth:60%;height:600px;background:blue;margin:0 auto;.headerwidth:100%;height:100px;background:gray;.contentwidth:100%;height:400px;background:yellow;display:box;display:-moz-box;/*兼容火狐瀏覽器*/display:-webkit-box;/*兼容谷歌瀏覽器*/.layout_leftwidth:50%;height:100%;background:gre

16、en;.layout_rightwidth:50%;height:100%;background:red;.footerwidth:100%;height:100px;background:#f0f0f0;</style></head><body><div class="container"><div class="header"></div><div class="content"><div class="layout_left&qu

17、ot;>左右兩個布局的父元素是content，對父元素使用display:box</div><div class="layout_right">左右兩個布局的父元素是content，對父元素使用display:box</div></div><div class="footer"></div></div></body></html>以display:box為基礎(chǔ)的樣式,也就是說如果div設(shè)置了display:box，才能使用以下CSS樣式box

18、-flex 使用box-flex的CSS，其父元素必須使用display:box;的樣式     兼容性檢查display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/1

19、7/18, Android 4.4+ */屬性規(guī)定框的子元素是否可伸縮其尺寸。它的值必須大于或等于1，盒子才具有彈性。提示：可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多余的空間，可伸縮元素就會擴展來填充這些空間。例：-moz-box-flex:1; -webkit-box-flex:1;默認(rèn)值：0.0（指示該元素不可伸縮）多個子元素的彈性空間當(dāng)盒元素內(nèi)部多個 子元素都定義box-flex屬性時，子元素的空間彈性是相對的。瀏覽器將會把各個子元素的box-flex屬性值相加得到一個總值，然后根據(jù)各自的值點總值的比例來分配盒元素的剩余空間。定義列顯示的順序box-direction&#

20、160;            box 方向 box-flex-group          屬性規(guī)定框中子元素的顯示次序。值更低的元素會顯示在值更高的元素前面顯示。注釋：分組值相同的元素，它們的顯示次序取決于其源次序。box-lines           box-ordinal-group

21、60;     以組為單位的子元素排列方向box-orient              改變盒子的布局方向Vertical:表示垂直方向排列；Horizontal：表示水平方向排列；使用盒布局時，元素的大小(包括寬和高)具有自適應(yīng)性，即元素的寬度與高度可以根據(jù)排列方向 改變而改變。對齊box-align            

22、   box-pack元素的對齊方式box-pack和box-aign屬性Box-pack和box-align不僅可以使子盒子居中，還可以使子盒子中的元素也居中。需要注意的是要使這個盒子的屬性設(shè)為display:box例如：box-pack,box-align對齊.html文件例：（對齊在左下角）<!doctype html><html><head><style>*margin:0px;padding:0px;border:0px;.containerwidth:800px;height:600px;margin:0

23、 auto;display:box;display:-moz-box;display:-webkit-box;border:1px solid yellow;/水平方向上：對齊開頭;以display:box為基礎(chǔ)box-pack:start;-moz-box-pack:start;-webkit-box-pack:start;/垂直方向上：對齊結(jié)尾 以display:box為基礎(chǔ)box-align:end;-moz-box-align:end;-webkit-box-align:end;.container imgwidth:196px;height:146px;.container divw

24、idth:196px;height:146px;border:1px solid #DFDFDF;padding:5px;margin:2px;</style></head><body><div class="container"><div class="box1"><img src="image/11.jpg"/></div><div class="box2"><img src="image/33.jp

25、g"/></div><div class="box3"><img src="image/44.jpg"/></div></div></body></html>增強的盒模型1盒子陰影-box-shadow屬性box-shadow 屬性向框添加一個或多個陰影。語法box-shadow: h-shadow v-shadow blur spread color inset;注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由

26、 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。值描述測試h-shadow必需。水平陰影的位置。允許負(fù)值。測試v-shadow必需。垂直陰影的位置。允許負(fù)值。測試blur可選。模糊距離。測試spread可選。陰影的尺寸。測試color可選。陰影的顏色。請參閱 CSS 顏色值。測試inset可選。將外部陰影 (outset) 改為內(nèi)部陰影。測試?yán)?.html2）盒子的描邊效果實現(xiàn)描邊的方法是把水平偏移值和垂直偏移值設(shè)置為0，僅設(shè)置模糊半徑、陰影大小和陰影顏色。如果不設(shè)置模糊半徑，則描邊效果就等同于邊框效果了。例2.html3）盒子的內(nèi)陰影例3.html2

27、盒子尺寸的計算方法-box-sizing屬性box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。默認(rèn)值：content-box繼承性：no版本：CSS3JavaScript 語法：object.style.boxSizing="border-box"box-sizing語法box-sizing: content-box|border-box|inherit;值描述

28、content-box這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。border-box為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。inherit規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。例4.html3盒子溢出內(nèi)容處理-overflow-x和overflow-y屬性Css3新增的overflow-x和overflow-y屬性，是對overflow屬性的補充，分別表示水平方向上

29、的溢出和垂直方向上的溢出處理。Overflow語法overflow-x: visible|hidden|scroll|auto|no-display|no-content;overflow-y: visible|hidden|scroll|auto|no-display|no-content;值描述測試visible不裁剪內(nèi)容，可能會顯示在內(nèi)容框之外。測試hidden裁剪內(nèi)容 - 不提供滾動機制。測試scroll裁剪內(nèi)容 - 提供滾動機制。測試auto如果溢出框，則應(yīng)該提供滾動機制。測試no-display如果內(nèi)容不適合內(nèi)容框，則刪除整個框。測試no-content如果內(nèi)容不適合內(nèi)容框，則隱藏

30、整個內(nèi)容。測試一多列布局（用于多文字排版）瀏覽器支持只有 Opera 支持 column-count 屬性。Firefox 支持替代的 -moz-column-count 屬性。Safari 和 Chrome 支持替代的 -webkit-column-count 屬性。1設(shè)計多列布局Columns:<column-width>|<column-count>說明：在網(wǎng)頁中顯示大量正文文字時，建議分列顯示，以方便瀏覽器閱讀。2定義列寬column-width 屬性規(guī)定列的寬度3定義列數(shù)column-count 屬性規(guī)定元素應(yīng)該被劃分的列數(shù)。4規(guī)定列之間的間隔column-g

31、ap5 規(guī)定列之間的寬度、樣式和顏色規(guī)則：語法column-rule: column-rule-width column-rule-style column-rule-color;6 column-span：規(guī)定元素橫跨的列語法column-span: 1|all;值描述測試1元素應(yīng)橫跨一列。測試all元素應(yīng)橫跨所有列。測試二：設(shè)計盒布局盒布局與多列布局的區(qū)別在于使用多列布局時，各列寬度必須相等的，在指定每列寬度時，也只能為所有列指定一個統(tǒng)一的寬度。列與列之間的寬度不可能是不一樣的。另外，使用多列布局時，也不可能具體指定什么列中顯示什么內(nèi)容，因此 比較適用于顯示文章內(nèi)容時，不適合于安排整個網(wǎng)頁

32、中由各元素組成的網(wǎng)頁結(jié)構(gòu)。表單驗證Form取消所有驗證novalidate="trueInputrequired="required"必填的inputAutofocus第一次進入頁面時，自動獲取焦點<input type="text" autofocus="autofocus" >Pattern Country code: <input type="text" name="country_code" pattern="A-z3" title=&qu

33、ot;Three letter country code" />多媒體技術(shù)Video<video src="1.mp4"><video>（兼容性）針對多種瀏覽器對不同視頻格式的支持<video width="450" height="450" controls="controls" ><!-自動檢測-> <source src="1.mp4" type="video/mp4"> <source

34、src="1.webm" type="video/webm"> <source src="1.ogg" type="video/ogg"> Your browser does not support the video tag.</video>Poster(在視頻開始播放前，放置啟始圖片)<body> <video width="450" height="450" controls="controls" po

35、ster="PLMM.jpg"> <!-自動檢測-> <source src="1.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </vi

36、deo> <video src="1.mp4"><video></body>Play屬性、paused屬性、ended屬性playbackRate（播放速率）addEventListener（對視頻的播放進行時實監(jiān)聽）調(diào)用方式 audio|video.addEventListener("canplay", function() /SomeJavaScriptCode ,false);事件類型loadstart當(dāng)瀏覽器開始尋找指定的音頻/視頻時，會發(fā)生 loadstart 事件。即當(dāng)加載過程開始時。duration

37、change當(dāng)指定音頻/視頻的時長數(shù)據(jù)發(fā)生變化時，發(fā)生 durationchange 事件。當(dāng)音頻/視頻加載后，時長將由 "NaN" 變?yōu)橐纛l/視頻的實際時長。·loadedmetadata當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時，會發(fā)生 loadedmetadata 事件。音頻/視頻的元數(shù)據(jù)包括：時長、尺寸（僅視頻）以及文本軌道。·loadeddata當(dāng)當(dāng)前幀的數(shù)據(jù)已加載，但沒有足夠的數(shù)據(jù)來播放指定音頻/視頻的下一幀時，會發(fā)生 loadeddata 事件。progress當(dāng)瀏覽器正在下載指定的音頻/視頻時，會發(fā)生 progress 事件。canplay當(dāng)瀏覽

38、器能夠開始播放指定的音頻/視頻時，發(fā)生 canplay 事件。canplaythrough當(dāng)瀏覽器預(yù)計能夠在不停下來進行緩沖的情況下持續(xù)播放指定的音頻/視頻時，會發(fā)生 canplaythrough 事件。networkState 屬性返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)（activity）。· 0 = NETWORK_EMPTY - 音頻/視頻尚未初始化· 1 = NETWORK_IDLE - 音頻/視頻是活動的且已選取資源，但并未使用網(wǎng)絡(luò)· 2 = NETWORK_LOADING - 瀏覽器正在下載數(shù)據(jù)· 3 = NETWORK_NO_SOURCE - 未找到

39、音頻/視頻來源實例/ 屬性返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)（activity）。function checkNetworkSate()var myVideo=document.getElementById("myVideo");var medioMsg=document.getElementById("medioMsg");var error=myVworkState;switch(error)case 0:medioMsg.innerHTML="音頻/視頻尚未初始化"break;case 1:medioMsg.innerHTML=&qu

40、ot;音頻/視頻是活動的且已選取資源，但并未使用網(wǎng)絡(luò)"break;case 2:medioMsg.innerHTML="瀏覽器正在下載數(shù)據(jù)"break;case 3:medioMsg.innerHTML="未找到音頻/視頻來源"break; 。error 屬性返回一個 MediaError 對象。MediaError 對象的 code 屬性包含了音頻/視頻的錯誤狀態(tài)MediaError 對象的 code 屬性返回一個數(shù)字值，它表示音頻/視頻的錯誤狀態(tài)：· 1 = MEDIA_ERR_ABORTED - 取回過程被用戶中止·

41、2 = MEDIA_ERR_NETWORK - 當(dāng)下載時發(fā)生錯誤· 3 = MEDIA_ERR_DECODE - 當(dāng)解碼時發(fā)生錯誤· 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻實例function checkError()var myVideo=document.getElementById("myVideo");var error=myVideo.error.code;switch(error)case 1:alert("取回過程被用戶中止");break;case 2:alert(&quo

42、t;當(dāng)下載時發(fā)生錯誤");break;case 3:alert("當(dāng)解碼時發(fā)生錯誤");break;case 4:alert("不支持音頻/視頻");break;JAVASCRIPTWindow.onloadCanvas畫布示例（繪制時鐘）<!DOCTYPE HTML><html><head><script>var mycanvas,ctx;window.onload=function() mycanvas=document.getElementById("mycanvas")

43、; ctx=mycanvas.getContext("2d"); drawClock();setInterval("drawClock()",1000);function drawClock()ctx.clearRect(0,0,mycanvas.width,mycanvas.height);/獲取時間var date=new Date();var sec=date.getSeconds();var min=date.getMinutes();var hour=date.getHours();hour=hour>=12?hour-12:hour;c

44、tx.beginPath();ctx.lineWidth=5;ctx.arc(500,300,150,0,2*Math.PI,false);ctx.strokeStyle="blue"/描廓ctx.stroke();/在位移之前，保存canvas，所以后面restore需要重新translate();ctx.save();/設(shè)置中心點ctx.translate(500,300);/重新開始路徑，繪制中心點ctx.beginPath();ctx.arc(0,0,3,0,2*Math.PI,false);ctx.fill();/刻度for(i=0;i<60;i+)if(i

45、%5=0)ctx.fillRect(120,0,30,5);elsectx.strokeStyle="black"ctx.fillRect(140,0,10,2);ctx.rotate(6*Math.PI/180);ctx.restore();ctx.save();/畫秒針ctx.beginPath();ctx.fillStyle="red"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx.rotate(Math.PI/30*sec);ctx.fillRect(-10,-1,140,2);ctx.rest

46、ore();ctx.save();/畫分針ctx.beginPath();ctx.fillStyle="black"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx.rotate(min+sec/60)*Math.PI/30);ctx.fillRect(-10,-1,120,5);ctx.restore();ctx.save();/時針ctx.beginPath();ctx.fillStyle="black"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx

47、.rotate(hour+min/60)*Math.PI/6);ctx.fillRect(-10,-1,80,7);ctx.restore();ctx.save();</script></head><body><canvas id="mycanvas" width="800" height="800" style="border:1px solid #000000;" ></canvas></body></html>拖拽preven

48、tDefault()定義和用法:阻止特定事件的默認(rèn)行為；默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式。cloneNode() 定義和用法cloneNode() 方法創(chuàng)建節(jié)點的拷貝，并返回該副本。cloneNode() 方法克隆所有屬性以及它們的值。如果您需要克隆所有后代，請把 deep 參數(shù)設(shè)置 true，否則設(shè)置為 false。appendChild()定義和用法appendChild() 在指定元素節(jié)點的最后一個子節(jié)點之后添加節(jié)點。提示：如果您需要創(chuàng)建包含文本的新段落，請記得添加到段落的文本的文本節(jié)點，然后向文檔添加該段落。您也可以使用

49、appendChild() 方法從一個元素向另一個元素中移動元素。拖放的相關(guān)事件在拖放的過程中會觸發(fā)以下事件：· 在拖動目標(biāo)上觸發(fā)事件 (源元素): o ondragstart - 用戶開始拖動元素時觸發(fā)o ondrag - 元素正在拖動時觸發(fā)o ondragend - 用戶完成元素拖動后觸發(fā)· 釋放目標(biāo)時觸發(fā)的事件: o ondragenter - 當(dāng)被鼠標(biāo)拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件o ondragover - 當(dāng)某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件o ondragleave - 當(dāng)被鼠標(biāo)拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件o ondrop -

50、 在一個拖動過程中，釋放鼠標(biāo)鍵時觸發(fā)此事件對于被拖動的元素來說，它將依次觸發(fā)ondragstart和ondrag事件，并在拖放結(jié)束時觸發(fā)ondragend事件。 而對于拖放的目的地元素來說，它將依次觸發(fā)ondragenter,ondragover,ondrop事件，與mouseover一類的類似。dataTransfer對象在HTML5中，dataTransfer對象專門用于處理拖拽過程中產(chǎn)生的數(shù)據(jù)信息，該對象的屬性及說明如下表所示屬性名稱說明effectAllowed用于設(shè)置或返回指定元素被拖拽時被允許的顯示效果，可以設(shè)定的值包括“none”、“copy”、“copyLink”、“

51、copyMove”，“l(fā)ink”，“l(fā)inkMove”，“move”，“all”、“uninitialized”dropEffect用于設(shè)置或返回指定被拖拽元素釋放拖拽的顯示效果，該屬性設(shè)置的值必須在effectAllowed設(shè)置范圍內(nèi)，否則無效。items用于返回DataTransferItemList對象types用于返回已保存的數(shù)據(jù)類型，如果是文件操作則返回文件型字符串files用于返回被拖拽的文件列表dataTransfer對象常用方法包括（1）setData(format, data)，該方法將指定類型的數(shù)據(jù)信息存入dataTransfer對象，參數(shù)format表示保存的數(shù)據(jù)類型，取

52、值為”text”或“URL”；參數(shù)data表示數(shù)據(jù)內(nèi)容。應(yīng)用實例如下src.ondragstart = function (e) /開始拖拽元素時觸發(fā)e.dataTransfer.setData("Text", e.target.id); /使用dataTransfer保存拖拽元素IDmsg.innerHTML="開始拖拽："+draggedID;（2）getData(format)，該方法用于從dataTransfer對象中讀取指定類型的數(shù)據(jù)信息，參數(shù)format表示讀取的數(shù)據(jù)類型。應(yīng)用實例如下target.ondrop = function (e)

53、/在目的元素內(nèi)釋放拖拽元素時觸發(fā) var droppedID = e.dataTransfer.getData("Text"); /從dataTransfer中獲取拖拽元素ID var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = "" target.appendChild(newElem); e.preventDefault();dataTransfer（示例：setData()和getData()）<!DOCTYPE HTML&

54、gt;<html><head><!-dataTransfer.getData()-><script>function onDrop(event)event.preventDefault();/getData(format)，該方法用于從dataTransfer對象中讀取指定類型的數(shù)據(jù)信息，參數(shù)format表示讀取的數(shù)據(jù)類型。var data=event.dataTransfer.getData("img");/var mydrag=document.getElementById("mydrag");even

55、t.target.appendChild(document.getElementById(data);function onDefault(event)event.preventDefault();function drag(event)/類似于鍵和值的關(guān)系/setData(format, data)，該方法將指定類型的數(shù)據(jù)信息存入dataTransfer對象，參數(shù)format表示保存的數(shù)據(jù)類型，取值為”text”或“URL”；參數(shù)data表示數(shù)據(jù)內(nèi)容。應(yīng)用實event.dataTransfer.setData("img",event.target.id);</scr

56、ipt></head><body><div id="mydrag2"style="border:1px solid #000000;width:1000px;height:300px" ondragenter="onDefault(event)" ondragover="onDefault(event)"ondrop="onDrop(event)" ><img id="b_img" src="b.jpg" d

57、raggable="true" ondragstart="drag(event)"/><img id="c_img" src="c.jpg" draggable="true" ondragstart="drag(event)"/><img id="d_img" src="d.jpg"draggable="true" ondragstart="drag(event)" /&g

58、t;<img id="e_img" src="e.jpg" draggable="true" ondragstart="drag(event)"/></div><div id="mydrag" style="border:1px solid #000000;width:1000px;height:300px" ondragenter="onDefault(event)" ondragover="onDefault(event)"ondrop="onDrop(event)" ></div></body></html>（3）setDragImage(image, x, y)這個函數(shù)用于設(shè)置鼠標(biāo)移動過程中隨鼠標(biāo)一起移動的效果圖，而不是鼠標(biāo)指針的顯示效果。x、y參數(shù)用于指定圖像相對于鼠標(biāo)指針的位置；image參數(shù)用于指定圖像元素，若是一個img元素，則顯示圖像元素，否則將給定的元素轉(zhuǎn)換成一張圖像并顯示。該函數(shù)只能在讀寫模式(也就是dragstart事件)下有用，在其它事件中調(diào)用無效。若不調(diào)用此函數(shù)，則在拖拽時，被拖拽元素被轉(zhuǎn)換成一個圖處并當(dāng)