PHP項目案例開發(fā)從入門到實戰(zhàn)-微課視頻版課件第章-前端技術(shù)_第1頁
PHP項目案例開發(fā)從入門到實戰(zhàn)-微課視頻版課件第章-前端技術(shù)_第2頁
PHP項目案例開發(fā)從入門到實戰(zhàn)-微課視頻版課件第章-前端技術(shù)_第3頁
PHP項目案例開發(fā)從入門到實戰(zhàn)-微課視頻版課件第章-前端技術(shù)_第4頁
PHP項目案例開發(fā)從入門到實戰(zhàn)-微課視頻版課件第章-前端技術(shù)_第5頁
已閱讀5頁，還剩61頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

21世紀高等學(xué)校計算機類課程創(chuàng)新規(guī)劃教材–微課視頻版PHP項目案例開發(fā)從入門到實戰(zhàn)馬石安魏文平清華大學(xué)出版社2020.10主要內(nèi)容本教材分為兩部分，共10章。第I篇項目準備第1章運行環(huán)境第2章前端技術(shù)第3章后端技術(shù)第4章PHP框架清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page2第2頁-馬石安2022/2/5/魏文平主要內(nèi)容第II篇項目案例第5章內(nèi)容管理系統(tǒng)第6章日程管理系統(tǒng)第7章在線課程系統(tǒng)第8章校園信息平臺第9章電子商務(wù)系統(tǒng)第10章在線辦公系統(tǒng)清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page3第3頁-馬石安2022/2/5/魏文平第2章前端技術(shù)2.1網(wǎng)頁設(shè)計2.2頁面元素操作2.3網(wǎng)頁事件處理2.4前端框架簡介清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page4第4頁-馬石安2022/2/5/魏文平2.1網(wǎng)頁設(shè)計1、網(wǎng)頁文檔對于PHP項目來說，網(wǎng)頁文檔就是指項目中的html或php文件。文檔結(jié)構(gòu)網(wǎng)頁文檔由HTML標簽、CSS樣式，以及JavaScript腳本代碼組成。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page5第5頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計HTML標記CSS樣式JavaScript代碼清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page6第6頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計基本語法HTML文檔是在普通文件中的文本上加上標記(或者稱為標簽)，使其達到預(yù)期的顯示效果，當瀏覽器打開一個HTML文檔時，會根據(jù)標記的含義顯示HTML文檔中的內(nèi)容。

標記HTML用于描述功能的符號稱為標記。例如,<html>、<div>等。標記通常分為雙標記和單標記兩種類型。雙標記由開始標簽和結(jié)束標簽構(gòu)成，必須成對出現(xiàn)。單標記是指標記單獨出現(xiàn)，只有開始標記而沒有結(jié)束標記。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page7第7頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計

屬性HTML可以為某些標記附加一些信息，這些附加信息被稱為屬性。通過屬性可以設(shè)置HTML元素更豐富的信息。例如：<divstyle=”color:red;”>PHP程序設(shè)計</div>其中，“style”為屬性名，“color:red;”為屬性值。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page8第8頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計

注釋注釋標記用于在HTML文檔中插入注釋。注釋內(nèi)容并不會在瀏覽器中顯示出來，它會被瀏覽器忽略。例如，對于下面的標簽：<!--注釋內(nèi)容-->清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page9第9頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計

HTML5語法變化為了兼容不統(tǒng)一的頁面文檔代碼，HTML5在語法方面做出了一些改變。

標簽不再區(qū)分大小寫

允許屬性值不使用引號例如，<inputtype=text/>中的“text”可以不使用引號。

允許部分屬性的屬性值省略例如，<inputtype=textreadonly有屬性名沒有屬性值。/>中的“readonly”只清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page10第10頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計2、網(wǎng)頁頁面布局所謂網(wǎng)頁頁面的布局，就是設(shè)計頁面的整體結(jié)構(gòu)。網(wǎng)頁布局的方式有很多，常用的有兩種，一種是使用表格(<table>)，另一種是使用div+css的方式，目前主要使用第2種方法來進行網(wǎng)頁布局。單列布局單列布局是指網(wǎng)頁的頭部、主體、底部位于網(wǎng)頁的同一列中。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page11第11頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page12第12頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計雙列布局雙列布局就是將網(wǎng)頁劃分為左、右兩個部分，分為左側(cè)固定、右側(cè)自適應(yīng)，或右側(cè)固定、左側(cè)自適應(yīng)等多種形式。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page13第13頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計三列布局三列布局就是將網(wǎng)頁劃分為左、中、右三個部分，其中左、右部分寬度固定，中間主體部分自適應(yīng)。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page14第14頁-馬石安2022/2/5/魏文平網(wǎng)頁設(shè)計3、網(wǎng)頁設(shè)計實例【例2.6】清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page15第15頁-馬石安2022/2/5/魏文平2.2頁面元素操作當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建網(wǎng)頁的文檔對象模型DOM。DOM是DocumentObjectModel的縮寫，其中的Document指HTML文檔。HTMLDOM定義了用于HTML的一系列標準對象，以及訪問和處理HTML文檔的標準方法。通過DOM，可以訪問到網(wǎng)頁中的所有HTML元素，連同它們所包含的文本和屬性。通過JavaScript對網(wǎng)頁中的元素進行訪問與操作，是Web前端開發(fā)的一項重要技術(shù)。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page16第16頁-馬石安2022/2/5/魏文平頁面操作1、HTMLDOM模型HTMLDOM模型被構(gòu)造為對象樹的形式。例如，對于下面的HTML文檔清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page17第17頁-馬石安2022/2/5/魏文平頁面操作清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page18第18頁-馬石安2022/2/5/魏文平頁面操作2、DOM操作對網(wǎng)頁元素的操作，就是對頁面DOM樹中對象的操作，這些操作主要包括：動態(tài)創(chuàng)建HTML元素、更改元素屬性、更改元素樣式，以及對網(wǎng)頁事件進行處理等。查找HTML元素通過JavaScript對網(wǎng)頁元素進行操作，首先必須找到該HTML元素。有多種方法來實現(xiàn)HTML元素的查找，例如，通過元素標簽名、通過元素id屬性值、通過元素類名等。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page19第19頁-馬石安2022/2/5/魏文平頁面操作(1)通過標簽名稱查找HTML元素通過調(diào)用document的getElementsByTagName()方法，可以非常方便地查找網(wǎng)頁中的所有該標簽元素，此方法返回一個對象數(shù)組。例如：varp=document.getElementsByTagName("p");表示查找網(wǎng)頁中所有的p標簽元素。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page20第20頁-馬石安2022/2/5/魏文平頁面操作在控制臺中輸入代碼查找到的結(jié)果集清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page21第21頁-馬石安2022/2/5/魏文平頁面操作(2)通過id查找HTML元素如果HTML元素具有ID屬性，則可以通過調(diào)用document的getElementById()方法來查找到該HTML元素，此方法返回一個HTMLDOM對象。例如：varelement=document.getElementById("main");表示查找ID為main的HTML元素。若元素存在，則以對象的形式返回該元素；否則返回null。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page22第22頁-馬石安2022/2/5/魏文平頁面操作(3)通過類名查找HTML元素通過調(diào)用document的getElementsByClassName()方法，查找網(wǎng)頁中的所有具有該類的HTML元素，此方法返回一個對象數(shù)組。例如：varnav=document.getElementsByClassName("nav");表示查找網(wǎng)頁中所有的類屬性值為nav的HTML元素。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page23第23頁-馬石安2022/2/5/魏文平頁面操作(4)通過CSS選擇器查找HTML元素通過調(diào)用document的querySelector()、querySelectorAll()方法，可以使用CSS選擇器來查找網(wǎng)頁中的HTML元素。第一個方法返回一個HTMLDOM對象，第二個方法返回所有查找到的對象。例如：document.querySelector("li");//語句1document.querySelectorAll("li");//語句2語句1返回查找到的第一個HTML元素；語句2返回查找到的所有的HTML元素。如圖2.10所示。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page24第24頁-馬石安2022/2/5/魏文平頁面操作清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page25第25頁-馬石安2022/2/5/魏文平頁面操作查詢HTML元素HTML元素在DOM對象樹中稱為元素節(jié)點，除了元素節(jié)點外，還有屬性節(jié)點、文本節(jié)點等。節(jié)點一般具有節(jié)點類型、節(jié)點名稱和節(jié)點的值等屬性。對于如下所示的HTML代碼：<h1id="title"style="color:red">PHP項目實踐與課程設(shè)計指導(dǎo)</h1>元素節(jié)點為H1；屬性節(jié)點為id和style；文本結(jié)點為#text，它的值為“PHP項目實踐與課程設(shè)計指導(dǎo)”。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page26第26頁-馬石安2022/2/5/魏文平頁面操作元素節(jié)點清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page27第27頁-馬石安2022/2/5/魏文平頁面操作屬性節(jié)點清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page28第28頁-馬石安2022/2/5/魏文平頁面操作文本節(jié)點清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page29第29頁-馬石安2022/2/5/魏文平頁面操作改變HTML元素內(nèi)容修改HTML元素內(nèi)容的最簡單的方法，就是使用元素的innerHTML屬性。例如：document.getElementsByTagName("h1")[0].innerHTML="面向?qū)ο蟪绦蛟O(shè)計"可以將教材圖2.10所示的頁面中的“PHP項目實踐與課程設(shè)計指導(dǎo)”文本更改為“面向?qū)ο蟪绦蛟O(shè)計”。注意，通過標簽查找h1元素，返回的是一個對象數(shù)組。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page30第30頁-馬石安2022/2/5/魏文平頁面操作改變HTML元素樣式修改HTML元素樣式，使用元素的style屬性。例如語句：document.getElementsByTagName("h1")[0].style.color="red"可以將教材圖2.10所示的頁面中的“PHP項目實踐與課程設(shè)計指導(dǎo)”文本顏色修改為紅色。也可以采用如下方式：h1.setAttribute('style','color:green')清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page31第31頁-馬石安2022/2/5/魏文平頁面操作創(chuàng)建新的HTML元素向HTMLDOM樹中添加新元素，必須首先創(chuàng)建該元素(元素節(jié)點)，然后再向一個已存在的元素追加元素?！纠?.8】通過JavaScript代碼，向如圖2.11所示的頁面代碼中添加一個li元素，該元素的文本為“出版時間：2020年12月”。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page32第32頁-馬石安2022/2/5/魏文平頁面操作移除HTML元素移除HTML文檔中的元素，使用document的removeChild()方法。例如，要刪除圖2.14中新增加的li元素，只需要在控制臺中執(zhí)行下面的語句即可。ul.removeChild(ul.childNodes[5])；注意，上述代碼中的ul為document.getElementsByTagName('ul')[0]的值。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page33第33頁-馬石安2022/2/5/魏文平2.3網(wǎng)頁事件處理事件是HTML文檔或者瀏覽器窗口中發(fā)生的特定的交互瞬間，它是用戶或瀏覽器自身執(zhí)行的某種動作。例如，鼠標單擊、頁面加載、窗口縮放等。事件是JavaScript與DOM交互的橋梁。事件發(fā)生后給出的響應(yīng)，就是事件處理。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page34第34頁-馬石安2022/2/5/魏文平清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page11第11頁-馬石安2022/2/5/魏文平清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page33第33頁-馬石安2022/2/5/魏文平是一種基于標準化并被廣泛支持的技術(shù)，不需要對于PHP項目來說，網(wǎng)頁文檔就是指項目中的html或中左、右部分寬度固定，中間主體部分自適應(yīng)。事件是JavaScript與DOM交互的橋梁。訪問和處理HTML文檔的標準方法。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page40第40頁-馬石安2022/2/5/魏文平清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page36第36頁-馬石安2022/2/5/魏文平14中新增加的li元素，只需要在控如，通過元素標簽名、通過元素id屬性值、通過元素10所示的頁面中的“PHP項目實踐與對于如下所示的HTML代碼：表單是web應(yīng)用程序與用戶交互的橋梁，是非常重要表示查找網(wǎng)頁中所有的類屬性值為nav的HTML元素。事件綁定1、事件綁定事件不能單獨存在，需要綁定到特定的元素對象上才能被感知。事件的綁定有3種方法，即標簽屬性、對象屬性、對象方法。標簽屬性直接將事件綁定到元素標簽上。例如，若需要在網(wǎng)頁中的h2元素上綁定鼠標左鍵單擊事件，則使用如下代碼：<h2onclick="alert('我被點擊了！')">PHP項目實踐與課程設(shè)計指導(dǎo)</h2>清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page35第35頁-馬石安2022/2/5/魏文平事件綁定對象屬性將事件作為對象屬性，綁定到元素對象上。例如，要實現(xiàn)上述1中的單擊事件的綁定，使用如下代碼：清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page36第36頁-馬石安2022/2/5/魏文平事件綁定對象方法使用對象的addEventListener()方法，來監(jiān)聽對象事件，從而實現(xiàn)事件的綁定。例如:清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page37第37頁-馬石安2022/2/5/魏文平事件綁定【例2.9】事件綁定示例。網(wǎng)頁中有3個li標簽，要求用3種方法分別將單擊事件綁定到標簽上。實例演示清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page38第38頁-馬石安2022/2/5/魏文平事件處理2、事件處理對事件的處理都是在回調(diào)函數(shù)中進行的，所以，只需要在回調(diào)函數(shù)中添加相應(yīng)的代碼，完成預(yù)定的處理功能即可。鼠標事件鼠標事件是在JavaScript頁面操作中使用最頻繁的事件，利用鼠標事件可以實現(xiàn)一些特殊的單擊和移動效果。如例2.10所示。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page39第39頁-馬石安2022/2/5/魏文平事件處理【例2.10】使用JavaScript代碼，實現(xiàn)水平菜單的展開與收縮。效果如圖所示。實例演示清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page40第40頁-馬石安2022/2/5/魏文平事件處理鍵盤事件鍵盤事件也是在網(wǎng)頁操作中使用頻繁的事件，利用該事件可以實現(xiàn)頁面的快捷操作。常見的鍵盤事件主要有onkeyup、onkeydown和onkeypress。【例2.11】鍵盤事件示例。示例功能描述：單擊鍵盤中的空格鍵，改變頁面中文本的顏色。實例演示清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page41第41頁-馬石安2022/2/5/魏文平事件處理表單事件表單是web應(yīng)用程序與用戶交互的橋梁，是非常重要的頁面元素。表單事件主要是對元素獲得或失去焦點、表單提交等動作進行控制?！纠?.12】表單事件示例。示例功能描述：對用戶輸入的數(shù)據(jù)進行驗證。實例演示清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page42第42頁-馬石安2022/2/5/魏文平事件處理事件對象在JavaScript中，事件對象用event表示。它代表了事件狀態(tài)，例如事件發(fā)生的元素、鍵盤狀態(tài)、鼠標位置和鼠標按鈕狀態(tài)等?！纠?.13】event對象應(yīng)用示例。實例演示清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page43第43頁-馬石安2022/2/5/魏文平AJAX技術(shù)3、AJAX技術(shù)AJAX是AsynchronousJavaScriptandXML的縮寫，意思是異步的JavaScript和XML。AJAX是一種運用于瀏覽器的技術(shù)，它可以在瀏覽器和服務(wù)器之間通過異步通信機制進行數(shù)據(jù)通信，從而允許瀏覽器向服務(wù)器獲取少量信息，而不是刷新整個頁面。常常被稱為無刷新技術(shù)。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page44第44頁-馬石安2022/2/5/魏文平AJAX技術(shù)技術(shù)優(yōu)點

減輕服務(wù)器的負擔AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度地減少冗余請求，從而減輕對服務(wù)器造成的負擔。

無刷新更新頁面減少用戶心理和實際等待時間，獲得良好的用戶體驗

減輕服務(wù)器和帶寬的負擔把部分服務(wù)器負擔的工作轉(zhuǎn)交給客戶端，利用客戶端閑置的能力來處理任務(wù)，從而減輕服務(wù)器和帶寬的負擔，節(jié)約空間和寬帶租用成本。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page45第45頁-馬石安2022/2/5/魏文平AJAX技術(shù)

可以調(diào)用外部數(shù)據(jù)

是一種基于標準化并被廣泛支持的技術(shù)，不需要下載插件等資源

進一步促進了Web頁面表現(xiàn)形式與數(shù)據(jù)的分離。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page46第46頁-馬石安2022/2/5/魏文平AJAX技術(shù)工作原理傳統(tǒng)的Web交互方式是“提交/等待/重新顯示”，用戶的動作總是與服務(wù)器處理同步，用戶在網(wǎng)頁上的操作轉(zhuǎn)化為HTTP請求傳回服務(wù)器，而服務(wù)器接受請求以及相關(guān)數(shù)據(jù)、解析數(shù)據(jù)并將其發(fā)送給相應(yīng)的處理單元后，將返回的數(shù)據(jù)轉(zhuǎn)成HTML頁面返還給用戶。而當服務(wù)器處理數(shù)據(jù)的時候，用戶只能等待，每一步操作都需要等待服務(wù)器返回新的網(wǎng)頁。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請求，應(yīng)用的響應(yīng)時間就依賴于服務(wù)器的響應(yīng)時間，這就導(dǎo)致了用戶頁面的響應(yīng)比本地應(yīng)用慢很多。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page47第47頁-馬石安2022/2/5/魏文平AJAX技術(shù)運用了AJAX技術(shù)的Web應(yīng)用，相當于在客戶端和服務(wù)器端之間添加了一個中間層，稱為AJAX引擎。它實現(xiàn)了瀏覽器與服務(wù)器進行異步交互的通信能力，從而使用戶從請求/響應(yīng)的循環(huán)中解脫出來。如下圖所示。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page48第48頁-馬石安2022/2/5/魏文平AJAX技術(shù)清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page49第49頁-馬石安2022/2/5/魏文平AJAX技術(shù)AJAX的XmlHttpRequest對象AJAX技術(shù)中的核心技術(shù)是XMLHttpRequest，它是一個具有應(yīng)用接口的JavaScript對象，能夠使用超文本傳輸協(xié)議HTTP連接一個服務(wù)器。通過XMLHttpRequest對象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進行數(shù)據(jù)層面的交換，而不用每次都刷新頁面。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page50第50頁-馬石安2022/2/5/魏文平AJAX技術(shù)【例2.14】使用AJAX驗證表單數(shù)據(jù)。問題描述：網(wǎng)站或其他Web應(yīng)用的用戶名都是唯一的，因此，在進行用戶注冊過程中，需要及時檢測用戶輸入的數(shù)據(jù)，提示用戶該用戶名是否已經(jīng)被注冊。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page51第51頁-馬石安2022/2/5/魏文平2.4前端框架簡介上面介紹的網(wǎng)頁設(shè)計、事件處理等，采用的都是原始的HTML5、CSS3和JavaScript前端技術(shù)。在實際的Web項目開發(fā)過程中，經(jīng)常使用的是由第3方開發(fā)的前端框架。例如jQuery、Bootstrap、Layui、Angular、React、Vue等。1、jQueryjQuery是一個JavaScript庫，也稱為JavaScript框架。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page52第52頁-馬石安2022/2/5/魏文平前端框架jQuery的加載

加載本地jQuery先將jQuery庫文件下載到本地，并將其復(fù)制到項目中。然后使用下面的代碼加載它。<scriptsrc="jquery/jquery-3.3.1.min.js"></script>

加載遠程jQuery很多大的互聯(lián)網(wǎng)公司都擁有自己的公共資源庫，這些公共資源庫中一般都存放有jQuery，可以直接在項目中加載它。如百度jquery1.6.4cdn引用地址為：清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page53第53頁-馬石安2022/2/5/魏文平前端框架基本語法jQuery語法是為HTML元素的選取編制的，可以對元素執(zhí)行某些操作。格式如下：$(selector).action()其中，美元符號$定義jQuery；選擇符（selector）“查詢”和“查找”HTML元素；jQuery的action()執(zhí)行對元素的操作。例如：$(this).hide()//隱藏當前元素$("p").hide()//隱藏所有段落$(".test").hide()//隱藏所有class="test"的元素$("#test").hide()//隱藏id="test"的元素清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page54第54頁-馬石安2022/2/5/魏文平前端框架常用方法jQuery的方法非常多，常用的有以下幾類：(1)遍歷DOM元素(2)創(chuàng)建DOM元素(3)添加元素到DOM結(jié)構(gòu)中(4)獲取和修改CSS及屬性(5)處理結(jié)果集(6)使用動畫及其他效果(7)處理事件(8)AJAX控制函數(shù)清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page55第55頁-馬石安2022/2/5/魏文平前端框架應(yīng)用實例【例2.15】使用jQuery創(chuàng)建折疊框式菜單。清華大學(xué)出版社–PHP項目案例開發(fā)從入門到實戰(zhàn)版權(quán)所有，未經(jīng)許可，不得復(fù)制Page56第56頁-馬石安2022/2/5/魏文平前端框架2、BootstrapBootstrap是由Twitter(著名的社交網(wǎng)站）推出的前端開源工具包，它基于HTML、CSS、

溫馨提示

  • 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)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論