網(wǎng)頁設(shè)計(jì)與制作-第6章DHTML技術(shù)_第1頁
網(wǎng)頁設(shè)計(jì)與制作-第6章DHTML技術(shù)_第2頁
網(wǎng)頁設(shè)計(jì)與制作-第6章DHTML技術(shù)_第3頁
網(wǎng)頁設(shè)計(jì)與制作-第6章DHTML技術(shù)_第4頁
網(wǎng)頁設(shè)計(jì)與制作-第6章DHTML技術(shù)_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計(jì)與制作-第6章DHTML技術(shù)第一頁，共24頁。HTML頁面元素成為DHML的操縱對象；CSS也是動態(tài)操縱的內(nèi)容，以獲得動態(tài)的格式效果；客戶端腳本（JavaScript、VBScript）操縱頁面中的HTML和CSS。DHTML針對的是下載到本地的網(wǎng)頁文件，在本地由瀏覽器完成，也就是說與服務(wù)器無關(guān)。與服務(wù)器腳本有本質(zhì)區(qū)別。DHTML實(shí)現(xiàn)的主要功能包括動態(tài)功能、定位功能以及利用CSS的功能。第二頁，共24頁。6.2DHTML與文檔對象模型DOM文檔對象模型DOM(DocumentObjectModel)，是由萬維網(wǎng)協(xié)會W3C(WorldWideWebConsortium)制定的一個(gè)與平臺和語言無關(guān)的規(guī)范。用于表示HTML元素以及Web瀏覽器信息的一個(gè)模型，它使程序腳本能夠訪問Web頁上的信息。在1998年，W3C發(fā)布了第一級的DOM規(guī)范。這個(gè)規(guī)范允許訪問和操作HTML頁面中的每一個(gè)單獨(dú)的元素。DOM可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。DOM被分為不同的部分（核心、XML及HTML）和級別（DOMLevel1/2/3）。通過操縱文檔對象模型中的對象的屬性并調(diào)用方法，可以使腳本按照一定的方式顯示W(wǎng)eb頁并與用戶的動作進(jìn)行交互。對于各種腳本程序語言，通常都有一個(gè)DOM子集，以便在特定的腳本語言中實(shí)現(xiàn)對象模型。第三頁，共24頁。JavaScript本地對象和內(nèi)置對象Browser對象（BOM）HTMLDOM對象第四頁，共24頁。JavaScript對象參考手冊ArrayBooleanDateMathNumberStringRegExpGlobal第五頁，共24頁。Browser對象對象描述WindowJavaScript層級中的頂層對象，表示瀏覽器窗口。Navigator包含客戶端瀏覽器的信息。Screen包含客戶端顯示屏的信息。History包含了瀏覽器窗口訪問過的URL。Location包含了當(dāng)前URL的信息。第六頁，共24頁。屬性描述closed返回窗口是否已被關(guān)閉。defaultStatus設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本。document對Document對象的只讀引用。請參閱Document對象。history對History對象的只讀引用。請參數(shù)History對象。innerheight返回窗口的文檔顯示區(qū)的高度。innerwidth返回窗口的文檔顯示區(qū)的寬度。length設(shè)置或返回窗口中的框架數(shù)量。location用于窗口或框架的Location對象。請參閱Location對象。name設(shè)置或返回窗口的名稱。Navigator對Navigator對象的只讀引用。請參數(shù)Navigator對象。opener返回對創(chuàng)建此窗口的窗口的引用。outerheight返回窗口的外部高度。outerwidth返回窗口的外部寬度。pageXOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的X位置。pageYOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的Y位置。parent返回父窗口。Screen對Screen對象的只讀引用。請參數(shù)Screen對象。self返回對當(dāng)前窗口的引用。等價(jià)于Window屬性。status設(shè)置窗口狀態(tài)欄的文本。top返回最頂層的先輩窗口。windowwindow屬性等價(jià)于self屬性，它包含了對窗口自身的引用。screenLeftscreenTopscreenXscreenY只讀整數(shù)。聲明了窗口的左上角在屏幕上的的x坐標(biāo)和y坐標(biāo)。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY。Window對象屬性第七頁，共24頁。方法描述alert()顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。blur()把鍵盤焦點(diǎn)從頂層窗口移開。clearInterval()取消由setInterval()設(shè)置的timeout。clearTimeout()取消由setTimeout()方法設(shè)置的timeout。close()關(guān)閉瀏覽器窗口。confirm()顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。createPopup()創(chuàng)建一個(gè)pop-up窗口。focus()把鍵盤焦點(diǎn)給予一個(gè)窗口。moveBy()可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素。moveTo()把窗口的左上角移動到一個(gè)指定的坐標(biāo)。open()打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。print()打印當(dāng)前窗口的內(nèi)容。prompt()顯示可提示用戶輸入的對話框。resizeBy()按照指定的像素調(diào)整窗口的大小。resizeTo()把窗口的大小調(diào)整到指定的寬度和高度。scrollBy()按照指定的像素值來滾動內(nèi)容。scrollTo()把內(nèi)容滾動到指定的坐標(biāo)。setInterval()按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。Window對象方法第八頁，共24頁。HTMLDOM對象參考手冊對象描述Document代表整個(gè)HTML文檔，可被用來訪問頁面中的所有元素Anchor代表<a>元素Area代表圖像映射中的<area>元素Base代表<base>元素Body代表<body>元素Button代表<button>元素Event代表某個(gè)事件的狀態(tài)Form代表<form>元素Frame代表<frame>元素Frameset代表<frameset>元素Iframe代表<iframe>元素Image代表<img>元素Inputbutton代表HTML表單中的一個(gè)按鈕Inputcheckbox代表HTML表單中的復(fù)選框Inputfile代表HTML表單中的文件上傳Inputhidden代表HTML表單中的隱藏域Inputpassword代表HTML表單中的密碼域Inputradio代表HTML表單中的單選按鈕Inputreset代表HTML表單中的重置按鈕Inputsubmit代表HTML表單中的確認(rèn)按鈕Inputtext代表HTML表單中的文本輸入域（文本框）Link代表<link>元素Meta代表<meta>元素Object代表<Object>元素Option代表<option>元素Select代表HTML表單中的選擇列表Style代表單獨(dú)的樣式聲明Table代表<table>元素TableData代表<td>元素TableRow代表<tr>元素Textarea代表<textarea>元素DOM中描述了文檔的對象層次關(guān)系，以及每個(gè)對象的事件。第九頁，共24頁。DOM是這樣規(guī)定的：整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)每個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)包含在HTML元素中的文本是文本節(jié)點(diǎn)每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)注釋屬于注釋節(jié)點(diǎn)第十頁，共24頁。6.3客戶端腳本什么是客戶端腳本腳本（Script）其實(shí)就是一段程序，分服務(wù)器端腳本（如ASP、JSP、PHP等，在服務(wù)器端運(yùn)行）和客戶端腳本（如VBScript、JavaScript在瀏覽器中運(yùn)行）?？蛻舳四_本常用來檢測瀏覽器、響應(yīng)用戶動作、驗(yàn)證表單數(shù)據(jù)、顯示各種自定義內(nèi)容，如特殊動畫、對話框等。常用客戶端腳本有JavaScript、VBScript，前者大多數(shù)瀏覽器都支持，而后者只有IE瀏覽器支持。第十一頁，共24頁。客戶端腳本使用方法直接將腳本嵌入到標(biāo)記中。用<SCRITP>標(biāo)記符插入。鏈接外部腳本程序文件。6.4VBScript介紹6.5JavaScrip介紹6.6在FrontPage和Dreamwear中使用客戶端腳本第十二頁，共24頁。jQuery框架介紹jQueryisaJavaScriptLibrary.jQuerygreatlysimplifiesJavaScriptprogramming.jQueryiseasytolearn.官方網(wǎng)站：第十三頁，共24頁。jQuery庫包含以下功能：HTML元素選取HTML元素操作CSS操作HTML事件函數(shù)JavaScript特效和動畫HTMLDOM遍歷和修改AJAXUtilities第十四頁，共24頁。<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>Ifyouclickonme,Iwilldisappear.</p></body></html>例子：第十五頁，共24頁。AddingjQuerytoYourWebPages：DownloadthejQuerylibraryfromjQ<head>

<scriptsrc="jquery-1.12.2.min.js"></script>

</head>IncludejQueryfromaCDN(ContentDeliveryNetwork),likeGoogle：<head>

<scriptsrc=""></script>

</head>MicrosoftCDN:<head>

<scriptsrc=""></script>

</head>第十六頁，共24頁。jQuerySyntaxThejQuerysyntaxistailor-madeforselectingHTMLelementsandperformingsomeactionontheelement(s).Basicsyntaxis:$(selector).action()A$signtodefine/accessjQueryA(selector)to"query(orfind)"HTMLelementsAjQueryaction()tobeperformedontheelement(s)Examples:$(this).hide()-hidesthecurrentelement.$("p").hide()-hidesall<p>elements.$(".test").hide()-hidesallelementswithclass="test".$("#test").hide()-hidestheelementwithid="test".第十七頁，共24頁。jQuerySelectors:jQueryselectorsareusedto"find"(orselect)HTMLelementsbasedontheirname,id,classes,types,attributes,valuesofattributesandmuchmore.It'sbasedontheexistingCSSSelectors,andinaddition,ithassomeowncustomselectors.AllselectorsinjQuerystartwiththedollarsignandparentheses:$().TheelementSelector$("p")The#idSelector$("#test")The.classSelector$(".test")第十八頁，共24頁。MoreExamplesofjQuerySelectors第十九頁，共24頁。MouseEventsKeyboardEventsFormEventsDocument/WindowEventsclickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave

blurunloadEventsTofireanaction.$("p").click(function(){

$(this).hide();

});$("input").blur(function(){

$(this).css("background-color","#ffffff");

});TheDocumentReadyEvent$(document).ready(function(){

//jQuerymethodsgohere...

});第二十頁，共24頁。jQueryEffectsBasicsCustomFadingSlidingjQueryHTML/CSSManipulationEmentsjQueryAJAX(AsynchronousJavaScriptandXML)WiththejQueryAJAXmethods,youcanrequesttext,HTML,XML,orJSONfromaremoteserverusingbothHTTPGetandHTTPPost.第二十一頁，共24頁。<!DOCTYPEhtml><html><head><scriptsrc=""></script><script>$(document).ready(function(){$("button").click(function(){$.get("demo_test.php",function(data,status){alert("Data:"+data+"\nStatus:"+status);});});});</script></head><body><button>SendanHTTPGETrequesttoapageandgettheresultback</button></body></html>第二十二頁，共24頁。$(document).ready(function(){ $('#cmt_submit').click(function(){varoptions={url:'/~hbhb/member/ajax_comment/nid/165',type:'post',data:null,success:function(data){data=$.parseJSON(data);if(data.statusCode=="true"){alert(data.descript);$(".nc-w

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論