版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
項目六多功能相冊——文檔對象設(shè)計一個多功能相冊，具體需求如下：①如圖6.1所示，是相冊用戶登錄的頁面。用戶輸入用戶名、密碼正確才能進入如圖6.2所示的相冊頁面。如果選擇了“記住密碼”復(fù)選框，則重新打開此頁面時，用戶名、密碼已經(jīng)被填入文本框中，用戶直接點擊“進入看相冊”按鈕就可以查看相冊。項目情境
圖6.1登錄
圖6.2相冊②如圖6.2所示，是進入的相冊頁面。相冊中的圖片在一行顯示，當(dāng)鼠標(biāo)放置到小圖上時，在下方顯示對應(yīng)的大圖。當(dāng)點擊小圖時，打開如圖6.3所示的對話框。在該對話框中，顯示該圖的詳細信息。項目情境
圖6.3詳細介紹③在圖6.3所示的對話框中，不僅顯示圖片的詳細介紹，還可以通過點擊圖片介紹下方的導(dǎo)航鏈接瀏覽其他圖片及其詳細介紹。項目情境掌握文檔對象Document的常用屬性和方法。掌握Cookie對象的使用方法。掌握圖像對象的使用方法。掌握超級鏈接對象的使用方法。掌握利用JavaScript設(shè)置樣式的方法。學(xué)習(xí)目標(biāo)任務(wù)1用JAVASCRIPT設(shè)置屬性和樣式在如圖6.4的窗口上顯示4張大小比例相同的圖片，每張圖片加紅色實線邊框，且在一行顯示。要求必須用JavaScript實現(xiàn)屬性和樣式的設(shè)置。圖6.4設(shè)置屬性和樣式1、文檔對象DocumentWindow對象的一個子對象，代表整個HTML文檔。通過Document對象可以操作HTML文檔中的內(nèi)容及其他對象。Document對象有許多屬性和方法，還有子對象?！鞠嚓P(guān)知識】屬性描述
all返回對象所包含的元素集合的引用。（IE支持）alinkColor設(shè)置或獲取元素中所有激活鏈接的顏色。
bgColor不贊成。設(shè)置或獲取表明對象后面的背景顏色的值。
cookie設(shè)置或獲取cookie的字符串值。
documentElement獲取對文檔根結(jié)點的引用。
domain設(shè)置或獲取文檔的安全域名。
expand設(shè)置或獲取表明是否可對象內(nèi)創(chuàng)建任意變量的值。
fgColor設(shè)置或獲取文檔的前景(文本)顏色。
forms返回一個數(shù)組，數(shù)組中的元素為Form表單對象。images返回一個數(shù)組，數(shù)組中的元素為Image圖像對象。linkColor設(shè)置或獲取對象文檔鏈接的顏色。
links返回一個數(shù)組，數(shù)組中的元素為Link超級鏈接對象。referrer獲取將用戶引入當(dāng)前頁面的位置URL。
URL設(shè)置或獲取當(dāng)前文檔的URL。
vlinkColor設(shè)置或獲取用戶已訪問過的鏈接顏色。
XMLDocument獲取對由對象引出的的XML文檔對象模型(DOM)的引用。
XSLDocument獲取對XSL文檔的頂層結(jié)點的引用?！鞠嚓P(guān)知識】方法描述close關(guān)閉輸出流并強制將數(shù)據(jù)發(fā)送到顯示。open此方法以兩種方式工作。該方法打開一個文檔用于收集write和writeln方法的輸出。在這種情況下，只使用前兩個參數(shù)url和name。若指定了附加參數(shù)，此方法將打開一個窗口，這與window對象的window.open方法相同。write在指定窗口的文檔中寫入一個或多個HTML表達式。
writeln在指定窗口的文檔中寫入一個或多個HTML表達式，后面追加一個換行符。2、圖像對象文檔對象Document的images屬性返回的是一個數(shù)組，數(shù)組中的每一個元素都是一個圖像對象，即Image對象。JavaScript加載HTML文檔時，會自動創(chuàng)建一個images數(shù)組，數(shù)組中的元素個數(shù)由HTML文檔中的<img>標(biāo)簽決定，每一個<img>標(biāo)簽就是images數(shù)組的一個元素，也就是一個圖像對象。引用images數(shù)組中的元素方法有三種，分別是：document.images[i]document.images[圖片的名字]document.圖片的名字【相關(guān)知識】3、在JavaScript中設(shè)置對象的屬性或樣式1）設(shè)置屬性
通常，在HTML文檔中，可以直接在該標(biāo)簽內(nèi)部設(shè)置一個標(biāo)簽的屬性，例如： <imgsrc="1.jpg"/>
其中，src就是<img>標(biāo)簽的一個屬性，但是，有時為了動態(tài)的改變某個標(biāo)簽的屬性，就可以借助JavaScript，在程序內(nèi)部設(shè)置，方法是：
標(biāo)簽對象.屬性=屬性的值;【相關(guān)知識】2）設(shè)置樣式
在HTML文檔中，設(shè)置樣式通常用CSS樣式表，但是有時候也需要在JavaScript中進行動態(tài)的設(shè)置，方法是：標(biāo)簽對象.style.樣式=樣式的值;
其中，樣式的書寫原則上與CSS樣式表的書寫方式一致。但是，如果樣式中有短橫線”-”，則在JavaScript中省略此短橫線，而采用“駝峰”法書寫原則，原因是在JavaScript中短橫線會被當(dāng)作減號來處理從而導(dǎo)致錯誤，例如，CSS樣式表中設(shè)置字體大小用font-size,在JavaScipt中則寫成fontSize?！鞠嚓P(guān)知識】1、在<body>標(biāo)簽對中創(chuàng)建一個項目列表ul，每個列表項li中放置一個空的img圖片標(biāo)簽，代碼如下：<body><ul><li><img/></li><li><img/></li><li><img/></li><li><img/></li></ul></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varimgCount=document.images.length; for(i=0;i<imgCount;i++) { document.images[i].src="images/"+(i+1)+".jpg"; document.images[i].style.height=75+"px"; document.images[i].style.width=105+"px"; document.images[i].style.border="1pxredsolid"; } document.all.tags("ul")[0].style.listStyle="none";//IE支持all varlists=document.all.tags("li"); for(i=0;i<lists.length;i++) { lists[i].style.display="inline"; }}</script>【任務(wù)實現(xiàn)】在如圖6.5所示的頁面中，有兩種樣式可供選擇，每種樣式下圖片的來源和外邊框都不同。當(dāng)用戶選擇了某一種樣式，例如選擇了“樣式一”，關(guān)閉瀏覽器后，重新打開頁面，則該頁面圖片默認(rèn)使用“樣式一”。任務(wù)2用COOKIE記住樣式圖6.5用COOKIE記住樣式1、cookie的概念cookie是以文件的形式存儲在客戶端磁盤上的一些信息，這些信息用來保存狀態(tài)或者用戶身份識別。為了安全，瀏覽器只會讓創(chuàng)建cookie的網(wǎng)站訪問該cookie。用戶可以通過設(shè)置瀏覽器配置從而阻止cookie的使用?！鞠嚓P(guān)知識】2、創(chuàng)建與讀取cookie在JavaScript中，cookie可以通過cookie名和值的方式來創(chuàng)建。用Document對象的cookie屬性就可以用來設(shè)置和讀取cookie。創(chuàng)建cookie的語法如下：document.cookie="cookie的名稱=cookie的值“一個網(wǎng)站可以創(chuàng)建多個cookie，不同的cookie可以擁有不同的值。【相關(guān)知識】3、獲取cookie的值用Document對象的cookie屬性就可以獲得一個網(wǎng)站下所有的cookie，實際上是獲取了cookie文件的內(nèi)容?！鞠嚓P(guān)知識】4、cookie的有效期cookie被創(chuàng)建后，一般來說，只要瀏覽器不關(guān)閉，就一直有效，一旦瀏覽器被關(guān)閉了，cookie就自動失效了。如果希望在關(guān)閉瀏覽器后還能繼續(xù)使用，就必須為cookie設(shè)置一個有效期，也就是生存期。在有效期內(nèi)，cookie都可以使用，一旦超過了，該cookie就自動失效，cookie文件就會被自動刪除?？梢栽谠O(shè)置cookie值的同時定義cookie的有效期，使用方式如下：document.cookie="cookie的名稱=cookie的值";expires=日期【相關(guān)知識】注意，這里的日期必須是GMT格式或者UTC格式的日期型字符串。GMT(GreenwichMeanTime)是格林尼治時;UTC(UniversalTimeCoordinated)是協(xié)調(diào)世界時。其值的格式形如：Tue,20May201410:46:08GMT由于這種格式使用不方便，所以，可以使用方法toGMTString()或者toUTCString()將日期進行轉(zhuǎn)換。一般來說，cookie的有效期都設(shè)置為從當(dāng)前時間開始向后延續(xù)的毫秒數(shù)，再將這個毫秒數(shù)轉(zhuǎn)換為GMT或者UTC日期格式?！鞠嚓P(guān)知識】5、cookie的可訪問路徑cookie被某個頁面創(chuàng)建后，并不是只有這個頁面才能訪問，與該頁面處在同一個目錄或者其子目錄下的頁面都可以訪問該cookie，除此之外的其他目錄下的頁面就無法訪問了。一個能使得網(wǎng)站中所有的頁面都能訪問該cookie的方法是在創(chuàng)建cookie的同時，設(shè)置其path參數(shù)值為根目錄“/”。【相關(guān)知識】1、在<body>標(biāo)簽對中創(chuàng)建兩個單選按鈕和一個<img>圖像標(biāo)簽，代碼如下：<body><inputtype="radio"name="radio"id="style1"/>樣式一<inputtype="radio"name="radio"id="style2"/>樣式二<br/><imgid="sampleImage"/></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varexpires=newDate(); expires.setTime(expires.getTime()+24*3600000); style1.onclick=function() { sampleImage.src="images/1.jpg"; sampleImage.style.border="4pxredsolid"; document.cookie="style=1;expires="+expires.toUTCString()+";path=/"; } style2.onclick=function() { sampleImage.src="images/2.jpg"; sampleImage.style.border="4pxbluesolid";document.cookie="style=2;expires="+expires.toUTCString()+";path=/"; } varcookie=document.cookie.split("=")[1];
if(cookie=="1") { sampleImage.src="images/1.jpg"; sampleImage.style.border="4pxredsolid"; style1.checked=true; } else { sampleImage.src="images/2.jpg"; sampleImage.style.border="4pxbluesolid"; style2.checked=true; }}</script>【任務(wù)實現(xiàn)】
if(cookie=="1") { sampleImage.src="images/1.jpg"; sampleImage.style.border="4pxredsolid"; style1.checked=true; } else { sampleImage.src="images/2.jpg"; sampleImage.style.border="4pxbluesolid"; style2.checked=true; }}</script>【任務(wù)實現(xiàn)】在如圖6.6所示的頁面中，有一些超級鏈接，點擊“顯示鏈接地址”按鈕，顯示頁面上已有的所有超級鏈接的內(nèi)容和鏈接到的頁面地址。任務(wù)3找出所有超級鏈接地址圖6.6找出所有超級鏈接地址1、鏈接對象Document對象的links屬性可以返回一個數(shù)組，數(shù)組中的每個元素就是一個鏈接（Link）對象?？梢允褂靡韵碌姆椒▉硪胠inks數(shù)組中的元素：document.links[i]【相關(guān)知識】2、鏈接對象的屬性【相關(guān)知識】屬性描述hash 設(shè)置或返回從井號(#)開始的URL（錨）。Host設(shè)置或返回主機名和當(dāng)前URL的端口號。Hostname設(shè)置或返回當(dāng)前URL的主機名。Href設(shè)置或返回完整的URL。Pathname設(shè)置或返回當(dāng)前URL的路徑部分。Port設(shè)置或返回當(dāng)前URL的端口號。Protocol設(shè)置或返回當(dāng)前URL的協(xié)議。Search設(shè)置或返回從問號(?)開始的URL（查詢部分）。target設(shè)置或返回超級鏈接打開的目標(biāo)窗口。innerHTML返回Link對象中的超級鏈接文字。也可以用text（Netscape瀏覽器支持）或者innerText（IE瀏覽器支持）。1、在<body>標(biāo)簽對中創(chuàng)建一些超級鏈接、一個按鈕和一個用于顯示結(jié)果的div，代碼如下：<body><ahref="">百度</a><ahref="">Google</a><ahref="">雅虎</a><ahref="">淘寶</a><inputtype="button"value="顯示鏈接地址"id="showBtn"/><divid="allLinksDiv"></div></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ showBtn.onclick=function() { allLinksDiv.innerHTML=""; for(i=0;i<document.links.length;i++) { varthisLink=document.links[i]; allLinksDiv.innerHTML+=thisLink.innerHTML+"："+thisLink.href+"<br/>"; } }}</script>【任務(wù)實現(xiàn)】任務(wù)4“項目六”的實現(xiàn)cookie值的編碼和解碼
一般情況下，cookie中是不允許出現(xiàn)空格、分號、逗號等特殊符號的，如果需要將這些符號寫入cookie，就必須使用escape()函數(shù)對cookie進行編碼，在讀取cookie時再用unescape()函數(shù)對cookie進行解碼以便還原cookie的值。 escape()函數(shù)返回一個包含charstring內(nèi)容的字符串值（Unicode格式）。所有空格、標(biāo)點、重音符號以及其他非ASCII字符都用“%xx”編碼代替，其中“xx”等于表示該字符的十六進制數(shù)。例如，空格返回的是“%20”。字符值大于255的以“%uxxxx”格式存儲。注意，escape()函數(shù)不能夠用來對統(tǒng)一資源標(biāo)示碼(URI)進行編碼，編碼應(yīng)使用encodeURI函數(shù)。 unescape()函數(shù)返回一個包含charstring內(nèi)容的字符串值。所有以“%xx”十六進制形式編碼的字符都用ASCII字符集中等價的字符代替。以“%uxxxx”格式（Unicode字符）編碼的字符用十六進制編碼“xxxx”的Unicode字符代替。注意，unescape()函數(shù)不能用于解碼統(tǒng)一資源標(biāo)識碼(URI)，解該碼可使用decodeURI函數(shù)?！鞠嚓P(guān)知識】1、在本項目中，需要建立三張頁面，分別為：登錄（login.html）、相冊（photo.html）、相片詳細（detail.html）。2、在登錄（login.html）頁面中要實現(xiàn)記住密碼的功能可以使用cookie保存用戶輸入的用戶名和密碼。3、在相冊（photo.html）頁面中要導(dǎo)入多張相片，并且設(shè)置顯示格式，點擊圖片觸發(fā)相關(guān)事件，可以考慮使用圖片對象的屬性、樣式和事件。點擊某一張圖片打開對話框顯示圖片詳細介紹可以使用Window對象打開模態(tài)對話框技術(shù)。4、在相片詳細（detail.html）頁面中，要實現(xiàn)導(dǎo)航功能，可以考慮使用鏈接對象的屬性和事件來實現(xiàn)。5、考慮到代碼的模塊化和可重用性，本項目中將設(shè)置和讀取cookie的功能獨立為一個函數(shù)，并放置在一個單獨的文件“func.js”中?！救蝿?wù)分析】在文件中創(chuàng)建一個設(shè)置cookie的函數(shù)setCookie和一個讀取cookie的函數(shù)getCookie。代碼如下：functionsetCookie(cookieName,value,hours,path){ varexpires=newDate(); expires.setTime(expires.getTime()+hours*3600000); document.cookie=cookieName+"="+escape(value)+";expires="+expires.toUTCString()+";path="+path;}functiongetCookie(cookieName){ varallCookies=document.cookie; varstartPos=allCookies.indexOf(cookieName); varcookieValStartPos=startPos+cookieName.length+1; varcookieValEndPos=allCookies.indexOf(";",startPos); if(cookieValEndPos==-1) { cookieValEndPos=allCookies.length+1; } varcookieValue=allCookies.substring(cookieValStartPos,cookieValEndPos); returnunescape(cookieValue);}【任務(wù)實現(xiàn)一】設(shè)置和讀取cookie的代碼文件“func.js”。1、在<body>標(biāo)簽對中建立一個表單，表單元素為兩個文本框、一個復(fù)選框和一個按鈕。代碼如下：<body><formid="form1"name="form1"method="post"action="">用戶名：<inputtype="text"id="nameText"/><br/>密碼：<inputtype="text"id="pswText"/><br/><inputtype="checkbox"id="saveCookie"/>記住密碼<br/><inputtype="button"id="submitBtn"value="登錄看相冊"/></form></body>【任務(wù)實現(xiàn)二】登錄頁面文件“l(fā)ogin.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript"src="func.js"></script><scripttype="text/javascript">window.onload=function(){ Text.value=getCookie("username"); form1.pswText.value=getCookie("password"); form1.submitBtn.onclick=function() { if(Text.value=="abc"&&form1.pswText.value=="123") { window.location.replace("photo.html"); } else { alert("用戶名或密碼錯誤！"); } if(form1.saveCookie.checked) { setCookie("username",Text.value,24,"/"); setCookie("password",form1.pswText.value,24,"/"); } }}</script>【任務(wù)實現(xiàn)二】登錄頁面文件“l(fā)ogin.html”。1、在<body>標(biāo)簽對中建立一個可以返回登錄頁面的超級鏈接；一個項目列表，每個列表項中創(chuàng)建一個空的圖像標(biāo)簽；一個含有空的圖像標(biāo)簽的<div>標(biāo)簽，用來顯示大圖。代碼如下：<body><ahref="login.html">返回登錄頁</a><ul><li><img/></li><li><img/></li><li><img/></li><li><img/></li></ul><div><img/></div></body>【任務(wù)實現(xiàn)三】相冊頁面文件“photo.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varimgCount=document.images.length; vardivImg=document.images[imgCount-1]; divImg.style.display="none"; for(i=0;i<imgCount-1;i++) { document.images[i].src="../images/"+(i+1)+".jpg"; document.images[i].style.height=75+"px"; document.images[i].style.width=105+"px"; } document.all.tags("ul")[0].style.listStyle="none";//IE支持all varlists=document.all.tags("li");【任務(wù)實現(xiàn)三】相冊頁面文件“photo.html”。 for(i=0;i<lists.length;i++) { lists[i].style.display="inline"; document.images[i].onmouseover=function() { this.style.cursor="pointer"; divImg.style.display="block"; divImg.src=this.src; } document.images[i].onmouseout=function() { divImg.style.display="none"; } document.images[i].index=i+1; document.images[i].onclick=function() { window.showModalDialog("detail.html",this.index,"dialogHeight:340px;dialogWidth:350px"); } }}</script>【任務(wù)實現(xiàn)三】相冊頁面文件“photo.html”。1、在<body>標(biāo)簽對中建立一個含有空的圖像標(biāo)簽的<div>標(biāo)簽，用來顯示當(dāng)前要顯示的圖片；一個空的<div>標(biāo)簽，用來顯示介紹圖片的文字信息；四個鏈接地址為空的超級鏈接，用來導(dǎo)航圖片。代碼如下：<body><div><img/></div><divid="detailDiv"></div><ahref="#">首頁</a>---<ahref="#">上一頁</a>---<ahref="#">下一頁</a>---<ahref="#">末頁</a></body>【任務(wù)實現(xiàn)四】詳細介紹頁面文件“detail.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ functionshowImg(index) { document.images[0].src="../images/"+index+".jpg"; detailDiv.innerHTML="這是第"+index+"張圖片的詳細介紹"; } varindex=window.dialogArguments; showImg(index); document.links[0].onclick=function() { index=1; showImg(index); } document.links[1].onclick=function() { if(index==1) { alert("已經(jīng)是第一頁"); } else【任務(wù)實現(xiàn)四】詳細介紹頁面文件“detail.html”。{ index--; showImg(index); } } document.links[2].onclick=function() { if(index==4) { alert("已經(jīng)是最后一頁"); } else { index++; showImg(index); } } document.links[3].onclick=function() { index=4; showImg(index); }}</script>【任務(wù)實現(xiàn)四】詳細介紹頁面文件“detail.html”。項目七商品列表——DOM對象如圖7.1所示，頁面展示了一個服裝商品的列表，在該列表中，效果及功能有：1、表格行背景色采用紅灰隔行變色顯示，當(dāng)鼠標(biāo)懸停在某一行上時，該行背景色變?yōu)辄S色；當(dāng)鼠標(biāo)離開該行時，背景色還原為原來的顏色。2、當(dāng)鼠標(biāo)懸停在服裝圖片上時，跟隨鼠標(biāo)顯示該件服裝的大圖，并且以提示信息的方式顯示該款服裝目前的銷量；當(dāng)鼠標(biāo)離開服裝圖片時，服裝大圖消失。3、當(dāng)點擊“按照銷量排序”按鈕時，列表中的行將按照服裝銷量的多少升序排列；再次點擊該按鈕，列表中的行將按照服裝銷量的多少降序排列。但是每一行中的序號不變。項目情境圖7.1商品列表掌握利用DOM獲取文檔節(jié)點的方法。掌握利用DOM操作文檔節(jié)點的方法。掌握利用DOM獲取或設(shè)置文檔節(jié)點樣式的方法。掌握利用DOM操作表格的方法。學(xué)習(xí)目標(biāo)如圖7.2所示，頁面上有一個文本區(qū)域框，用戶在其中輸入評論文字，點擊“發(fā)表評論”按鈕，該評論文字以列表的形式顯示在按鈕下面，并自動添加發(fā)表日期和“刪除”超級鏈接，后發(fā)表的評論文字排在評論列表的上部。點擊某條評論文字行后面的“刪除”鏈接，該條評論文字被刪除。當(dāng)鼠標(biāo)懸停在一條評論行上時，該行背景變?yōu)辄S色，鼠標(biāo)離開，背景色還原為白色。。任務(wù)1評論管理圖7.2評論管理1、DOM對象DOM是DocumentObjectModel(文檔對象模型)的首字母縮寫，它是W3C國際組織的一套Web標(biāo)準(zhǔn)。它定義了訪問HTML文檔對象的一套屬性、方法和事件。DOM是以層次結(jié)構(gòu)組織的節(jié)點或信息片斷的集合，它是給HTML與XML文件使用的一組API。DOM的本質(zhì)是建立網(wǎng)頁與腳本語言或程序語言溝通的橋梁。瀏覽器對象是一個分層的結(jié)構(gòu)，我們可以把一個網(wǎng)頁文檔看成一棵倒立的樹。如圖7.3所示。【相關(guān)知識】圖7.3文檔樹型結(jié)構(gòu)圖7.3對應(yīng)的HTML文檔<html><head> <title>列表</title></head><body><p>以下是列表</p><ulid="ul1"><lititle="one">1</li><lititle="two">2</li><lititle="three">3</li></ul></body></html>【相關(guān)知識】圖7.3文檔樹型結(jié)構(gòu)2、節(jié)點類型在DOM中，最常用的節(jié)點類型有三個，分別是元素節(jié)點（elementnode）、屬性節(jié)點（attributenode）和文本節(jié)點（textnode）。另外還有注釋節(jié)點（commentsnode）和文檔節(jié)點（documentnode）?？梢酝ㄟ^節(jié)點的nodeType屬性的值來判斷節(jié)點的類型，nodeType的值及其含義如表所示?！鞠嚓P(guān)知識】節(jié)點類型nodeType屬性值元素節(jié)點1屬性節(jié)點2文本節(jié)點3注釋節(jié)點8文檔節(jié)點91）元素節(jié)點在前面DOM樹對應(yīng)的HTML文檔中，<body>、<p>、<ul>等標(biāo)簽元素都是元素節(jié)點。元素節(jié)點可以包含其他元素，例如<ul>節(jié)點包含了3個<li>節(jié)點。2）屬性節(jié)點有些元素節(jié)點中會有屬性，這些屬性就是屬性節(jié)點。因為屬性總是被放在起始標(biāo)簽中，所以屬性節(jié)點總是被包含在元素節(jié)點中。比如，在前面DOM樹對應(yīng)的HTML文檔中，<li>節(jié)點是一個元素節(jié)點，其中有屬性title，例如title="one"就是一個屬性節(jié)點。3）文本節(jié)點在上述文檔中，元素節(jié)點<p>中包含了文字“以下是列表”，這段文字就是一個文本節(jié)點。一般來說，在XHTML文檔中，文本節(jié)點總是被包含在元素節(jié)點起始標(biāo)簽和結(jié)束標(biāo)簽中間。但是在IE9及以上版本瀏覽器、FF火狐瀏覽器中，會把兩個元素節(jié)點之間的空格或者換行也當(dāng)成一個文本節(jié)點。比如，在前面DOM樹對應(yīng)的HTML文檔中，<ul>下的子節(jié)點在這些瀏覽器中識別的個數(shù)不是3，而是7?！鞠嚓P(guān)知識】3、獲取元素節(jié)點1）getElementById()方法此方法返回對擁有指定ID的第一個對象的引用，其語法為：document.getElementById(“對象的id屬性值”)2）getElementsByName()方法此方法返回一個對象數(shù)組，每個對象對應(yīng)著文檔中有著給定名稱的一個元素，其語法為：document.getElementsByName(“對象的name屬性值”)3）getElementsByTagName()方法此方法返回一個對象數(shù)組，每個對象分別對應(yīng)著文檔中有著給定標(biāo)簽的一個元素，語法為：document.getElementsByTagName("對象的標(biāo)簽名稱")【相關(guān)知識】3、獲取元素節(jié)點4）querySelectorAll()方法querySelectorAll()方法返回文檔中匹配指定CSS選擇器的所有元素，語法格式如下：document.querySelectorAll("CSS選擇器")5)querySelector()方法querySelector()方法返回文檔中匹配指定CSS選擇器的第一個元素，語法格式如下：document.querySelector("CSS選擇器")【相關(guān)知識】4、獲取元素子節(jié)點1）childNodes屬性該屬性返回被選節(jié)點的子節(jié)點集合，其語法為：元素節(jié)點.childNodes需要注意的是，由于IE9及以上版本瀏覽器、FF火狐瀏覽器將一個元素節(jié)點下的空文本節(jié)點也當(dāng)作一個子節(jié)點，所以在這些瀏覽器中會將這些空文本節(jié)點也包含在childNodes集合中。2）children屬性該屬性返回被選節(jié)點的子節(jié)點集合，其語法為：元素節(jié)點.children與childNodes不同的是，在IE9及以上版本瀏覽器、FF火狐瀏覽器中，children將忽略空文本節(jié)點，不把空文本節(jié)點也包含在children集合中?！鞠嚓P(guān)知識】5、獲取元素父節(jié)點利用parentNode屬性可以返回被選節(jié)點的父節(jié)點，其語法為：元素節(jié)點.parentNode6、獲取首尾子節(jié)點1）firstChild屬性和lastChild屬性firstChild屬性可以返回被選節(jié)點的第一個子節(jié)點，其語法為：元素節(jié)點.firstChildlastChild屬性可以返回被選節(jié)點的最后一個子節(jié)點，其語法為：元素節(jié)點.lastChild這兩個屬性在IE9及以上版本瀏覽器、FF火狐瀏覽器中也會遇到將空文本節(jié)點也當(dāng)作一個子節(jié)點的問題，所以使用時應(yīng)該注意。【相關(guān)知識】2）firstElementChild屬性和lastElementChild屬性firstElementChild屬性可以返回被選節(jié)點的第一個子節(jié)點，其語法為：元素節(jié)點.firstElementChildlastElementChild屬性可以返回被選節(jié)點的最后一個子節(jié)點，其語法為：元素節(jié)點.lastElementChild這兩個屬性只在IE9及以上版本瀏覽器、FF火狐瀏覽器中使用，IE9之前的版本不支持這兩個屬性。與firstChild、lastChild屬性不同的是，這兩個屬性將忽略空文本節(jié)點?！鞠嚓P(guān)知識】7、獲取兄弟節(jié)點1）nextSibling屬性和previousSibling屬性nextSibling屬性可以返回與被選節(jié)點同級的下一個節(jié)點，其語法為：元素節(jié)點.nextSiblingpreviousSibling屬性可以返回與被選節(jié)點同級的前一個節(jié)點，其語法為：元素節(jié)點.previousSibling這兩個屬性在IE9及以上版本瀏覽器、FF火狐瀏覽器中也會遇到將空文本節(jié)點也當(dāng)作一個子節(jié)點的問題，所以使用時應(yīng)該注意。2）nextElementSibling屬性和previousElementSibling屬性nextElementSibling屬性可以返回與被選節(jié)點同級的下一個節(jié)點，其語法為：元素節(jié)點.nextElementSibling【相關(guān)知識】2）nextElementSibling屬性和previousElementSibling屬性nextElementSibling屬性可以返回與被選節(jié)點同級的下一個節(jié)點，其語法為：元素節(jié)點.nextElementSiblingpreviousElementSibling屬性可以返回與被選節(jié)點同級的前一個節(jié)點，其語法為：元素節(jié)點.previousElementSiblin這兩個屬性只在IE9及以上版本瀏覽器、FF火狐瀏覽器中使用，IE9之前的版本不支持這兩個屬性。與nextSibling、previousSibling屬性不同的是，這兩個屬性將忽略空文本節(jié)點?！鞠嚓P(guān)知識】8、創(chuàng)建元素節(jié)點利用createElement()方法可以動態(tài)的創(chuàng)建一個元素節(jié)點，其語法為：document.createElement(“元素標(biāo)簽名”)9、添加元素節(jié)點利用createElement()方法創(chuàng)建的元素節(jié)點實際上還沒有添加到頁面文檔中，還必須依靠添加元素節(jié)點的方法。1）appendChild()方法該方法在指定元素節(jié)點的最后一個子節(jié)點之后添加節(jié)點，如果指定元素節(jié)點沒有子節(jié)點，則直接插入，其語法為：父元素節(jié)點.appendChild(要添加的子元素節(jié)點)2）insertBefore()方法該方法可在已有的子節(jié)點前插入一個新的子節(jié)點，其語法為：父元素節(jié)點.insertBefore(要添加的子元素節(jié)點,參考子節(jié)點)【相關(guān)知識】10、刪除元素節(jié)點利用removeChild()方法可以在指定元素節(jié)點中刪除一個子節(jié)點，其語法為：父元素節(jié)點.removeChild(要刪除的子元素節(jié)點)【相關(guān)知識】1、在<body>標(biāo)簽內(nèi)部輸入以下代碼，創(chuàng)建一個文本區(qū)域框，一個按鈕，一個準(zhǔn)備顯示評論列表行的空項目列表。<body><textareaid="msgTextArea"cols="25"rows="5"></textarea><inputtype="button"id="msgBtn"value="發(fā)表評論"/><ulid="ul1"></ul></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ functiongetMsgDate()//得到當(dāng)前日期
{ vardate=newDate(); varyear=date.getFullYear(); varmonth=date.getMonth()+1; varday=date.getDay()+1; varmsgDate=year+"/"+month+"/"+day; returnmsgDate; } varul=document.getElementById("ul1"); varmsgBtn=document.getElementById("msgBtn"); varmsgTextArea=document.getElementById("msgTextArea"); msgBtn.onclick=function() { varnewLi=document.createElement("li"); vardelMsg="<ahref='javascript:;'id='delLink'>刪除</a>" newLi.innerHTML=msgTextArea.value+"-----"+getMsgDate()+delMsg; varlis=document.getElementsByTagName("li");【任務(wù)實現(xiàn)】 if(ul.children.length==0)//添加新的評論
{ ul.appendChild(newLi); } else { ul.insertBefore(newLi,lis[0]); } vardelLink=document.getElementById("delLink"); delLink.onclick=function()//刪除評論
{ ul.removeChild(this.parentNode); } for(i=0;i<lis.length;i++)//鼠標(biāo)懸停行變色
{ lis[i].onmouseover=function() { this.style.backgroundColor="yellow"; } lis[i].onmouseout=function() { this.style.backgroundColor=""; } } } }</script>【任務(wù)實現(xiàn)】設(shè)計一個鼠標(biāo)跟隨效果，當(dāng)鼠標(biāo)在頁面上移動時，有一個紅色矩形跟隨著鼠標(biāo)移動。當(dāng)鼠標(biāo)單擊時，紅色矩形消失；當(dāng)鼠標(biāo)再次單擊時，紅色矩形又出現(xiàn)在鼠標(biāo)當(dāng)前所在的位置。任務(wù)2鼠標(biāo)跟隨定位position在CSS樣式表中，主要有四種頁面元素定位方式，分別為：static（靜態(tài)定位）、fixed（固定定位）、relative（相對定位）和absolute（絕對定位），當(dāng)我們需要用JavaScript代碼控制頁面元素的位置時，通常使用該頁面元素的left和top樣式，此時該頁面元素必須要設(shè)置定位方式，但不可以使用static方式定位，原因是static定位方式下left和top樣式不起作用?！鞠嚓P(guān)知識】在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ vardiv=document.createElement('div'); document.body.appendChild(div); div.style.width="100px"; div.style.height="100px"; div.style.backgroundColor="red"; div.style.position="absolute"; document.onmousemove=function(ev) { varoEvent=ev||event; div.style.left=oEvent.clientX+"px"; div.style.top=oEvent.clientY+"px"; } document.onclick=function() { if(div.style.display=="none") { div.style.display="block"; } else { div.style.display="none"; } }}</script>【任務(wù)實現(xiàn)】如圖7.4所示，設(shè)計一個橫向的圖片墻，其中的每一幅圖片每隔一秒鐘都從右向左移動一格。任務(wù)3循環(huán)移動圖片墻圖7.4圖片墻重新認(rèn)識appendChild()方法在任務(wù)一中，我們已經(jīng)初步學(xué)習(xí)了appendChild()方法，知道其作用是將新創(chuàng)建的元素節(jié)點添加到指定的元素節(jié)點的最后。實際上appendChild()方法還可以將已有的元素節(jié)點添加到指定的元素節(jié)點中。此時，該方法將會實現(xiàn)兩步操作，第一步是從原來的位置移除該元素節(jié)點，第二步是將該元素節(jié)點添加到指定元素節(jié)點中?！鞠嚓P(guān)知識】1、在<body>標(biāo)簽內(nèi)部輸入以下代碼，創(chuàng)建一個項目列表，每個列表項是一副圖片。<body><ulid="ul1"> <li><imgsrc="images/1.jpg"/></li> <li><imgsrc="images/2.jpg"/></li> <li><imgsrc="images/3.jpg"/></li> <li><imgsrc="images/4.jpg"/></li> <li><imgsrc="images/5.jpg"/></li></ul></body>【任務(wù)實現(xiàn)】2、定義CSS樣式表，代碼如下：<styletype="text/css">Img{width:100px;heiht:100px; border:1px#999solid;}ul{ list-style-type:none;}li{display:inline;margin:5px;}</style>【任務(wù)實現(xiàn)】3、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varul1=document.getElementById("ul1"); window.setInterval(move,1000); functionmove() { varlis=document.getElementsByTagName("li"); ul1.appendChild(lis[0]); }}</script>【任務(wù)實現(xiàn)】如圖7.5所示，有一個7行一列的表格，其中有無序數(shù)字，當(dāng)點擊“降序排列”按鈕后，表格中的數(shù)字按照降序排列。任務(wù)4表格排序圖7.5表格排序1、獲取表格元素1）標(biāo)準(zhǔn)表格通常，我們在編寫表格HTML代碼時，都是形如下列寫法：<table><tr><td>內(nèi)容</td>……其他<td>標(biāo)簽對</tr>……其他<tr>標(biāo)簽對</table>【相關(guān)知識】實際上，一個完整的表格需要包括表頭，表體和表尾。其中，表頭被包含在<thead>標(biāo)簽對中；表體被包含在<tbody>標(biāo)簽對中；表尾被包含在<tfoot>標(biāo)簽對中。表頭和表尾分別顯示在表格的最上端和最下端，表體顯示在表頭和表尾之間，表體可以有一個或多個。例如，下列HTML就是一個比較完整的表格代碼。【相關(guān)知識】<tablewidth="200"border="1"id="tb"><thead><tr><td>序號</td><td>姓名</td></tr></thead><tbody><tr><td>1</td><td>張三</td></tr><tr><td>2</td><td>李四</td></tr><tr><td>3</td><td>王五</td></tr><tr><td>4</td><td>趙六</td></tr></tbody><tfoot><tr><tdcolspan="2">制表人：×××</td></tr></tfoot></table>2）獲取表頭tHead屬性可以獲取表頭，其語法為：表格對象.tHead3）獲取表尾tFoot屬性可以獲取表尾，其語法為：表格對象.tFoot4）獲取表體tBodies屬性可以獲取表體，其語法為：表格對象.tBodies5）獲取行rows屬性可以獲取表格各個部分的行，其語法為：表格對象.表頭對象|表體對象|表尾對象.rows(
“|”代表“或者”)【相關(guān)知識】6）獲取單元格cells屬性可以獲取表格中的任意一個單元格，其語法為：表格對象.表頭對象|表體對象|表尾對象.rows[索引號].cells(
“|”代表“或者”)【相關(guān)知識】2、數(shù)組排序?qū)τ谝粋€數(shù)組，如果希望對其中的元素進行排序，可以使用很多排序算法，但是一種比較簡便的做法是使用數(shù)組對象提供的sort()方法，該方法可以對數(shù)組元素按照升序或者降序排序。其語法為：數(shù)組對象.sort(fn)其中，fn是一個自定義的函數(shù)，該函數(shù)形如：functionfn(n1,n2){returnn1-n2; //或者returnn2-n1;}因為只有當(dāng)n1>n2時，該函數(shù)返回值才大于0，sort()方法排序成功，而當(dāng)n1<=n2時，該函數(shù)的返回值為小于或等于0的數(shù)，此時sort()方法不排序，如此類推，最后數(shù)組對象中的數(shù)組元素就按照升序排列。如果把02行修改為“returnn2-n1”，則只有當(dāng)n2>n1時，該函數(shù)返回值才大于0，同理，最后數(shù)組對象中的數(shù)組元素就按照降序排列。【相關(guān)知識】需要注意的是，sort()方法只能對數(shù)組對象進行排序，對于表格元素如行、單元格等集合對象則不能排序。如果需要對這些集合對象使用sort()方法排序，必須將集合對象轉(zhuǎn)換為數(shù)組對象后才能使用sort()方法排序?！鞠嚓P(guān)知識】<body><inputtype="button"id="sortBtn"value="降序排列"/><tableid="table1"border="1"cellspacing="0"cellpadding="0"><thead><tr><tdwidth="65">數(shù)字</td></tr></thead><tbody><tr><td>2</td></tr><tr><td>3</td></tr>【任務(wù)實現(xiàn)】<tr><td>5</td></tr><tr><td>1</td></tr><tr><td>4</td></tr><tr><td>6</td></tr></tbody></table></body>1、在<body>標(biāo)簽內(nèi)部輸入以下代碼，創(chuàng)建一個按鈕和一個表格。<scripttype="text/javascript">window.onload=function(){ functionfn(tr1,tr2) { varnum1=parseInt(tr1.cells[0].innerHTML); varnum2=parseInt(tr2.cells[0].innerHTML); returnnum2-num1; } varsortBtn=document.getElementById("sortBtn"); sortBtn.onclick=function() { vartable=document.getElementById("table1"); vartrRows=table.tBodies[0].rows; vararr=[]; for(i=0;i<trRows.length;i++) { arr[i]=trRows[i]; } arr.sort(fn); for(i=0;i<arr.length;i++) { table.tBodies[0].appendChild(arr[i]); } }}</script>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：任務(wù)5“項目七”的實現(xiàn)獲取或設(shè)置元素節(jié)點屬性1）getAttribute()方法該方法可以獲取元素節(jié)點的某個指定的屬性，其語法為：元素節(jié)點.getAttribute("屬性")2）setAttribute()方法該方法可以設(shè)置元素節(jié)點的某個指定的屬性的值，其語法為：元素節(jié)點.setAttribute("屬性",屬性的值)【相關(guān)知識】3）兼容性問題對于以上兩個方法，都存在瀏覽器兼容性問題。比如，style屬性、class屬性以及for屬性等在I6、IE7瀏覽器中用上面的兩個方法都無法識別。因此對于元素節(jié)點的屬性獲取和設(shè)置，一般建議如下：①常規(guī)屬性建議使用“元素節(jié)點.屬性”的形式，如id屬性、title屬性。②自定義屬性一般用以上兩個方法。③當(dāng)獲取或設(shè)置的屬性是JavaScript里的關(guān)鍵字時建議使用以上兩個方法，比如<label>標(biāo)簽中的for屬性。④當(dāng)獲取或設(shè)置屬性是保留字,如：class屬性,建議使用“元素節(jié)點.className”【相關(guān)知識】1、在本項目中，圖片可以通過遍歷表體所有的行設(shè)置其中<img>標(biāo)簽的src屬性設(shè)置。2、對表格進行排序時，考慮到表格行作為集合對象不能直接使用sort()方法排序，可以將銷量賦值給數(shù)組，對數(shù)組排序后作為子節(jié)點添加到表體中。3、由于排序后要求各行前面的序號不變，因此排序后要重新設(shè)置各行前面的序號。4、鼠標(biāo)懸停到圖片小圖上顯示大圖可以利用鼠標(biāo)跟隨技術(shù)，顯示銷量提示可以設(shè)置<img>標(biāo)簽的title屬性值。5、項目中要盡量考慮到瀏覽器兼容性問題。【任務(wù)分析】1、在<body>標(biāo)簽對中建立一個“按照銷量排序”按鈕，一個含有<img>標(biāo)簽的表格：【任務(wù)實現(xiàn)】<body><inputtype="button"id="sortBtn"value="按照銷量排序"/><tableborder="1"cellpadding="0"cellspacing="0"id="tb1"><thead><tr><tdwidth="32">序號</td><tdwidth="32">圖片</td><tdwidth="93">銷量（件）</td></tr></thead><tbody><tr><td></td><td><img/></td><td>200</td></tr><tr><td></td><td><img/></td><td>100</td></tr><tr><td></td><td><img/></td><td>150</td></tr><tr><td></td><td><img/></td><td>50</td></tr><tr><td></td><td><img/></td><td>180</td></tr><tr><td></td><td><img/></td><td>300</td></tr></tbody></table></body>2、在<head>標(biāo)簽對中定義如下CSS樣式表，以便為各行變色提供兩種背景樣式（04～07行）。注意，02行設(shè)置了body的定位方式，是為了使得放置大圖的div更好的定位，否則當(dāng)鼠標(biāo)在表格行中的小圖上移動時，鼠標(biāo)跟隨效果出現(xiàn)閃爍。代碼如下：<styletype="text/css">body{ position:absolute;}.class1{ background-color:#CCC;}.class2{ background-color:#F9F;}</style>【任務(wù)實現(xiàn)】3、在<head>標(biāo)簽對中輸入如下代碼：<scripttype="text/javascript">window.onload=function(){ vartb=document.getElementById("tb1"); varsortBtn=document.getElementById("sortBtn"); vartrRows=tb.tBodies[0].rows; varisAsc=true; varoDiv; functioncreateDiv()//創(chuàng)建一個div用于顯示大圖
{ oDiv=document.createElement("div"); document.body.appendChild(oDiv); oDiv.style.width=200+"px"; oDiv.style.height=200+"px"; oDiv.style.position="absolute"; } createDiv(); functionsetRowColor()//設(shè)置隔行變色
{ for(i=0;i<trRows.length;i++) {
i%2==0?trRows[i].className="class1":trRows[i].className="class2"; } }
【任務(wù)實現(xiàn)】 setRowColor(); functionmouseRowColor()//鼠標(biāo)懸停改變行背景色，離開還原背景色
{ varrowColor; for(i=0;i<trRows.length;i++) { trRows[i].onmouseover=function() { rowColor=this.style.backgroundColor; this.style.backgroundColor="yellow"; } trRows[i].onmouseout=function() { this.style.backgroundColor=rowColor; } } } mouseRowColor(); varimgs=document.getElementsByTagName("img"); for(i=0;i<imgs.length;i++)//給每行添加圖片，為每張圖片添加鼠標(biāo)事件
{ imgs[i].width=50; imgs[i].height=50; imgs[i].src="images/"+(i+1)+".jpg"; imgs[i].onmousemove=function(ev)
【任務(wù)實現(xiàn)】{
varoEvent=ev||event;
oDiv.style.display="block"; oDiv.style.left=oEvent.clientX+"px";
oDiv.style.top=oEvent.clientY+"px";
oDiv.innerHTML="<imgsrc='"+this.src+"'/>";
//下面給圖片添加title屬性
if(this.parentNode.nextSibling.nodeType==3)
{
vartitleValue=this.parentNode.nextSibling.nextSibling.innerHTML;
}
else
{
vartitleValue=this.parentNode.nextSibling.innerHTML;
}
this.setAttribute("title","該款銷量為："+titleValue+"件");
}
imgs[i].onmouseout=function()
{
oDiv.style.display="none";
}}【任務(wù)實現(xiàn)】 functionsetRowID()//設(shè)置每一行的序號
{ for(i=0;i<trRows.length;i++) { trRows[i].cells[0].innerHTML=i+1; } } setRowID(); functionfn(tr1,tr2)//準(zhǔn)備傳入sort()方法中的函數(shù)
{ varnum1=parseInt(tr1.cells[2].innerHTML); varnum2=parseInt(tr2.cells[2].innerHTML); if(isAsc) { returnnum1-num2; } else { returnnum2-num1; } }【任務(wù)實現(xiàn)】 sortBtn.onclick=function()//點擊按鈕按照銷量排序
{ vararr=[]; for(i=0;i<trRows.length;i++)//將行轉(zhuǎn)存為數(shù)組
{ arr[i]=trRows[i]; } arr.sort(fn); for(i=0;i<arr.length;i++)//將排好序的數(shù)組添加到表體中
{ tb.tBodies[0].appendChild(arr[i]); } setRowID(); setRowColor(); isAsc=!isAsc;//變換升降序
}}</script>【任務(wù)實現(xiàn)】項目八自制滾動條——事件的高級應(yīng)用如圖8.1所示，頁面上的方框中顯示了一篇文章，旁邊有一個自制的豎向滾動條。用戶可以按住鼠標(biāo)左鍵上下拖動滾動條中的滑塊或者通過控制鼠標(biāo)滾輪瀏覽方框中的文章。項目情境圖8.1自制滾動條掌握事件流和事件綁定。掌握阻止瀏覽器默認(rèn)行為的方法。掌握鼠標(biāo)滾輪事件的處理方法。學(xué)習(xí)目標(biāo)如圖8.2所示，頁面上左右兩邊各有一個條幅廣告，點擊任何一個廣告條幅中的“X”鏈接都將兩幅廣告條同時關(guān)閉。
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025版宿舍樓智能監(jiān)控設(shè)施承包合同3篇
- 2025年度木材貿(mào)易與木工加工合作合同4篇
- 夏令營2025非傳統(tǒng)教育項目合作合同3篇
- 2025年度木材加工廠設(shè)備租賃合同范本7篇
- 《漢服唯美古詩句》課件
- 2025版實習(xí)員工實習(xí)期間住宿安排合同3篇
- 養(yǎng)生保健與中醫(yī)養(yǎng)生藥物考核試卷
- 合成革表面處理與涂飾技術(shù)考核試卷
- 2025版智能電網(wǎng)信息安全防護合同4篇
- 創(chuàng)業(yè)空間科技創(chuàng)新平臺考核試卷
- 《天潤乳業(yè)營運能力及風(fēng)險管理問題及完善對策（7900字論文）》
- 醫(yī)院醫(yī)學(xué)倫理委員會章程
- xx單位政務(wù)云商用密碼應(yīng)用方案V2.0
- 農(nóng)民專業(yè)合作社財務(wù)報表(三張報表)
- 動土作業(yè)專項安全培訓(xùn)考試試題(帶答案)
- 大學(xué)生就業(yè)指導(dǎo)（高職就業(yè)指導(dǎo)課程 ）全套教學(xué)課件
- 死亡病例討論總結(jié)分析
- 第二章 會展的產(chǎn)生與發(fā)展
- 空域規(guī)劃與管理V2.0
- JGT266-2011 泡沫混凝土標(biāo)準(zhǔn)規(guī)范
- 商戶用電申請表
評論
0/150
提交評論