前端学习笔记

举报
Fivecc 发表于 2022/08/05 22:51:18 2022/08/05
【摘要】 HTML 标签 a 标签 <a href="xxxx" target='_blank'></a> //新窗口打开 默认不打开新窗口 ul 标签 type=‘disc’...

HTML

标签

a 标签

<a href="xxxx" target='_blank'></a>  //新窗口打开 默认不打开新窗口

ul 标签

  1. type=‘disc’ : 实心圆
  2. type=‘circle’ : 空心圆
  3. 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 最初的目的 :解决用户和服务器交互问题。
现在,,游戏 特效,移动端,数据库 ,图形处理等等。

  • 面向对象
    提出需求,找对象,对象解决,注重结果。
    封装,继承,多态(抽象性)
  1. 实列对象由构造函数创建,是构造函数的实例化。

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()
      功能:把字符串显示为商标
复合数据类型
数组
数组创建
   //数组创建
 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)
    返回: truefalse,源数组不变。

  • every()
    功能: 每一项 (会遍历,判断条件是否成立 每一项符合条件才返回true 有一个不符合则结束)
    参数:item 当前值 ,index当前遍历索引,array 当前数组
    格式:arr.some(function(item,index,array){return item == 30;}); 或arr.some((item,index,array)=> item == 30)
    返回: truefalse,源数组不变。

数据类型转换(强转)

  • 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 节点都是对象
    这些节点有三个常用属性, nodeName nodeType nodeValue
节点类型 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')

  1. 点操作 className 本操作 直接 class
  2. 支持 设置/查看 用户自定义 点操作不支持
  3. 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)
  
 }

继承 *

过程
  1. 创建一个对象
  2. __proto__ 指向 父类原型 prototype
  3. this 指向这个对象
  4. 执行构造函数
  5. 返回这个对象

Ajax *

核心对象 XMLHttpRequest
  • 局部刷新
  • get
  • post
get步骤
  1. 创建Ajax对象
     var  xhr  = new XMLHttpRequest ();
  1. 监听请求
          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('请求失败')}
          }
  1. 打开 这个对像
   xhr .opn('get','./test.txt', true)
  1. 发送请求
  xhr .send()
post步骤
  1. 创建Ajax对象
     var  xhr  = new XMLHttpRequest ();
  1. 监听请求
          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('请求失败')}
          }
  1. 打开 这个对像
   xhr .opn('get','./test.txt', true)
  1. 设定请求头
  xhr .setRequestHeader('Content-Type','application/-x-www-form-urlencoded');
  1. 发送请求
  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 => ‘<’
&gt => ‘>’

文章来源: fivecc.blog.csdn.net,作者:Five-菜鸟级,版权归原作者所有,如需转载,请联系作者。

原文链接:fivecc.blog.csdn.net/article/details/102639288

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。