1.面向对象:面向对象思想有三大要素:封装、继承和多态。
2.什么是ajax
基于XHTML 和 css标准表示
使用Document Object Model 进行动态的交互
使用XMLHttpRequest与服务器进行异步的交互
js可以绑定一切
3.创建ajax的过程?
创建XMLHttpRequest对象,也是创建一个异步调用的对象
创建一个新的HTTp请求,并指定改HTTp请求的方法,url以及验证信息
设置响应的HTTP状态变化的函数
发送HTTp请求
获取异步调用返回的数据
使用javascript 和 DOM 实现局部刷新
4.箭头函数: 保证this的指向,在创建的时候就确定了
字符串模板: 支持多行
解构赋值 :
let a=1;
let b=2;
[a,b]=[b,a];
({a,b}={a:1,b:2})
[a,b]=[1,2];
{ // 模拟json数据
let metaData = {
title: 'abc',
test: [{
title: 'test',
desc: 'descrption'
}]
}
let {title: esTitle, test: [{title: cnTitle}]} = metaData;
console.log(esTitle, cnTitle);
}
5.获取cookies
if (getCookie('left')) {
oDiv.style.left = getCookie('left') + 'px';
oDiv.style.top = getCookie('top') + 'px';
}
设置cookies
// 设置cookie
setCookie('left',disX,7);
setCookie('top',disY,7);
6.ajax的请求数据
ajax('豆瓣.json'?act=add&user=ww&t='+Math.random(),function (data) { // t是随机因子 var json = eval('('+data+')'); // parse更加安全 console.log(json.image); oImg.src = json.image; },function (err) { console.log(err); }); ajax({ url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data: {wd: 'a',cb: 'show'},
success: function (str) {
alert(str);
}
});
7.创建ajax对象 (判断是否存在请求头) –> 连接服务器 (‘请求方式’,url,true) –> 发送请求 –> 接收 onreadysatechange –> 状态是否为4 –> 状态码是否成功的 –> 成功的回调 (失败的回调)
8.跨域请求数据: 定义一个变量src等于接口+ this.value –> 手动创建一个script(document.createElement(‘标签名’)) –> 添加到head里面(appendChild) –> oScript.src = src; –> 设置一个全局函数show 接收 function(str) { var arr = str.s} , 设置ul的内容为空 , 循环创建 li标签 –> 赋值li标签 –> 添加进入到ul;
9.jsonp:
1.先把接口放到浏览器里面测试
2.手动写script标签
3.先全局的返回函数
4.解析数据
5.用完就移除
10.只要是使用new Person()创建对象,做了以下几件事件:
1.自动帮我们在函数里面new 了 Object
2.将创建的对象的值 赋值给了this
3.return this
11.有关方法继承问题:
子构造函数.prototype = new 父构造函数();
子构造函数.prototype.constructor = 子构造函数;
12.原型+构造函数创建
构造函数?
1.自动创建了一个对象obj
2.把obj赋值给了this
3.返回了this
封装继承多态
继承属性: 改变this的指向
父构造函数.call(this,形参对应的实参)
父构造函数.apply(this,arguments)
继承方法:
子构造函数.prototype = new 父构造函数();
子构造函数.prototype.constructor = 子构造函数
子弹: 和飞机的属性和init都有
13.jquery
css(属性名,属性值): 设置一个属性
css({属性名: 属性值,属性名: 属性值}): 设置多个属性
获取:
css(属性名)
双标签的内容: (相当于innerHTML)
html(): 没有参数,获取
html(内容): 设置
表单元素的内容: (相当于value)
val(): 没有参数,获取
val(内容): 设置
14.属性选择器:
选择器名[属性名=属性值]
index(): 获取同级元素的下标
类名:
addClass(类名): 添加类名
removeClass(类名): 删除类名
15.toggle开关,hover鼠标移入移出
toggle(function () {},function (){})
hover(function () {
鼠标移入的时候执行
},function (){
鼠标移出的时候执行
})
带有动画的方法:
slideDown(): 下拉
slideUp(): 上拉
fadeIn(): 淡入 (显示)
fadeOut(): 淡出(隐藏)
16.动画:
animate(params,[speed],[easing],[fn]): 常用
params: 必需参数,带[]的参数,是可选参数,可有可无,顺序不限
params: 属性对象 {属性名: 属性值}
speed: 动画时间 slow normal fast 数字: 单位是毫秒
easing: 速率 linear swing
fn: 动画完成以后执行的函数 (回调函数)
17.移除事件
off(事件名,事件函数) removeEvent
off(事件名): 移除该事件名的事件
off(): 移除所有
18.事件委托:
给父级元素添加事件,通过事件对象的srcElement|| target实现对应的操作
$(父元素的选择器).on(事件名,子元素的选择器名,fn);
19.向上滚动的距离
scrollTop(): 获取
$(document).scrollTop()
scrollTop(值): 设置滚动距离
20.offset(): 相当于我们原来的getPos()
$(‘div’).offset().left
21.动画:
animate({属性名,属性值},fn)
22.伪类选择器:
:nth-child(): 从1开始
:first-child:
:last-child:
:odd
:even
:gt(大于)
:lt(小于)
:eq(): 从0开始
23.开始动画以前,一定要先写stop()
24.标签属性:
oDiv.属性名= 属性值;
attr(属性名): 获取属性 getAttribute()
attr(属性名,属性值): 设置一个属性
attr({属性名: 属性值}): 设置多个属性 setAttribute()
removeAttr(属性名): 删除属性
25.遍历:
如果是标签元素的遍历:
$('li').each(function (index,ele) {});
如果是js数据类型的遍历:
$.each(遍历的数据,function (index,ele){});
json对象
$.each(遍历的数据,function(key,value) {});
26.删除元素:
remove(): 删除所有,包括本身 (直接删除自己)
empty(): 删除所有的子元素
children(): 所有的子元素 (js的children) parent(): 父元素 (js: parentNode) siblings(): 所有的兄弟 事件对象: 不需要进行兼容,直接用,pageX,pageY也不需要兼容
27.取消冒泡:
return false: 也可以取消冒泡;
evt.stopPropagation(): 可以取消冒泡
28.接口
get,post的区别:
1.get参数直接拼接在url地址后面,post的参数在url里面看不见
2.get只能发送4kb的数据,post能发送1G
3.post发送请求的时候,需要设置请求头
4.get在send里面不需要参数,post需要参数 (get?后面的内容)
5.get有缓存,post没有缓存
缓存: 一个url地址只请求一次;
解决缓存问题: 加随机因子: t=Math.random() (当前时间 oDate)
29.自己封装:
ajax({
url: url地址,
type: 请求的类型,(默认是GET)
data: ?后面的参数,
success: function (str) {
var json = eval('('+str+')');
},
error: function () {
数据请求失败的回调函数
},
});
30.jsonp: 跨域取数据!
json和jsonp的区别?
json是目的,jsonp是手段;
json是一种数据类型;jsonp是数据的处理方式;
jq的交互:
$.ajax({
url:,
data:,
type:,
async: true,
success:,
error:,
cache: false(不缓存,true为需要缓存),
timeout: 毫秒数 (网络超时),
complete: function () {} (交互完成,无论数据请求成功,或者失败,都走complete)
})
31.4.json: 直接返回的数据就是json
$.ajax({
url:,
data:,
type:,
dataType: 'jsonp',
jsonp:'callback'(默认值),
success:function (str) {
str字符串
},
error:,
cache: false(不缓存,true为需要缓存),
timeout: 毫秒数 (网络超时),
complete: function () {} (交互完成,无论数据请求成功,或者失败,都走complete)
})
32.webpack 四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。
33.- 全局安装: npm install -g webpack
- 新建一个项目目录
- npm init -y
- 本地安装webpack : npm install -D webpack
- 在项目目录根目录下,新建一个文件: webpack.config.js
34.## webpack 的配置选项
- entry : 字符串, - output: 对象 - path: 字符串: 你要输出的目标文件的路径文件夹 - filename: 字符串: 你要输出的目标文件名 - module : 处理各种各样的loader - rules: [{},{}] - test : 匹配模式 - use: 获取匹配后的文件,运用哪个loader进行处理, 从右往左执行 - exclude : 排除某一些文件夹 - plugins : 处理各种插件: 数组
35.## 安装Gulp
- 全局安装: npm install -g gulp - 创建package.json : npm init -y - 本地安装: npm install -D gulp - 在根目录里新建一个叫做gulpfile.js的文件.
- gulp.task : 执行某一项任务 - 任务名称 - 任务的依赖数组 - 任务执行的操作
- gulp.src : - 读入操作, 把文件读入到内存流中 - 生产环境文件夹目录: dist, assets, build - 如果参数输入的是数组,则必须满足所有数组中的匹配项,才可以.
- gulp.dest : - 输出操作, 通过gulp的流管道, 将文件流输出到新的路径中. - 路径地址, 只能到文件夹, 不能到具体的文件. - gulp.watch