前端复习知识点

1、第一章：考试题型：选择题*2，简答题*1l HTML5的优势l 对于浏览器，尤其是IE浏览器支持的情况l HTML5内容分组中新增的元素、语义元素和多媒体元素（了解标签元素名称，以及基本的属性及作用）第二章：考试题型：选择题*2l 新增的表单属性，掌握属性的含义和作用第三章：考试题型：选择题*7，简答题*1，编程题*1l JavaScript的作用l 页面中插入JavaScript的方法，<script>标签放置的位置，引入外部JS文件的格式l 基本语法，声明变量的方法、规则；l JavaScript六种数据类型l JavaScript运算符以及数据类型的隐式转换，typeof运算

2、符、instanceof运算符l 三目运算符（三元运算符）的语法，了解三元运算符如何进行判断执行。l 创建对象的三种方法，查询和设置对象的属性l JavaScript数组，l 创建函数的三种方式l JS绑定事件的几种方式、setTimeout()和setInterval()的区别l window事件onLoad();l 鼠标事件onclick();l 键盘事件onKeydown();第四章：考试题型：选择题*3l 默认大小300*150。属性height、width设置画布大小。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填充内容ctx.stroke();（4）绘制

4、文本/设置字体的大小 字体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();/设置弧度参数 x

5、,y原点坐标 radius半径 start end是起始弧度 shizhen/ /是顺时针还是逆时针ctx.arc(x,y,radius,startAngle,endAngle,shizhen);/结束计算路径ctx.closePath();/绘制ctx.fill();（7）通用/开始绘制调用ctx.beginPath();/结束绘制调用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是一个高性能、开源、面向文档存储的数据库。使用C+开发，开源。l MongoDB优势查询速度快高并发。可以达到2万个并发高容量。支持10TB以上都数据量l 适用场合网站数据缓存大尺寸，低价值的数据高伸缩性的场景用于对象及JSON数据的存储l 劣势高度事务性的系统商业智能系统跨文档（

7、表）级联查询第六章：考试题型：选择题*4，简答题*1，编程题*1l jQuery是一个JavaScript库，最流行的JavaScript框架l 引入jQuery库：方法2种l 语法：$(selector).action()l $(document).ready(function()l 简写：$( function()l 和window.onload事件的区别。表格P126l $.each()方法l jQuery对象到DOM对象转换方法l 选择器有哪些？举例l DOM操作元素和属性的方法l remove()、empty()、detach()区别（P133）l 事件鼠标事件、键盘事件、表单事件l

8、 绑定on和移除off事件第七章：考试题型：选择题*2，简答题*1，编程题*1l 简介ajax 异步通讯不刷新网页就能从服务端读取数据良好的用户体验js ajax引擎l Ajax异步请求原理（1）客户端浏览器运行时加载Ajax引擎（2）Ajax引擎创建一个异步调用的对象（3）向服务器发送HTTP请求（4）服务器处理请求，并以xml形式返回结果（5）Ajax引擎接收返回结果（6）通过JavaScript显示在浏览器上l Ajax请求的生命周期（1）创建并设置XMLHttpRequest对象var xhr = new XMLHttpRequest();（2）发起请求GET:xhr.open(

9、9;get','AjaxServlet',true);xhr.send(null)POST:xhr.open('post','AjaxServlet',true);注意：*POST方式必须设置setRequestHeader，否则后台无法接收传过去的值xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send('name=zhangsan&age=18');（3）保持跟踪状

10、态xhr.readyState表示服务器对当前请求的处理状态（5种）:0、1、2、3、4xhr.status表示服务器HTTP响应状态:200、404、500。xhr.onreadystatechange = function () if (xhr.readyState = 4) if (xhr.status = 200) /请求成功处理响应数据 else /错误处理 （4）获取响应xhr.responseTextxhr.responseXMLl jQuery Ajax方法l $(selector).load(url,data,callback)l （2）JSON格式l JSON字符串转换为J

11、SON对象：<1>eval方法：注意字符串以花括号始终的，需要加圆括号，转换成对象，否则将按语句执行<2>JSON.parse方法例如： var jsonObj3 = JSON.parse('');l JSON对象转换为JSON字符串：JSON.stringify方法：例如： var str = JSON.stringify("name":zhangsan,"age":18);（3）$.getJSON(url,data,callback)参数： url:发送请求地址。data:待发送 Key/value 参数。ca

12、llback:载入成功时回调函数。例如：$.getJSON("t1.json",function(data) $.each(data,function(key,value) alert(key+" is "+value); ) );（4）$.getScript(url,callback)参数： url:待载入 JS 文件地址。callback:成功载入后回调函数。（5）$.post(url,data,callback,type)参数： url:发送请求地址。data:待发送 Key/value 参数。callback:发送成功时回调函数。type:返回内

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)参数： url:待载入页面的URL地址。data:待发送 Key/value 参数。callback:载入成功时回调函数。type:返回内容格式，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()遍历数组对象注意：不能被序列化的元素（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.页面基础<div data-role="page" id="pageone"><div data-role="header"><h1>在此处插入标题</h1></div><div

17、 data-role="content"><p>在此处插入正文</p></div><div data-role="footer"><h1>在此处插入页脚文本</h1></div></div>data-role="page" 是显示在浏览器中的页面data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）data-role="content"定义页面的内容，比如文本、图像、

18、表单和按钮，等等data-role="footer" 创建页面底部的工具栏l 四.对话框、按钮 -对话框- <a href="#pagetwo" data-rel="dialog">打开对话框</a>-按钮-jQuery Mobile 中的content里按钮可通过三种方法创建：（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" - 每种主题带有不同颜色的按钮、栏、内容块，等等.<div data-role="page" data-theme="a|b|c|

20、d|e">六、jQuery Mobile 事件除了常用的jQuery Mobile提供了常见的触屏事件处理机制，常见的事件有触摸事件、按住不放事件、向左/右滑动事件，我们就可以将事件处理函数绑定到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