前端总结1214.docx
- 文档编号:30770480
- 上传时间:2023-08-23
- 格式:DOCX
- 页数:32
- 大小:28.26KB
前端总结1214.docx
《前端总结1214.docx》由会员分享,可在线阅读,更多相关《前端总结1214.docx(32页珍藏版)》请在冰豆网上搜索。
前端总结1214
考试:
试卷结构
1、选择30个(60分)
2、简答4个(20分)HTML5、JS、jQuery、AJAX
3、编程2个(20分)JS、jQuery、jQuery动画Code
Chapter1HTML5
1、HTML5介绍
发展史
开发组织
新增功能
2、HTML5优势(简答)
解决跨浏览器问题
用户优先的原则
化繁为简的优势:
化繁为简的体现方面
3、基本语法
(1)新的DOCTYPE
DOCTYPEhtml>
(2)新的字符编码
(3)引入链接和样式表
script元素新增属性:
defer属性表示当前js文件会在页面渲染后加载
async属性表示异步(并行)的加载和执行当前js文件
(4)标签向后兼容性
4、HTML5内容分组
1、语义化
header、footer、address、article、article、nav、section、
hr、blockquote、aside、hgroup、a
含义?
?
?
2、大纲文档
结构元素和非结构元素?
?
?
5、使用列表
无序列表:
ulli
有序列表:
olli
start属性、reversed、type属性
6、HTML5语义元素
rubyrt、small、time、details、progress
datalistoption、meter、mark
figurefigcaption
7、HTML5多媒体
audio
videotype属性设置视频格式
Chapter2HTML5表单
(1)input
HTML5新增输入元素:
search
tel
url:
http:
//不能省
number
color
range(代码)
时间和日期(date、month、week、datetime-local、time)
HTML5新增输入属性:
autocomplete默认是on
required
mutiple:
email用逗号隔开;file
autofocus
formnovalidate
placeholder
list
pattern
(2)output
(3)textarea属性要熟悉
内容直接表现出来,不能用单闭合标签。
cols字节数
rows默认为2行
wrap默认SOFT、HARD
(4)datalist
Chapter3JavaScript
一.JS基础语法
1.变量声明
2.六种数据类型
原始类型:
数值型字符串布尔型undefinednull
对象类型
3.运算符
(1)算数运算符(隐式转换)
+-*/++--%
(2)比较运算符
=====!
=!
==><>=<=
逻辑运算符
位运算符
(3)其它运算符
三目运算符:
new:
typeof:
in:
instanceof:
(4)流程控制
if(){}elseif(){}else{}
whiledowhile
switchcase;
continue;
break;
--JS用浏览器调试
二.JS对象(基于对象)
对象的基础属性和方法
1.创建一个对象
(1)字面量
(2)newObject()自定义创建(代码)
(3)Object.create(obj);ECMAScript新版本
原型链
2.操作对象
查看
obj.a;
obj["a"];
obj.att
obj[“att”]
obj[“a”+”t”+”t”]表达式
删除:
只是断开属性和对象的联系
deleteobj.a;
检测
是否有自定义属性ainobjhasOwnProperty("a")
枚举对象属性for(in)遍历
for(varaainobj){
console.log(aa);
console.log(obj[aa]);
}
3.数组对象
数组里面元素的数据类型可以不一致
vararray=[1,2,3];
vararray=newArray(1,2,3);
访问array[0]下标从0开始
循环
for(varainarray){
//a是下标不是值
console.log(array[a]);
}
4.内置对象
Date
Math属性、方法
JSON
5.浏览器对象
BOMDOM
BOM核心对象window
DOM核心对象document
window对象包含了document
BOM负责操作跟浏览器相关的内容
DOM用来操作跟HTML文档相关的内容
三.JS函数(也叫方法)
1.创建函数
函数声明
functionfangfa(arg1,arg2,....){
//代码体
returnarg1+arg2;
}
函数表达式
varfangfa=function(arg1,arg2,....){
//代码体
returnarg1+arg2;
}
构造函数
varfangfa=newFunction("arg1","arg2",....,"代码体returnarg1+arg2;")
//arg1,arg2也需要加引号
varreturn=fangfa(arg1,arg2....);
四.JS事件(基于事件)
1.window事件
onLoad();
2.鼠标事件
onclick();
3.键盘事件
onKeydown();
4.事件冒泡
5.setTimeout()和setInterval()
setInterval(函数,time)从载入后,每隔指定的时间就执行一次函数(循环执行),放控制函数外部。
setTimeout(函数,time)在载入后延迟指定时间后,去执行一次函数,次数是一次,放控制函数内部。
五、上机练习
1、字符串逆序输出(Code)
2、内置对象Date:
动态显示时间
getMonth()、getDate、getDay()
4、数组排序
5、原型链
functionPerson(){
}
Person.prototype.move=function(){alert(this.name+“移动”);}
Person.prototype.study=function(){alert(this.name+”学习”);}
functionStudent(name){
this.name=name;
}
Student.prototype.study=function(){alert(this.name+”学习”);}
Student.prototype=newPerson();
varst=newStudent(“张三丰”);
st.study();
st.move();
Chapter4JavaScript图形
大纲:
游戏运行原理:
让图像动起来
(1)绘制图形
图像的坐标大小形状颜色
(2)动起来
起始坐标移动路线
(3)时机
何时加载何时动起来。
游戏规则,谁的发明谁做主。
使用JS制作弹球小游戏
一.JS绘图
默认大小300*150。
属性height、width设置画布大小。
四个基本图形-线条,文本,圆形,矩形
使用canvas元素加载2d引擎来绘制
(1)html-5写入cavas元素
(2)js代码加载cavas并且获取2d引擎
varcanvas=document.getElementById("cav");
//获取2D引擎
varctx=canvas.getContext("2d");
(3)绘制直线
//绘制线条
ctx.beginPath();
//两点确定一直线
ctx.moveTo(40,40);
ctx.lineTo(50,100);
ctx.closePath();
//stroke绘制边界fill填充内容
ctx.stroke();
(4)绘制文本
//设置字体的大小字体
ctx.font="40pxArial";
//实心
ctx.beginPath();
ctx.fillText("Helloworld",0,50);
//空心
ctx.strokeText("Helloworld",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,y原点坐标radius半径startend是起始弧度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();
//轮廓颜色
ctx.strokeStyle="red";
ctx.strokeStyle="#ffffff";
ctx.strokeStyle="rgb(2,2,2)";
stroke();
两种方式fill填充stroke绘制边框
三.图形动起来
时机
1.间隔时间
//绘制圆形
ctx.fillStyle="red";
varx=0;
functionupdate(){
//清空画布
ctx.clearRect(0,0,1000,1000);
x+=5;
ctx.beginPath();
//设置弧度参数:
x,y原点坐标;radius半径;startend是起始弧度;方向,是顺时针(false)还是逆时针
ctx.arc(x,100,50,0,Math.PI*2,false);
//结束计算路径
ctx.closePath();
//绘制
ctx.fill();
}
动起来
setInterval(update,100);
2.鼠标或者键盘事件
//当window发生键盘keydown事件的时候调用JS的keydown方法
window.onkeydown=keydown;
functionkeydown(e){
if(e.keyCode==32){
update();
}
}
Chapter5MongoDB
1、MongoDB是一个高性能、开源、面向文档存储的数据库。
使用C++开发,开源。
2、MongoDB优势
查询速度快
高并发。
可以达到2万个并发
高容量。
支持10TB以上都数据量
3、适用场合
网站数据
缓存
大尺寸,低价值的数据
高伸缩性的场景
用于对象及JSON数据的存储
4、劣势
高度事务性的系统
商业智能系统
跨文档(表)级联查询
5、重要概念
安装:
程序启动方式
WindowsService方式
(1)数据库
每个数据库对应文件系统中的文件
>db//显示当前数据库对象
>showdbs//显示所有数据库对象
>usetest//切换到指定数据库
(2)文档(对象)
MongoDB中数据的基本单元,以BSON格式存储文档
BSON轻量性、可遍历性、高效性:
1、类似于json的Key-Value对
2、其优点是解释快、对网速的要求是更低
(3)集合
集合就是一组文档的组合
集合命令
>showcollections//显示数据库中的集合
>db.createCollection(‘users’)//创建集合
Chapter6jQuery
重在理解,练习代码
1、jQuery是一个JavaScript库,最流行的JavaScript框架
2、引入jQuery库:
方法2种
3、语法:
$(selector).action()
4、$(document).ready(function(){})
简写:
$(function(){})
和window.onload事件的区别。
表格P126
5、$.each()方法
6、jQuery对象到DOM对象转换方法
(1)下标访问
(2)get()
7、选择器有哪些?
举例
8、DOM操作元素和属性的方法
remove()、empty()、detach()区别(P133)
9、事件
鼠标事件、键盘事件、表单事件
绑定on和移除off事件
10、上机作业:
1、表格增加、删除、全选(Code)
2、人人微博文字字数动态变化(Code)
Chapter7Ajax
0、简介
ajax异步通讯
不刷新网页就能从服务端读取数据
良好的用户体验
jsajax引擎
思考:
扫码登录如何实现。
1、Ajax异步请求原理
(1)客户端浏览器运行时加载Ajax引擎
(2)Ajax引擎创建一个异步调用的对象
(3)向服务器发送HTTP请求
(4)服务器处理请求,并以xml形式返回结果
(5)Ajax引擎接收返回结果
(6)通过JavaScript显示在浏览器上
2、Ajax请求的生命周期
(1)创建并设置XMLHttpRequest对象
varxhr=newXMLHttpRequest();
例外:
IE6varxhr=newActiveXObject(Microsoft.XMLHTTP);
(2)发起请求
GET:
xhr.open('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)保持跟踪状态
xhr.readyState表示服务器对当前请求的处理状态(5种):
0、1、2、3、4
xhr.status表示服务器HTTP响应状态:
200、404、500。
。
。
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//请求成功处理响应数据
}else{
//错误处理
}
}
}
(4)获取响应
xhr.responseText
xhr.responseXML
3、jQueryAjax方法
(1)$(selector).load(url[,data][,callback])
url:
url跟随空格+选择器。
例如:
$("#myDiv").load("data/loadResource.html#proj2li:
first")
(2)JSON格式
语法:
值可以是:
****JSON字符串转换为JSON对象:
<1>eval方法:
注意字符串以花括号始终的,需要加圆括号,转换成对象,否则将按语句执行
例如:
varjsonObj1=eval('({"name":
zhangsan,"age":
18})');
varjsonObj2=eval('[{"name":
zhangsan,"age":
18},{"name":
lisi,"age":
20}]');
<2>JSON.parse方法
例如:
varjsonObj3=JSON.parse('{}');
****JSON字符串转换为JSON对象:
JSON.stringify方法:
例如:
varstr=JSON.stringify({"name":
zhangsan,"age":
18});
(3)$.getJSON(url[,data][,callback])
参数:
url:
发送请求地址。
data:
待发送Key/value参数。
callback:
载入成功时回调函数。
例如:
$.getJSON("t1.json",function(data){
$.each(data,function(key,value){
alert(key+"is"+value);
})
});
(4)$.getScript(url[,callback])
参数:
url:
待载入JS文件地址。
callback:
成功载入后回调函数。
注意:
****服务端使用eclipse或者myeclipse因为从idea到eclipse属于跨域访问因此在服务端需要添加代码
response.setHeader("Access-Control-Allow-Origin","*");
(5)$.post(url[,data][,callback][,type])
参数:
url:
发送请求地址。
data:
待发送Key/value参数。
callback:
发送成功时回调函数。
type:
返回内容格式,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,_default
例如:
$.get("http:
//localhost:
8080/TestAjax/ajax",
{name:
"sansan",age:
24},
function(r){
alert(r);
}
)
(7)表单序列化方法
<1>varstr=$(selector).serialize()
“a=1&b=2&c=3”
中文乱码问题:
代码?
?
?
<2>vararray=$(selector).serializeArray()
遍历数组对象
注意:
不能被序列化的元素
(8)$.Ajax(url[,options])
例如:
$.ajax({
url:
"http:
//localhost:
8080/TestAjax/ajax",
method:
"GET",
data:
{name:
"sansan"},
success:
function(r){
alert(r);
}
})
Chapter8插件
Jquery插件
一、概念
插件:
通用的概念,实现了某种接口的程序模块
举例:
1.eclipse插件=遵循eclipse提供的插件开发接口就可以在eclipse上安装并集成上去。
2.jquery插件继承了jquery的某些方法并对方法进行进一步的封装就可以直接使用。
二、编写一个简单的jquery插件
****引入jQuery核心库
1.通过全局函数
//1.全局函数
$.saySix=function(){
alert("Hello老炮(英文名six),主演冯小刚,第一次出演主角就或得了最佳男演员。
")
}
//多个全局函数
$.extend({
sayHello:
function(){
alert("Hello");
},
sayHi:
function(){
alert("hi");
}
});
$.saySix();
$.sayHello();
$.sayHi();
2.通过$.fn()方法
因为是全局函数,因此上述方法无法利用强大的选择器
$.fn.myLink=function(){
//这种方式声明的方法里面this指的就是通过选择器选中的对象
this.css("color","red");
}
$("p").myLink();
3.让插件接收参数
$.fn.myLink=function(color){
//这种方式声明的方法里面this指的就是通过选择器选中的对象
this.css("color",color);
}
$("p").myLink("blue");
三、使用别的团队开发好的插件
1.搜索jquery插件
官网插件http:
//plugins.jq
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 总结 1214