前端学习笔记
HTML
标签
a 标签
<a href="xxxx" target='_blank'></a> //新窗口打开 默认不打开新窗口
ul 标签
- type=‘disc’ : 实心圆
- type=‘circle’ : 空心圆
- type=‘square’ : 实心方块
- s
标签语义化
- 便于开发者 阅读 与维护
- 利于
seo搜索引擎优化 - 语义化兼容性(IE9）插件
html5shiv.js
条件注释
用法：
- 固定语法
- lt : 小于
- gt : 大于
- lte : 小于等于
- gte : 大于等于
<!-- [if lt IE 9]>
<h1> 您的版本过低</h1>
<![endif]-->
CSS
层叠样式优先级（优先级由低到高）
- 通用选择器：*{…} —————— 权重值 0
- 标签选择器：div{…} ——————权重值 1
- 类选择器 ：.con{…} —————— 权重值 10
- ID选择器： #box{…} ——————权重值 100
- 行内样式： < … style=’’ …"> —————— 权重值 1000
权重计算规则简记：范围越小越精准权重值就会越大（#box.con.div{…}）
文本属性
<style>
.p1{color:red} /*文本颜色*/
.p2{font-family: '华文中宋'} /*字体类型*/
.p1{font-size: 26px} /*字体大小*/
.p1{font-weight: bold} /*文字加粗*/
.p1{font-style: italic} /*文字倾斜*/
.p1{color:red}/*文本颜色*/
.p1{color:red}/*文本颜色*/
.p1{color:red}/*文本颜色*/
</style>
背景属性
<style>
background-color: gary; /*背景色*/
background-image: url(xxx/xx.png) /*背景图片*/
background-repeat: no-repeat; /*背景图片平铺方式*/
/*合并运用（可省略其中属性） 背景色 背景图片 平铺方式*/
background: gray url(xxx/xx.png) no-repeat;
background: url(xxx/xx.png) repeat-y;
background: #aaccbb;
</style>
动画
动画转换
- matrix () : 矩阵
- scale() : 缩放
- translate() : 位移
- rotate() : 旋转
- skew() : 倾斜
运动速度
- transition
- ease : 速度由快到慢，最后很慢
- linear : 匀速
- ease-in : 由慢到快 加速状态
- ease- out : 由快到慢 减速状态
- ease-in-out : 先加速再减速
以上 实质有 贝塞尔曲线而来
3D 转换 translate3d rotate3d
2d转换和3d转换的区别：
参数 多了一个 3d
手机一般有3d 渲染引擎（GPU）更快
JS
JS 组成
- ECMAScript
- BOM : 整个浏览器
- DOM ： document 文档 从 开始一直到结束
一种脚本语言
一种解释性语言
一种基于面向对象的语言
一种弱类型语言
一种动态类型语言
js 最初的目的 ：解决用户和服务器交互问题。
现在，，游戏 特效，移动端，数据库 ，图形处理等等。
- 面向对象
提出需求，找对象，对象解决，注重结果。
封装，继承，多态（抽象性）
- 实列对象由构造函数创建，是构造函数的实例化。
JS语法
代码规范
- 层级缩进 tab = 4 空格
；，后面都空一格空格 运算符 = + - … 前后都空格- 每条语句 后面带 ；
表达式
概念： 运算符 与 操作数
运算符
- 算数运算符: + 、 - 、* 、/ 、%
- 关系运算符
- 位运算 ： | 、&、>>、<<、^、、
- 逻辑运算符 === 、 ==、|| 、&& 、!= 、>= 、<=、！
- 赋值运算符: = 、*=、/= 、+= 、-= 、 +=、%=
- 自增、自减运算符 （一元运算符）： ++i 、i- -
数据类型
基本数据类型
字符串
字符串创建
ECMAScript中的字符串不可变，即创建后不能改变，只能销毁重新赋值（str[2] = ‘a’; 无效）
var str = new String("sdsd");
var str = String('sdg');
var str = 'sdsds';
字符串常用方法
- charAt()
功能：访问字符串的字符
参数： 下标 str.charAt(2); <===>str[2] - charCodeAt()
功能：返回该字符 ASCII 码
参数： 下标 - fromCharCode()
功能： 编码转字符
参数： ACSII码值
返回： 转码后字符 - concat()
功能： 字符串 拼接 一般用+
参数： str1 ,str2 - indexOf()
功能： 字符串查找第一次出现的索引
参数： string查找的子串 start 查找开始的位置 str.indexOf(‘abc’); 或 str.indexOf(‘abc’,start)；
返回值： 查找的子串在被查找的串出现的第一个索引值，没找到返回-1； - lastIndexOf()
功能： 字符串查找最后一次的索引
参数： string查找的子串 str.indexOf(‘abc’);
返回值： 查找的子串在被查找的串出现的最后一个索引值，没找到返回-1； - search()
功能： 字符串查找 可以正则表达式
参数： 可以是正则表达式或字符串 str.search(/abc/ig);(注：i 代表忽略大小写，g代表全局匹配)
返回值： 查找的子串在被查找的串出现的最后一个索引值，没找到返回-1； - replace()
功能： 字符串替换 可以正则表达式
参数： 可以是正则表达式或字符串 str.replace(/abc/ig,‘asa’);(注：i 代表忽略大小写，g代表全局匹配)
返回值： 返回新串 - substring()
功能： 字符串提取，指定区域
参数：start 截取开始索引，end 截取结束索引（不含end）,str.substring(1,5);
返回值： 返回新串，源串不变 - split()
功能： 字符串分割
参数： 分隔符 ， 分割长度i, str.split(’ ',2);
返回： 分割的数组 - toLowerCase()
功能：全小写 - toUpperCase()
功能： 全大写 - document.write() 中字符串的方法
- big()
功能：用大号字体显示字符串 - blink()
功能：显示闪动字符串（IE下无效） - bold()
功能：粗体显示字符串 - fixed()
功能: 以打字机文本显示字符串 - strike()
功能：使用删除线显示 - fontcolor()
功能：使用指定颜色来显示 - fontsize()
功能：使用指定大小来显示 - link()
功能：显示为链接 - sub()
功能：把字符串显示为下标 - sup()
功能：把字符串显示为商标
- big()
复合数据类型
数组
数组创建
//数组创建
var arr = new Array(10); //方式1
var arr = Array(1,true 'hello'); //方式2
var arr = [1,true,'hello']; //方式3（常用）
console.log(arr[0]);
console.log(arr.length); //数组长度：0~(length-1)
/*
for( ... in ...) 快速遍历(从头到尾遍历 无需判断)
*/
for( var i in arr){}
//二维数组创建
var arr=[];
for(let i=0;i<10;i++){
var arr2=[];
for(let j=0;j<10;j++){
arr2.push(j);
}
arr.push(arr2);
}
数组常用函数
-
push（）
功能： 给数组末尾添加元素
参数： 参数个数随意,隔开
返回值： 返回当前的length -
pop()
功能： 给数组末尾移出元素
返回值： 移除的元素 -
shitf()
功能： 从数组的头部取出
返回：取下的元素 -
unshift()
功能： 插入数组头部元素
参数： 参数个数随意,隔开
返回值： 当前length -
concat()
功能： 将两个数组合并成一个新数组，源数组不变 生成新数组
参数： 数组1 ，数组2
返回值： 新的合并的数组 -
slice()
功能： 基于当前数组指定区域元素，并创建新数组，源数组不变
参数： start 数组开始获取区域下标，end 结束获取区域下标，不包括end下标位置,arr.slice(start,end)
返回值： 新截取数组 -
splice()
功能：可以删除、插入，替换操作 实质是 截取+插入操作一起进行，
参数：start 截取开始下标，length截取长度 splice(start,length,arg…)
+ 删除功能 : arr.splice(1,2); //返回值为 删除的元素，源数组 改变 （截取不为零 插入为零）
+ 插入功能 : arr.splice(1,0,‘five’,‘hello’,…); // 源数组改变（截取为零，插入不为零）
+ 替换功能 : arr.splice(1,1,‘five’,‘hlleo’,…); //源数组改变（截取和插入都不为零） -
join()
功能：使用拼接符将数组中元素拼接为字符串
参数： 拼接符，常用 空格''、' '、+
返回值： 拼接好的字符串 -
indexOf() +新增
功能： 数值查找第一次出现的索引
参数： number查找的数值 start 查找开始的位置 arr.indexOf(30); 或 arr.indexOf(30,3)；
返回值： 查找的子串在被查找的串出现的第一个索引值，没找到返回-1； -
forEach()
功能：遍历数组
参数：item 当前遍历元素的值，index 当前遍历索引 array 当前数组
格式：arr.forEach(function(item,index,array){…}) ;或 arr.forEach((item,index,array)=>{…});
返回： 无 -
map()
功能： 映射 遍历 => 操作 => 返回
参数：item 当前遍历元素的值，index 当前遍历索引 array 当前数组
格式：arr.map(function(item,index,array){…}); 或 arr.map((item,index,array)=>{…})
返回： 操作后的数组，源数组不变。 -
reduce()
功能： 归并 遍历 => 操作 => 返回
参数：per 上一次遍历的return的值，next 当前值 ，index当前遍历索引，array 当前数组
格式：arr.reduce(function(pre,next,index,array){…}); 或 arr.reduce((pre,next,index,array)=>{…})
返回： 操作后的数组，源数组不变。 -
filter()
功能： 过滤
参数：item 当前值 ，index当前遍历索引，array 当前数组
格式：arr.filter(function(item,index,array){return item>20;}); 或arr.filter((item,index,array)=>item>30)
返回： 操作后的数组，源数组不变。 -
some()
功能： 某些 （不会遍历，判断条件是否成立 有一个成立则结束）
参数：item 当前值 ，index当前遍历索引，array 当前数组
格式：arr.some(function(item,index,array){return item==30;}); 或arr.some((item,index,array)=>item == 30)
返回：true或false，源数组不变。 -
every()
功能： 每一项 （会遍历，判断条件是否成立 每一项符合条件才返回true 有一个不符合则结束）
参数：item 当前值 ，index当前遍历索引，array 当前数组
格式：arr.some(function(item,index,array){return item == 30;}); 或arr.some((item,index,array)=> item == 30)
返回：true或false，源数组不变。
数据类型转换(强转)
- Number([ var ])
- Boolean([ var ])
- praseInt([ var])
- praseFloat([ var ])
对象
对象创建
对象也是数据类型（引用类型）在ECMAScript 中 引用类型是一种【数据结构】，用于将【数据和功能】组织到一起
- 对象的属性 ： 对象中存储的数据
- 对象的方法 ： 对象中存储的函数
// 创建对象
var obj = new Object();
var obj = Object();
var obj = {};
// 新增对象属性/方法
obj.name = 'xxxx';
obj.showName = function(){
console.log(this.name);
}
console.log(obj['name']);
console.log(obj.name);
obj.showName();
Date 对象（日期对象）
// 创建日期
var d = new Date();
console.log(d); //Sat Oct 19 2019 23:50:02 GMT+0800 (新加坡标准时间)
var d = new Date("2019/10/18"); //Fri Oct 18 2019 08:00:00 GMT+0800 (新加坡标准时间)
var d = new Date("2019-10-18");
var d = new Date("2019-10-18 10:30:18"); //Fri Oct 18 2019 10:30:18 GMT+0800 (新加坡标准时间)
var d = new Date(2019,10,18,10,30,18);//Mon Nov 18 2019 10:30:18 GMT+0800 (新加坡标准时间)
/*
Date(number)
1秒=1000毫秒
number 参数单位 毫秒
以 1970 年 1 月 1 日 0 时 0 分 0 秒 为参照物 1970年 Unix 诞生日
*/
var d = new Date(1000);//Thu Jan 01 1970 07:30:01 GMT+0730 (新加坡标准时间)
/* 日期方法
set 设置
get 获取
周 0~6
月 0~11
*/
d.setDate(5);
d.getFate();// 5
d.getDay(); // 6
d.setMonth(4);
d.getMonth();
d.getHours();
d.getMinutes();
d.getSeconds();
d.getTime();
d.parse('2019-10-18');//1571356800000
BOM
概念： BOM(Browser Object Model) 浏览器对象模型
window 对象属性方法
警告框
- alert()
功能： 弹出警告框
格式：alert([String]); - confirm()
功能： 弹出警告框，带有取消和确定
格式：confirm([String]);
返回: true 或 false - prompt()
功能： 弹出带输入框的的提示框
格式： prompt([String],[String]); //prompt(“请输入”，‘985540932’);
参数：第一个参数，提示框显示的内容，第二个输入框默认参数
返回： 点确定 返回输入框内容，点取消，返回 null
Open*窗口
- open()
功能： 打开新窗口（URL）
格式：open(‘www.baidu.com’,‘百度a’,‘width=400,height=400,top=200,left=200’)
参数： 参数1： URL 。参数2： 新窗口别名 。参数3 ：打开窗口的大小位置
注意：如有参数2，再次点击打开新窗口，则在已经打开的别名窗口打开，不会重复打开新窗口 - opener()
功能： 打开当前窗口的父窗口的 window 对象 （IE不支持）
格式：opener.xxxx //
例子：opener.document.write(‘子窗口叫我输出’)； 在子窗口执行，在父窗口出效果
Location 对象
概念： 相当于浏览器上的地址栏
URL 统一资源定位符
[protocol]【协议】:[host]【主机名:端口号】/[pathname]【路径】?[search]【查询字符串】#[hash]【锚点】
例如：https://www.fivecc.cn:8080/lyb/xxx.html?username=Five&age=22#3
- hash : 【锚点】 用于页内跳转 ===>
#flag3 - host : 【主机名:端口号】
www.xxxx.com:xxxx浏览器端口号 默认8080 - hostname : 【主机名】域名/IP
- href : 【URL】
location.href='https://www.fivecc.cn' - pathname : 【路径名】
- port : 【端口号】默认
8080 - protocol : 【协议】
http:网协议file:本地文件协议 - search : 【查询字符串】跟在
?xxx&use=five - assign()
功能： 跳转指定URL - reload()
功能： 重载当前URL
参数： 参数为true时，强制加载，从服务器源头重新加载，忽略缓存 - replace()
功能： 用新URL 替换当前页面，可以避免产生跳转前的记录
History
保存用户上网记录
- length : 返回当前history记录的条数
- forward()
功能 ：【前进】 下一历史记录 - back()
功能 ：【后退】 上一个历史记录 - go()
功能 ：【跳转】
参数： 0 重载当前 2 前进2条记录 ，-2 后退2调记录
DOM
概念： DOM(Document Object Model) W3C 文档对象模型 ,中立与平台和语言的接口，它允许程序和脚本动态访问和更新文档的内容、结构和样式。
【注】 Dom 是打通 html css js壁垒的一个工具
DOM 树
DOM 节点分类
- 元素节点 :
<div> </div><span></sapn> - 属性节点 ：
title = '属性节点'value = '按钮' - 文本节点 ：
哈哈哈 我是Five
【注】 JS 中 所有 DOM 节点都是对象
这些节点有三个常用属性，nodeNamenodeTypenodeValue
| 节点类型 | nodeName | nodeType | nodeValue |
|---|---|---|---|
| 元素 | 元素名称 | 1 | null |
| 属性 | 属性名称 | 2 | 属性值 |
| 文本 | #text | 3 | 文本内容 (不包括html) |
元素节点属性
- childNodes : 当前元素节点的所有子节点（包括元素节点 文本节点）
- firstChild : 当前元素节点的首子节点
- lastChild : 当前元素节点 的 尾子节点
- removeChild() : 删除子节点
- parentNode : 当前 元素节点的父节点
- previousSibling : 当前元素节点的前一个同级节点
- nextSibling : 当前元素节点的 后一个同级节点
- attribute : 当前属性节点的集合 ，【集合】不重复，无序
// 封装 去掉空白节点 (实际 空白子节点 并未删除)
function removeSpaceNode(nodes){
var result = [];
for(var i = 0; i < nodes.length; i++){
// 保证是文本节点 且值为 空格
if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){continue;}
result.push(node[i]);
}
return result;
}
// 封装 去掉空白节点 (实际空白子节点删除， 从父元素上删掉)
function removeSpaceNode2(parent){
var nodes = parent.childNodes;
for(var i = nodes.length-1; i >= 0; i--){ //倒删 防顺序改变 跳删
if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
prarent.removeChild(nodes[i])
}
}
}
元素节点方法
- document.getElementById()
功能 ： ID 标签
返回 ： 第一个符合条件的元素节点 - document.getElementsByTagName()
功能 ： Html 标签
返回 ： 含有该标签的所有元素节点的数组 - document.getElementsByClassName()
功能 ：类标签 (IE 低版本 不支持)
返回 ： 含有该类的所有元素节点数组 - document.ElementsByName()
功能 ： name的值 （一般 在文本输入框 用这个属性）
返回 ： 符合条件元素节点的数组 - document.createElement()
功能 ： 创建一个元素节点span
返回 ：<span></span> - document.createTextNode()
功能 ： 创建文本节点
返回 ： - node.appendChild()
功能 ： 节点插入
返回 ： - insertBefore()
功能 ： 将插入的节点插入到旧节点
格式 ： 父节点。insertBefore([newNode],[oldNode])； - replaceChild()
功能 ： 替换元素节点
格式 ： parent.replaceChild([newNode],[oldNode]); - cloneNode()
功能 ： 克隆节点
格式 ： node.cloneNode()
参数 ：true默认false,传true，就会复制元素节点的innerHTML （包括文本内容）
返回 ： 克隆的元素节点
// IE 兼容函数封装 自定义 获取 className
function elementsByClass(parsent,classStr){
var nodes = parsent.getElementsByClassName('*')//找到当前所有节点
var result = []; // 记录符合条件的元素节点
for(var i = 0;i < nodes.length; i++){
if(nodes[i].className == classStr){
result.push(nodes[i]);
}
}
return result;
}
var oUl = document.ElementById('ul1');
var node = elementsClassName(oUl,'box');
获取Style
- obj.style.xxx : 行间 CSS 样式获取方法
- obj.getComputedStyle()
功能 ：获取当前 有效样式
格式： getComputedStylr(元素节点)[获取样式类型]；火狐/谷歌/safari
备注： 元素节点.currentStyle[获取样式类型]； IE
// 获取当前样式的兼容函数 封装 getStyle()
function getStyle(elem,attr){
return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
}
var dd = document.getElementsByClassName('div1');
getStyle(dd[0],backgroundColor);//注意 要确定唯一性 不能传数组对象 `dd[0]`
Attribute 系方法
操作当前元素节点中某个属性的
与 . 操作相比（obj.xxx = 'xxx'）
- 点操作
className本操作 直接class - 支持 设置/查看 用户自定义 点操作不支持
removeAttribute()点操作 无法 移除 只能置空
- setAttribute() : 设置属性
- getAttribute() : 查看属性
- removeAttribute() ： 移除属性
层级结构
addEventListener
// 单击与双击
var tt;
btn.addEventListener('click',function(){
tt = setTimeout(function(){},300)
},false) // false ===> 冒泡阶段
btn.adEventListener('dblclick',function(){
clearInterval(tt)
},true) //true ===> 捕获阶段
函数
函数是对象 ，对象不一定是函数
apply call bind
apply 和call 可以改变 指向
- 当 没有传参数 或 null this 指向 默认为 window
f1(100,200) < => apply(null [100,200]) < = > call(null,100,200)
bind : 复制的意思 在复制的时候 改变指向
bind(null , 10,20);
function f1(x,y){
console.log(x+','+y+'======>'+this);
}
f1(10,20);
var obj ={
age : 10,
sex : '男'
}
f1.apply(obj,[10,20]);
f1.call(obj,10,20);
this 指向
- 普通函数 ===> window
- 构造函数 ===> 当前实例对象
- 方法 ===> 实例对象
- 原型方法 ===> 实例对象
- 定时函数 ===> window
定时器
- setInterval() ： 间歇
- clearInterval() ： 清除
- setTimeout() : 延时
var timer= setInterval(function(){
clearInterval(timer); //停止
},1000);
事件 Event
事件基础
JS 事件 是由 访问 web 页面的用户 引起的一系列操作
当用户执行某些操作的时候，再去执行一系列代码，或者用来获取事件的详细信息，如鼠标位置，键盘key值等
事件处理函数
事件处理函数类型 分为：
- 鼠标点击事件
- 键盘事件
- HTML 事件
事件处理函数 都会有 两个部分组成，on+ 事件名称
事件对象
通过事件绑定的的执行函数可以得到一个隐藏的参数，
由浏览器自动分配的一个参数，这个参数就是Event 对象
- e.clientX/Y : 浏览器可视区域 的 鼠标位置
- e.pageX/Y : HTML页面区域 的 鼠标位置
- e.offsetX/Y : 当前作用区域 的 鼠标位置
oDiv.onclick = function(e){
var env = e || event;
console.log(en);
}
事件流（三阶段 W3C）
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件默认行为以及阻止方式
JS 默行为 例如：
- a 标签的跳转
- Submit 按钮的提交
- 右键菜单
- 文本框的输入
- …
阻止默认行为的方式
event.preventDafault();
event.returnValue = false;
return false;
阻止冒泡事件
env.cancelBubble = true
env.stopPropagation()
DOM2级事件处理程序
事件委托机制
Cookie
HTTP ：超文本传输协议，用于从web服务器传输超文本到本地浏览器的传输协议，它是一个 无状态的协议。
Cookie : 是指 缓存在本地客户端的数据
Cookie的基本操作
- document.cookie : 查询/设置 cookie， 赋值 即是 设置 cookie
document.cookie = "user = five";// 设置cookie
console.log(document.cookie); // 查询cookie
var oDate = new Date();
oDate.setDate(oDat.getDate()+3); //缓存3天
document.cookie = "user = five; expiress="+oDate
document.cookie = "user = five2";
document.cookie = "user = LHL";
正则表达式 *
使用方式与方法
使用方式：
1.字面量的方式
2. 构造函数的方式
使用方法：
- test()
功能 ： 用来检测字符串 是否含 有符合 规则的子串，有 返回true没有则false
格式 ：reg.test(str);- match() :【字符串的方法】： str.match(reg); // 返回 结果对象数组
- search() : 【字符串的方法】： str.search(reg); //返回 第一个匹配的位置
- split() :
- replace() :
- exec()
功能 ：正则表达式方法，将匹配的结果放到数组里，没有则返回 null
正则表达式 表
| 字符 | 功能 | 样例 | 样例结果 |
|---|---|---|---|
| . | 除了换行符以外的所有单个字符 | ||
| * | 重复多次匹配 |
var reg = /abc/; // 1.字面量的方式
var reg = new RegExp('abc'); // 2. 构造函数的方式
console.log(reg.test('sab'));
ES6
新特性
let的使用
- 块级作用域
{} - 不存在变量提升
- 不允许重复声明
解构赋值
概念： 按照一定模式，从数组和对象中提取值，对变量进行赋值。
// 数组 ：
let [a,b,c] = [1,2,3];
// 默认赋值
[a=2,b] = [3]; // 3 undefined
[a=2,b] = [,3]; // 2 3
let c;
[a=3]=[c];
// 对象 ：
let {a,b} = {a:"aaa",b:"bbb"};
let {a:b} = {}
模板字符串
//ES5
var obj = { 'name': 'five','age': 22};
console.log(obj.name+"的年龄"+obj.age);
// ES6
let obj = { 'name': 'five','age': 22};
console.log(`${obj.name}的年龄${obj.age}`);
箭头函数
this的指向 ：指向定义时所在作用域，而不是执行时的作用域
//ES5
var f = funtion (a,b){ return a+b;}
//ES6
let f = (a,b) => 1;
let f = (a,b) => { return a+b;}
// ============this 指向=================//
//ES5
var obj = {
name : 'Five',
sayHello : function () {
console.log(this)://{name: "Five", sayHello: ƒ}
}
}
//ES6
var obj = {
name : 'Five',
sayHello : () => {
console.log(this):// window{...}
}
}
var obj = {
name : 'Five',
sayHello : () => {
console.log(this):// window{...}
}
}
Set 结构
概念 ：它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。
扩展运算符... ： Set转数组
var set = new Set([1,2,2,3,4,2]);
var arr = [ ... set];
- set.add() ： 增加
- set.delete() : 删除
- set.size() : 集合大小
- set.clear()
var set = new Set([1,2,3,4,2]);//结构
animation
匀速动画
var speedX = 3;
var div = document.querySetector('div');
function move() {
var currLeft = parseInt(window.getComputedStyle(div).left)
}
继承 *
过程
- 创建一个对象
__proto__指向 父类原型prototype- 将
this指向这个对象 - 执行构造函数
- 返回这个对象
Ajax *
核心对象 XMLHttpRequest
- 局部刷新
- get
- post
get步骤
- 创建Ajax对象
var xhr = new XMLHttpRequest ();
- 监听请求
xhr.onreadystatechange = function (){
// 0 ===> xhr 对象已经创建
// 1 ===> xhr 对象已经调用open
// 2 ===> xhr 对象以发 Ajax 请求
// 3 ===> 已返回部分数据
// 4 ===> 数据已经全部返回完毕
if(xhr.readyState !== 4) {return;}
if(xhr.status >= 200 && xhr.status <= 300){
console.log('success!');
console.log(xhr.responseText);
}else {
console.log('请求失败')；
}
}
- 打开 这个对像
xhr .opn('get','./test.txt', true)
- 发送请求
xhr .send()
post步骤
- 创建Ajax对象
var xhr = new XMLHttpRequest ();
- 监听请求
xhr.onreadystatechange = function (){
// 0 ===> xhr 对象已经创建
// 1 ===> xhr 对象已经调用open
// 2 ===> xhr 对象以发 Ajax 请求
// 3 ===> 已返回部分数据
// 4 ===> 数据已经全部返回完毕
if(xhr.readyState !== 4) {return;}
if(xhr.status >= 200 && xhr.status <= 300){
console.log('success!');
console.log(xhr.responseText);
}else {
console.log('请求失败')；
}
}
- 打开 这个对像
xhr .opn('get','./test.txt', true)
- 设定请求头
xhr .setRequestHeader('Content-Type','application/-x-www-form-urlencoded');
- 发送请求
xhr .send('username=Five&&password=123456');
JSON
JQuery *
- JS 库
$ <===> jQuery
jquery 入门
AMD(异步模块)
CommonJS(同步模块)
gulp
gulp 用法
- 创建gulp 人物
- 第一个参数为任务名
- 第二个参数为 所依赖的其他任务（外部依赖导入），【没有可省略】
- 第三个参数（函数体）执行任务代码
gulp.task('copy',['copy-html','copy-js','copy-css'],function(){ // 管道处理机制
gulp.src('./src/**/*.*') //获取文件
.pipe(xxx1()) // 执行任务1
.pipe(xxx2()) // 执行任务2
.pipe(gulp.dest('./dist/xxx')) //存储路径
})
gulp 常用方法
- src() : 获取文件。类似输入流
- dest() : 存储文件。类似输出流
- watch() : 监听
- server() : 服务器
gulp 常用插件
插件引入
var XXX = require('gulp-xxx');
- gulp-concat : 连接 JS
- gulp-uglify : 压缩JS
- gulp-sass : 编译 sass
- gulp-minify-css : 最小化 css
- gulp-rename : 文件重命名
- gulp-connect : 热更新
- gulp-plumber : 错误处理 （防打断）
其他
严格模式
严格模式下 浏览器对 JS 要求将会更加苛刻
‘‘use strict’’; 写到哪 那个区域下所有代码遵从 严格模式。（不要轻易全局模式下使用）
例如：
// 非严格模式下 可行 ， 未申明（var）变量 m在赋值时， 会默认当全局变量处理
function f(){
m=100
}
f();
// 严格模式下 可行 ， 未申明（var）变量 m在赋值时， 会报错
function f(){
"use strict";
m=100
}
f();
Math 对象函数
- Math.rand() : 四舍五入
- Math.random() : 随机函数产生 0~1
- Math.max() : 返回最大 ，多个参数 Math.max(20,10,21,22);
- Math.min() : 返回最小
- Math.abs() : 返回 绝对值
- Math.ceil() : 向上取整
- Math.floor() : 向下取整
- Math.pow() : x 的 y 次方 Math.pow(x,y)
- Math.sqrt() : 开平方
- Math.sin/cos/tan() : 正弦/余弦/正切 Math.sin(2*Math.PI)
- …
&it => ‘<’
> => ‘>’
文章来源: fivecc.blog.csdn.net，作者：Five-菜鸟级，版权归原作者所有，如需转载，请联系作者。
原文链接：fivecc.blog.csdn.net/article/details/102639288
- 点赞
- 收藏
- 关注作者
评论（0）