前端复习知识点_第1页
前端复习知识点_第2页
前端复习知识点_第3页
前端复习知识点_第4页
前端复习知识点_第5页
已阅读5页,还剩11页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论