前端復(fù)習(xí)知識點

1、第一章：考試題型：選擇題*2，簡答題*1l HTML5的優(yōu)勢l 對于瀏覽器，尤其是IE瀏覽器支持的情況l HTML5內(nèi)容分組中新增的元素、語義元素和多媒體元素（了解標(biāo)簽元素名稱，以及基本的屬性及作用）第二章：考試題型：選擇題*2l 新增的表單屬性，掌握屬性的含義和作用第三章：考試題型：選擇題*7，簡答題*1，編程題*1l JavaScript的作用l 頁面中插入JavaScript的方法，<script>標(biāo)簽放置的位置，引入外部JS文件的格式l 基本語法，聲明變量的方法、規(guī)則；l JavaScript六種數(shù)據(jù)類型l JavaScript運算符以及數(shù)據(jù)類型的隱式轉(zhuǎn)換，typeof運算

2、符、instanceof運算符l 三目運算符（三元運算符）的語法，了解三元運算符如何進行判斷執(zhí)行。l 創(chuàng)建對象的三種方法，查詢和設(shè)置對象的屬性l JavaScript數(shù)組，l 創(chuàng)建函數(shù)的三種方式l JS綁定事件的幾種方式、setTimeout()和setInterval()的區(qū)別l window事件onLoad();l 鼠標(biāo)事件onclick();l 鍵盤事件onKeydown();第四章：考試題型：選擇題*3l 默認(rèn)大小300*150。屬性height、width設(shè)置畫布大小。l 四個基本圖形-線條，文本，圓形，矩形l 使用canvas元素加載2d引擎來繪制（1）html-5寫入cavas元

3、素<canvas id="cav"></canvas>（2）js代碼加載cavas并且獲取2d引擎var canvas=document.getElementById("cav");/獲取2D引擎var ctx=canvas.getContext("2d");（3）繪制直線/繪制線條 ctx.beginPath();/兩點確定一直線ctx.moveTo(40,40);ctx.lineTo(50,100);ctx.closePath();/stroke繪制邊界 fill填充內(nèi)容ctx.stroke();（4）繪制

4、文本/設(shè)置字體的大小 字體ctx.font="40px Arial"/實心ctx.beginPath();ctx.fillText("Hello world",0,50);/空心ctx.strokeText("Hello world",100,50);ctx.closePath();（5）繪制矩形ctx.beginPath();ctx.fillRect(10,10,50,50);ctx.strokeRect(10,10,50,50);ctx.close();（6）繪制圓形/開始計算路徑ctx.beginPath();/設(shè)置弧度參數(shù) x

5、,y原點坐標(biāo) radius半徑 start end是起始弧度 shizhen/ /是順時針還是逆時針ctx.arc(x,y,radius,startAngle,endAngle,shizhen);/結(jié)束計算路徑ctx.closePath();/繪制ctx.fill();（7）通用/開始繪制調(diào)用ctx.beginPath();/結(jié)束繪制調(diào)用ctx.closePath();/填充顏色ctx.fillStyle="red"ctx.fillStyle="#ffffff"ctx.fillStyle="rgb(2,2,2)"fill();/輪廓顏

6、色ctx.strokeStyle="red"ctx.strokeStyle="#ffffff"ctx.strokeStyle="rgb(2,2,2)"stroke();兩種方式 fill填充 stroke繪制邊框第五章：考試題型：選擇題*1l MongoDB是一個高性能、開源、面向文檔存儲的數(shù)據(jù)庫。使用C+開發(fā)，開源。l MongoDB優(yōu)勢查詢速度快高并發(fā)?？梢赃_到2萬個并發(fā)高容量。支持10TB以上都數(shù)據(jù)量l 適用場合網(wǎng)站數(shù)據(jù)緩存大尺寸，低價值的數(shù)據(jù)高伸縮性的場景用于對象及JSON數(shù)據(jù)的存儲l 劣勢高度事務(wù)性的系統(tǒng)商業(yè)智能系統(tǒng)跨文檔（

7、表）級聯(lián)查詢第六章：考試題型：選擇題*4，簡答題*1，編程題*1l jQuery是一個JavaScript庫，最流行的JavaScript框架l 引入jQuery庫：方法2種l 語法：$(selector).action()l $(document).ready(function()l 簡寫：$( function()l 和window.onload事件的區(qū)別。表格P126l $.each()方法l jQuery對象到DOM對象轉(zhuǎn)換方法l 選擇器有哪些？舉例l DOM操作元素和屬性的方法l remove()、empty()、detach()區(qū)別（P133）l 事件鼠標(biāo)事件、鍵盤事件、表單事件l

8、 綁定on和移除off事件第七章：考試題型：選擇題*2，簡答題*1，編程題*1l 簡介ajax 異步通訊不刷新網(wǎng)頁就能從服務(wù)端讀取數(shù)據(jù)良好的用戶體驗js ajax引擎l Ajax異步請求原理（1）客戶端瀏覽器運行時加載Ajax引擎（2）Ajax引擎創(chuàng)建一個異步調(diào)用的對象（3）向服務(wù)器發(fā)送HTTP請求（4）服務(wù)器處理請求，并以xml形式返回結(jié)果（5）Ajax引擎接收返回結(jié)果（6）通過JavaScript顯示在瀏覽器上l Ajax請求的生命周期（1）創(chuàng)建并設(shè)置XMLHttpRequest對象var xhr = new XMLHttpRequest();（2）發(fā)起請求GET:xhr.open(

9、9;get','AjaxServlet',true);xhr.send(null)POST:xhr.open('post','AjaxServlet',true);注意：*POST方式必須設(shè)置setRequestHeader，否則后臺無法接收傳過去的值xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send('name=zhangsan&age=18');（3）保持跟蹤狀

10、態(tài)xhr.readyState表示服務(wù)器對當(dāng)前請求的處理狀態(tài)（5種）:0、1、2、3、4xhr.status表示服務(wù)器HTTP響應(yīng)狀態(tài):200、404、500。xhr.onreadystatechange = function () if (xhr.readyState = 4) if (xhr.status = 200) /請求成功處理響應(yīng)數(shù)據(jù) else /錯誤處理 （4）獲取響應(yīng)xhr.responseTextxhr.responseXMLl jQuery Ajax方法l $(selector).load(url,data,callback)l （2）JSON格式l JSON字符串轉(zhuǎn)換為J

11、SON對象：<1>eval方法：注意字符串以花括號始終的，需要加圓括號，轉(zhuǎn)換成對象，否則將按語句執(zhí)行<2>JSON.parse方法例如： var jsonObj3 = JSON.parse('');l JSON對象轉(zhuǎn)換為JSON字符串：JSON.stringify方法：例如： var str = JSON.stringify("name":zhangsan,"age":18);（3）$.getJSON(url,data,callback)參數(shù)： url:發(fā)送請求地址。data:待發(fā)送 Key/value 參數(shù)。ca

12、llback:載入成功時回調(diào)函數(shù)。例如：$.getJSON("t1.json",function(data) $.each(data,function(key,value) alert(key+" is "+value); ) );（4）$.getScript(url,callback)參數(shù)： url:待載入 JS 文件地址。callback:成功載入后回調(diào)函數(shù)。（5）$.post(url,data,callback,type)參數(shù)： url:發(fā)送請求地址。data:待發(fā)送 Key/value 參數(shù)。callback:發(fā)送成功時回調(diào)函數(shù)。type:返回內(nèi)

13、容格式，xml, html, script, json, text, _default。例如：$.post("http:/localhost:8080/TestAjax/ajax", name: "sansan", age: 24, function (r) alert(r); )（6）$.get(url,data,callback,type)參數(shù)： url:待載入頁面的URL地址。data:待發(fā)送 Key/value 參數(shù)。callback:載入成功時回調(diào)函數(shù)。type:返回內(nèi)容格式，xml, html, script, json, text, _de

14、fault例如：$.get("http:/localhost:8080/TestAjax/ajax", name: "sansan", age: 24, function (r) alert(r); )（7）表單序列化方法<1>var str = $(selector).serialize()“a=1&b=2&c=3”<2>var array = $(selector).serializeArray()遍歷數(shù)組對象注意：不能被序列化的元素（8）$.Ajax(url,options)例如：$.ajax( url:&q

15、uot;http:/localhost:8080/TestAjax/ajax", method:"GET", data:name:"sansan", success:function(r) alert(r); )第八章：考試題型：選擇題*2l 插件的概念l 編寫插件的兩種方式第九章：考試題型：選擇題*2l 1.初始配置：注意順序<!-引入jQuery Mobile-><script src="js/jquery-2.1.4.js"></script><link rel="s

16、tylesheet" href="js/jquery.mobile-1.4.5.min.css" /><script src="js/jquery.mobile-1.4.5.min.js"></script>l 2.頁面基礎(chǔ)<div data-role="page" id="pageone"><div data-role="header"><h1>在此處插入標(biāo)題</h1></div><div

17、 data-role="content"><p>在此處插入正文</p></div><div data-role="footer"><h1>在此處插入頁腳文本</h1></div></div>data-role="page" 是顯示在瀏覽器中的頁面data-role="header" 創(chuàng)建頁面上方的工具欄（常用于標(biāo)題和搜索按鈕）data-role="content"定義頁面的內(nèi)容，比如文本、圖像、

18、表單和按鈕，等等data-role="footer" 創(chuàng)建頁面底部的工具欄l 四.對話框、按鈕 -對話框- <a href="#pagetwo" data-rel="dialog">打開對話框</a>-按鈕-jQuery Mobile 中的content里按鈕可通過三種方法創(chuàng)建：（1）使用 <button> 元素：<button>按鈕2</button>（2）使用 <input> 元素：<input type="button" value

19、="按鈕1">（3）使用 data-role="button" 的<a> 元素： <a href="#" data-role="button">按鈕3</a>五、jQuery Mobile 主題jQuery Mobile 提供了五種不同的樣式主題，從 "a" 到 "e" - 每種主題帶有不同顏色的按鈕、欄、內(nèi)容塊，等等.<div data-role="page" data-theme="a|b|c|

20、d|e">六、jQuery Mobile 事件除了常用的jQuery Mobile提供了常見的觸屏事件處理機制，常見的事件有觸摸事件、按住不放事件、向左/右滑動事件，我們就可以將事件處理函數(shù)綁定到DOM元素上。第十章：考試題型：選擇題*5，編程題*1l jQuery 常用特效1、顯示、隱藏特效（1）$(selector).show(duration,callback)（2）$(selector).hide(duration,callback)（3）$(selector).toggle(duration,callback)2、淡入、淡出特效（圖片幻燈片效果Code）P247頁（1）$(selector).fadeIn(duration,callback)（2）$(selector).fadeOut(duration,callback)（3）$(selector).fadeTo(duration,opacity,callback)3、滑動特效（1）$(selector).slideDow