前端课程总结.docx
- 文档编号:13971402
- 上传时间:2023-06-19
- 格式:DOCX
- 页数:25
- 大小:142.84KB
前端课程总结.docx
《前端课程总结.docx》由会员分享,可在线阅读,更多相关《前端课程总结.docx(25页珍藏版)》请在冰点文库上搜索。
前端课程总结
关于考试题型:
1、选择题(共30题,60分)
2、简答题(共4题,20分)
3、编程题(共2题,20分)
各章比例:
HTML5
1.发展史
2.谁在开发HTML5:
WHATWG、W3C、IETF
3.HTML5主要新功能:
语义化标签、表单控件、绘画canvas元素、媒介video和audio元素、本地离线存储的更好支持、地理位置、拖拽上传、多线程支持
4.HTML5的优势
解决扩浏览器问题、用户优先的原则、化繁为简p:
8
5.HTML5基本语法
DOCTYPEhtml>
script元素新增两个属性:
defer:
表示当前js文件会在页面渲染后加载
async:
表示异步加载和执行当前js文件
6.HTML5内容分组语义化
7.HTML5使用列表
无序列表ul
有序列表ol注意属性:
start、reversed、type
8.HTML5语义元素
可包含
、
元素、open属性
42;
9.HTML5多媒体
通用媒体属性:
autoplay自动播放、loop循环播放、controls显示或隐藏用户界面p:
27
跨浏览器问题
HTML5表单
1.新增input文本元素输入类型
search、tel、color、range、date、dateandtime、localtime、month、week
urlURL格式:
http:
//
email内容包含@,multiple属性,设定输入email用逗号”,”隔开
number属性:
max、min、step、value
2.新增表单属性p:
40
novalidate、autocomplete、enctype、required(填写输入域不能为空)、multiple、autofocus自动对焦、formnovalidate、placeholder输入框默认提示、list、pattern正则表达式
3.textarea
*标签对完整
*文本保留空格
属性:
autofocus、cols(列默认2)、rows(行)
wrap:
SOFT(默认)|HARD|(OFF)效果区别P38
4.datalist参考第一章,第8条
5.outputHTML5新增、用于不同类型的输出元素
可以和range元素结合使用for属性
JavaScript
1、JavaScript简介Netscape(网景)公司
组成部分:
ECMAScript:
描述了该语言的语法和基础对象;
DOM:
描述处理网页内容的方法和接口;
BOM:
描述与浏览器进行交互的方法和接口;
2、调试
1.console.log()
2.alert()、confirm()、prompt()
3.document.write()
3、JS基础语法
1.变量声明弱类型,使用var
2.六种数据类型
原始类型:
数值型字符串布尔型undefinednull
对象类型:
Object、String、Number、Boolean
1.”abcde”---->“edcha”
splitjoin(“”)
*JS字符串常用方法
3.运算符
(1)算数运算符
+-*/++--%
String--->number,number--->String,Boolean--->number,number--->boolean
(2)比较运算符
=====!
=!
==><>=<=
逻辑运算符
位运算符
(3)其它运算符
三目运算符:
new:
typeof:
in:
instanceof:
(4)流程控制
if(){}elseif(){}else{}
whiledo,dowhile
for,for..in
switchcase;
continue;
break;
三、JS对象(基于对象)
对象的基础属性和方法
重点!
!
!
1.创建一个对象P.61
(1)字面量
(2)newObject()自定义创建构造函数
(3)Object.create(obj);ECMAScript新版本
*原型链
2.操作对象p.64
(1)查看
obj.a;
obj["a"];引号不可以省去
(2)删除:
只是断开属性和对象的联系
deleteobj.a;
(3)检测
是否有自定义属性ainobj
obj.hasOwnProperty("a")
obj.propertyIsEnumerable("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();方法:
getMonth(),getDate(),getDay()
Math();*不能实例化构造函数方式创建对象*方法:
PI(),random()
RegExp();Error();
5.浏览器对象
BOMDOM
BOM核心对象window
DOM核心对象document
window对象包含了documentp.74区别,如何使用
BOM负责操作跟浏览器相关的内容
DOM用来操作跟HTML文档相关的内容
GetElmen
6.setTimeOut()、setInterval()
四、JS函数(也叫方法)
1.创建函数
functionname([param]){//函数声明
statements
}
varfunc=function[name]([param]){//函数表达式
statements
}
varfunc=newFunction(arg1,..argn,functionBody)//构造函数
2.调用函数、函数实例、this关键字(指当前对象)
3.匿名函数
4.局部变量、全局变量
js中查找变量值,从内-->外层次结构
四.JS事件(基于事件)
1.window事件:
onload、onunload
2.document事件:
onclick、ondblclick、onmousedown、onmouseup、onmousemove、onmouseover、onmouseout
事件绑定
3.处理事件:
标准、IE
JavaScript图形
1、canvas图形
1.属于原生标记默认矩形区域:
宽:
300px;高:
150px
2.
3.canvas坐标使用canvas元素加载2D渲染上下文来绘制
-----静态创建2D渲染上下文------
(1)html写入canvas元素
(2)js代码加载cavas并且获取2d引擎
varcanvas=document.getElementById("cav");
//获取2D引擎
varctx=canvas.getContext("2d");
-----动态创建2D渲染上下文------
window.onload=function(){
//动态创建一个canvas
varcanvas=document.createElement("canvas");
canvas.id="myCanvas";
canvas.width=1000;
canvas.height=1000;
document.body.appendChild(canvas);
varcontext=canvas.getContext("2d");
//渲染2D上下文操作画布
context.fillStyle="blue";
context.fillRect(0,0,200,300);
context.fill();
}
2、JS绘图绘制图形方式:
fill(填充)和stroke(绘制边框)
1.四个基本图形-矩形,线条,圆形,文本
填充颜色属性:
context.fillStyle=”rgb(255,0,0)”|”red”|”#FF0000”;
线条颜色属性:
context.strokeStyle=”rgb(255,0,0)”|”red”|”#FF0000”;
直线宽度属性:
context.lineWidth=”3”
开始绘制调用方法:
context.beginPath()
结束绘制调用方法:
context.closePath()
(1)绘制矩形
//先设定颜色样式,再绘图
context.strokeStyle=rgb(255,0,0)|"red"|"#FF0000";
//起始x坐标,起始y坐标,矩形宽度,矩形高度
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
(2)绘制直线步骤P92
closePath()效果
(3)绘制圆形p.92
//设置弧度参数x,y原点坐标radius半径startend是起始弧度shizhen////是顺时针还是逆时针
context.arc(x,y,radius,startAngle,endAngle,shizhen);
(4)绘制文本
对齐方式属性:
textAlign(水平方向)和textBaseline(垂直方向)
//实心
context.fillText(stringtext,intx,inty[,intmaxWidth]);
//空心
context.strokeText(stringtext,intx,inty[,intmaxWidth]);
2.使用图像操作需放在image.onload=function(){}事件里面
(1)绘制图像
context.drawImage(img,x,y)
(2)放大缩小图像
context.drawImage(img,x,y,width,height)
(3)平铺缩小图像
context.createPattern(img,type)//type:
no-repeat|repeat-x|repeat-y|no-repeat
(4)裁剪图像
context.drawImage(img,sx,sy,sw,sh,dx,dy,dx,dy,)
context.clip()
MongoDB
1.属于非关系型数据库,存储形式:
key-value
2.特点:
高性能、易部署、易使用,存储数据非常方便
3.适用于大数据量、高并发、弱事务的互联网应用;
不适用于要求高度事务性的系统、传统的商业智能系统、复杂的跨文档(表)级联查询
jQuery
一、JQuery是一个快速、体积小、功能丰富的JavaScript库
二、JQuery引入过程*jQuery分为压缩版本(min版本)和非压缩版本
1、下载JQuery库文件**.js到项目中,
在
标签中引入2、引用大型公司提供的CDN服务
--需要联网使用
三、JQuery语法:
$(selector).action()
四、常用方法:
1、$.map():
将一组数组转换成其他数组
2、$.each():
遍历对象或数组
3、document初始化方法:
$(document).ready(function(){})
$(function(){})
jQuery(function($){})
*window.onload(所有元素资源加载之后)与$(document).ready()(所有标签加载,但标签里面资源不一定会被加载)区别p.126
五、JQuery对象和DOM对象
--方法不能互用
1、JQuery对象-->DOM对象:
JQueryObject[index]或JQueryObject.get(index)
2、DOM对象-->JQuery对象:
vardomObj=document.getElementById("XX");
$('domObj')
六、强大的选择器
1、基本选择器:
P128、表6-2
2、层次选择器:
P129、表6-3
3、基本过滤:
P130、表6-4
4、内容过滤:
P130、表6-5
5、子元素过滤:
P131、表6-6
6、属性过滤:
P131、表6-7
7、表单属性过滤:
P132、表6-8*单选、复选、下拉菜单
--**注意空格
有空格时,空格后的选择符只匹配空格前的选择符的子元素;
没有空格时,只有完全匹配才可以;
七、DOM元素操作
1、元素创建:
$(html)**需要与元素插入搭配使用
2、元素插入:
P133、表6-9
3、元素删除:
remove()、empty()(文本删除)、detch()**三个方法区别
4、元素的包裹:
wrap()、wrapInner()、wrapAll()
5、元素的替代和复制:
replaceWith()、replaceAll()、clone()
6、遍历和筛选:
is()、find()、not()、andSelf()、children()、parent()、closest()、parents()、next()、nextAll()、prev()、prevAll()、siblings()
八、DOM属性操作
1、获取元素属性:
$(selector).attr("src")
设置元素属性:
$(selector).attr("src","logo.jpg")
删除元素属性:
$(selector).removAttr("src")
获取元素的value属性值:
$(selector).val()**返回第一个匹配的元素的value值
设置元素的value属性值:
$(selector).val("asd")
--**注意
JQuery1.6版本之后,当修改属性"checked"和"disabled"使用prop()方法
2、获取和设置元素内容:
html()、text()
3、获取和设置元素的CSS属性:
css()、addClass()、remoceClass()、hasClass()、togggleClass()
九、JQuery响应事件
1、鼠标键盘事件:
P144、表6-12
2、表单事件:
P145、表6-13
3、绑定事件:
on()**多次
one()**仅一次
4、移除事件:
off()
5、触发事件:
trigger()
6、自定义事件
基于jQuery的Ajax技术
一、Ajax异步请求原理
1.Ajax的工作原理:
P155~P156,图7-2
2.Ajax请求的生命周期:
1)创建并设置XMLHttpRequest对象
IE6创建ActiveXObject对象;
其他创建XMLHttpRequest对象;
2)发起请求
open([GET/POST],url,true)方法指定请求资源内容
onreadystatechange()事件监听请求状态
send(null)//GET请求状态|send('a=1&b=2')//POST请求状态
3)保持跟踪状态
onreadystatechange()状态中监听XMLHttpRequest实例化对象的readyState、status值内容
4)获取响应
readyState==4、status==200时,进行后续响应处理
二、Ajax方法
1.$.load():
从服务器请求加载内容
$.load(url,[data],[callback])
*成功后执行回调函数callback
2.$.getJSON():
从服务器加载json编码数据,GET请求
$.getJSON(url,[callback])
*成功后执行回调函数callback
3.$.getScript():
动态加载js文件,GET请求
$.getScript(url,[callback])
*成功后执行回调函数callback
4.$.get():
使用GET请求从服务器加载数据
$.get(url,[data],[callback],[type])
5.$.post():
使用POST请求从服务器加载数据
$.post(url,[data],[callback],[type])
6.表单序列化
$(selecter).serialize()//返回字符串
*serialize()方法中文乱码处理:
data=decodeURIComponent(data,true);
$(selecter).serializeArray()//返回JSON数组对象
7.$.ajax():
最核心的方法
$.ajax([options])
*options格式为key/value的对象
8.$.ajax()全局事件P176~P178
9.$.ajax()全局设定P178~P181
jQuery插件
一、插件:
通用的概念,实现了某种接口的程序模块
举例:
jquery插件:
继承了jquery的某些方法并对方法进行进一步的封装就可以直接使用。
二、编写jquery插件
****引入jQuery库
1、通过全局函数
//全局函数
$.函数名=function(){
/*处理内容*/
}
//多个全局函数
$.extend({
函数名1:
function(){
/*处理内容*/
},
函数名2:
function(){
/*处理内容*/
}
});
//调用
$.函数名();
2、通过$.fn()方法
因为是全局函数,因此上述方法无法利用强大的选择器
$.fn.函数名=function(){
/*处理内容*/
}
$(selector).函数名();
3.让插件接收参数
$.fn.函数名=function(参数){
/*处理内容*/
}
$(selector).函数名(参数);
三、使用别的团队开发好的插件
1、搜索jquery插件
官网插件
优点:
品质高,评级高,实例全,文档全,一直有人维护更新修复bug
下载:
包含了一些css和js
注意:
引入插件必须先引入jquery然后是插件的css和js
2、常用插件
jquery-ui,easyUI
3、使用插件步骤
下载
引入:
官网查询文档:
使用:
日期:
$("#datepicker").datepicker();
使用Ajax和jQueryMobile
jQuery和CSS3动画特效
一、显示和隐藏特效
show(duration,[callback]);显示特效
hide(duration,[callback]);隐藏特效
toggle(duration,[callback]);切换特效
二、淡入和淡出特效
fadeIn(duration,[callback]);淡入特效
fadeOut(duration,[callback]);淡出特效
fadeTo(duration,opacity,[callback]);透明特效
**可以结合setInterval()方法实现图片连播效果
三、滑动特效
slideUp(duration,[callback]);向上滑动特效
slideDown(duration,[callback]);向下滑动特效
slideToggle(duration,[callback]);滑动切换特效
四、自定义动画
animate(properties,[duration],[easing],[callback]);
五、动画队列:
动画以队列(FIFO)形式执行
1、queue:
显示或操作在匹配元素上执行的函数队列
全局:
$.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 课程 总结
![提示](https://static.bingdoc.com/images/bang_tan.gif)