学习笔记
hcoke
这个作者很懒,什么都没留下…
展开
-
Set数据结构
es6提供了新的数据结构Set,它类似于数组,但成员的值都是唯一的,没有重复的值。如何创建set数据结构: //set本身是一个构造函数,用来生成set数据解构 var s = new Set() console.log(s.size); //size属性返回s这个set数据解构中的成员数量 //set构造函数可以接受一个数组作为参数,用来初始化 const set = new Set([1,2,3,4,'abc'])原创 2022-05-09 21:52:47 · 803 阅读 · 0 评论 -
String的扩展方法
模板字符串:ES6新增的创建字符串的方式,使用反引号定义。它的特点有以下几个1.模板字符串可以解析变量,在反引号内部使用 {变量名}let name = '张三'let sayHello = `Hello,my name is ${name}`console.log(sayHello);2.模板字符串可以换行let result = { name: '张三', age: 20, id: 1 }原创 2022-05-09 21:09:33 · 358 阅读 · 0 评论 -
ES6开启 let关键字
为什么使用es6:变量提升增加了程序在运行时的不可预测性。语法过于松散,在实现相同的功能时,不同的人可能会写出不同的代码。1.let关键字类关键字的特点:(1):es6新增的用于声明变量的关键字。let声明的变量只在所处的块级作用域内有效。在一个大括号中使用let声明的变量才具有块级作用域,var是不具有这个特点的。 if (true) { let a = 1 console.log(a); }原创 2022-05-07 21:54:19 · 300 阅读 · 0 评论 -
正则表达式
什么是正则表达式:正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。在JavaScript中正则表达式也是一种对象。它经常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单,用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外,正则表达式还用于过滤掉页面中的一些敏感词,或从字符原创 2022-05-06 21:57:31 · 208 阅读 · 0 评论 -
浅拷贝与深拷贝
浅拷贝:只复制某个对象的引用,而不复制对象本身,新旧对象还是共享同一块内存。深拷贝:创造一个一摸一样的对象,新对象和原对象不共享内存,修改新对象不会改变原对对象。浅拷贝的两种方法:1.使用for in 遍历对象 挨个赋值2.使用Object.assign()方法语法格式:Object.assign(拷贝给的对象,拷贝对象)var obj = { id: 1, name: 'andy', msg: {原创 2022-05-09 20:32:24 · 254 阅读 · 0 评论 -
JS高级 闭包
1.变量作用域变量根据作用域的不同分为两种:全局变量与局部变量。函数内部可以使用全局变量,函数外部不可以使用局部变量。当函数执行完毕,函数内部的局部变量会销毁。2.闭包 什么是闭包闭包指有权访问另一个函数作用域中变量的函数。function fn () { var num = 1 function fun() { console.log(num); } fun原创 2022-05-05 21:04:54 · 167 阅读 · 0 评论 -
严格模式。
JavaScript严格模式,即在严格的条件下运行。使用严格模式的目的:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为; 消除代码运行的一些不安全之处,保证代码运行的安全; 提高编译器效率,增加运行速度; 为未来新版本的Javascript做好铺垫1.为脚本开启严格模式为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"use strict"。单引号也可。<script> 'use strict'; </原创 2022-04-28 21:39:42 · 1170 阅读 · 0 评论 -
改变函数内部this指向
常用的改变函数内部this指向的方法: bind() call() apply()1.call()call() 可以调用函数 也可以改变该函数的this指向call的主要作用可以实现继承//1.call var o = { name: 'andy' } function fn (a, b) { console.log(this); console.log(a + b);原创 2022-04-28 17:39:41 · 352 阅读 · 0 评论 -
函数内部的this指向
//1.普通函数 this指向window function fn() { console.log(this); } //2.对象的方法 this指向对象o 函数的调用者 var o = { sayHi: function () { console.log(this); } } o.sayHi() .原创 2022-04-27 21:22:06 · 286 阅读 · 0 评论 -
函数进阶、开启 函数的定义与调用
函数的定义与调用:函数的定义方式:1.函数声明方式function关键字(命名函数):function fn () { }2.函数表达式(匿名函数)var fn = function() { }3.new function('参数1','参数2','函数体') (构造函数) var f = new Function ('a', 'b', 'console.log(a + b)')注意:function里面参数都必须是字符串格式。原创 2022-04-27 21:12:55 · 173 阅读 · 0 评论 -
ES5中的新增方法
es5新增方法概述:数组方法:迭代(遍历方法)foreach() map() filter() some() every()foreach()方法:语法格式:array.foreach(function(currentValue, index, arr))例子: //foreach迭代数组 var arr = [1,2,3] var sum = 0 arr.forEach(function(value, index, ar...原创 2022-04-27 20:43:42 · 342 阅读 · 0 评论 -
JavaScript 中的继承
es6之前没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。1.call() 调用这个函数,并且修改这个函数运行时的this指向。语法:call(thisobj,arg1,arg2,...)thisobj:当前调用函数this的指向对象。...原创 2022-04-26 21:04:50 · 1430 阅读 · 0 评论 -
利用原型对象扩展内置对象
可以通过原型对象,扩展内置对象的属性和方法。比如给数组添加自动求偶数和的功能。//原型对象应用:扩展内置对象方法 Array.prototype.sum = function () { var sum = 0 for (var i = 0 ;i < this.length; i++) { sum += this[i] } retur原创 2022-04-26 17:44:21 · 179 阅读 · 0 评论 -
Http协议
1.什么是通信信息的传递和交换。三要素:通信的主体、内容、方式。互联网中的通信:服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。通信的主体是服务器和客户端浏览器;通信的内容是传智专修学院的简介;通信的方式是响应。2.HTTP协议:HTTP协议即超文本传输协议,它规定了客户端与服务器之间进行网页内容传输时,所必须遵守的传输格式。HTTP协议采用了 请求/响应的交互模型。HTTP消息的组成部分:1.请求行上图的请求方式为POST ...原创 2022-04-23 21:39:05 · 330 阅读 · 0 评论 -
什么是节流
节流策略,顾名思义,可以减少一段时间内事件的触发频率。比如王者荣耀的平A键,在进行平A时,英雄的攻击速度与你按下攻击按钮的速度没有关系,不会因为你点击的多块而让英雄的攻速更快,就是在进行普攻的过程中,你再次按下攻击键是没有意义的。节流的应用场景:1.鼠标连续不断地触发某事件(如点击),只在单位事件内触发一次。2.懒加载时要计算滚动条的位置,但不必每次滑动时都触发,可以降低计算的频率,而不必去浪费cpu资源。节流阀:防止轮播图按钮连续点击造成播放过快。减少某个事件的触发频率。.原创 2022-04-22 21:47:50 · 891 阅读 · 0 评论 -
输入框的防抖
1.什么是防抖防抖策略是当事件被触发后,延迟n秒再执行回调,如果在这n秒内事件又被触发,则重新计时。好处就是在事件被频繁触发的情况下,保证事件只会被执行一次,不会频繁执行。2.防抖的应用场景:用户在输入框中连续输入一段字符时,可以通过防抖策略,只在输入完成后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源。思路:写一个函数,内部包含一个定时器,它在一段时间后发起请求,比如说500ms,然后在这个时间段内,只要再次监听到触发了发起请求的事件,就清空这个函数内的定时器。如下原创 2022-04-22 19:59:52 · 2705 阅读 · 0 评论 -
jquery中的JSONP
jquery中的$.ajax()函数,除了可以发起真正的Ajax数据请求之外,还可以发起JSONP数据请求,例如: $.ajax({ url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20', dataType: 'jsonp', success: function (res) { console.log(res);原创 2022-04-21 21:28:19 · 5436 阅读 · 0 评论 -
同源策略和跨域
什么是同源:如果两个页面的域名协议端口都相同,则两个页面具有相同的源。下表中的例子为我们展示了同源的是与否 相对于http://www.test.com/index.html 没写端口号则默认端口号为:80同源策略:同源策略是浏览器提供的一个安全功能。MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与另一个源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通俗理解: A网站的JavaScript不允许与非同源的网站C之间,进行资源的交互,例...原创 2022-04-21 20:54:06 · 541 阅读 · 0 评论 -
Axios
什么是Axios:Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest对象,Axios简单易用。相比于jquery,Axios更加轻量化,只专注于网络数据请求。Axios发起get请求的语法:axios.get('url',{params:{/*参数*/}}).then(callback)具体的请求实例如下:...原创 2022-04-21 16:46:59 · 369 阅读 · 0 评论 -
使用jquery实现文件上传的步骤
1.定义UI结构<!-- 导入jquery --><script src="../lib/jquery.js"></script><!-- 文件选择框 --><input type="file" id="file1" /><!-- 上传文件按钮 --><button id="btnUpload">上传文件</button>2.判断是否选择了文件 $(function () {原创 2022-04-20 21:25:10 · 9647 阅读 · 0 评论 -
计算文件的上传进度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2022-04-20 20:37:06 · 426 阅读 · 0 评论 -
FormData的使用
formdata的基本使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-04-20 16:57:14 · 2826 阅读 · 0 评论 -
XML HttpRequest Level2
1.旧版XML HttpRequest的缺点只支持文本数据的传输,无法用来读取和上传文件。传送和接收数据时,不能显示进度信息,只能提示有没有完成。2.XML HttpRequest Level2新特性可以设置HTTP请求的时限可以使用FormData对象管理表单数据。可以上传文件可以获得数据传输的进度信息。如何设置Http请求的时限:有时,ajax操作很耗时,而且无法预知要花多少时间。新版本的XML HttpRequest 属性增加了timeout属性,可以设置HTT原创 2022-04-20 16:35:37 · 671 阅读 · 0 评论 -
数据交换格式
数据交换格式就是服务器端与客户端之间进行数据传输与数据交换的格式。前端领域经常提到的两种数据交换格式有JSON、XML。其中XML用的非常少,我们重点要学习的数据交换格式就是JSON。1.什么是XMLXML即可扩展的标记语言,因此XML与HTML类似,也是一种标记语言。2.与HTML的区别:他们虽然都是标记语言,但是 他们两个之间没有任何关系。HTML被设计用来描述网页上的内容,是网页内容的载体。XML被设计用来传输和存储数据,是数据的载体。3.XML缺点XML格式臃肿,原创 2022-04-19 21:52:29 · 1919 阅读 · 0 评论 -
URL编码
什么是URL编码:URL地址中,只允许出现英文相关的字母、标点符号、数字。因此不允许在url地址中出现中文字符,如果出现了,就必须对中文字符进行编码(转义)。url编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印的字符)去表示哪些不安全的字符。通俗理解就是:用英文字符去表示分英文字符。每一个中文字符编译成url编码之后都是三组百分号。如何对url进行编码与解码:浏览器提供了url编码与解码的api,分别是:encodeURL() 编码的函数decodeURL().原创 2022-04-18 16:18:14 · 227 阅读 · 0 评论 -
什么是AJAX
Ajax全称是:Asynchronous Javascript And XML通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax。原创 2022-04-17 00:12:45 · 260 阅读 · 0 评论 -
todolist jquery
<script src="jQuery.js"></script><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi.原创 2022-04-16 13:39:15 · 450 阅读 · 0 评论 -
数据 资源的请求方式
数据也是一种资源。只要是资源,就必然要通过请求-处理 -相应 的方式获取。如果要在网页上请求服务器上的数据资源,则需要用到XMLHttpRequest对象。XMLHttpRequest简称xhr,是浏览器提供的js成员,通过它可以请求服务器上的数据资源。最简单的用法var xhrObj = new XMLHttpRequest();资源的请求方式:客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式为:get 和post请求。get请求通常用于获取服务端资源(向原创 2022-04-12 21:56:38 · 527 阅读 · 0 评论 -
客户端与服务器的相关概念
服务器:上网过程中,负责存放和对外提供资源的电脑,叫做服务器。 本质就是一台电脑,只是性能比个人电脑高得多。客户端:上网过程中,负责获取和消费资源的电脑,叫做客户端。 个人电脑中,可以通过安装浏览器的形式,访问服务器对外提供的各种资源。URL地址:中文叫做统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到相应的资源。常见URL举例:http://www.baidu.comurl地址由三部分组成:1.客户端与服务原创 2022-04-12 21:37:17 · 1381 阅读 · 0 评论 -
淘宝轮播图
动态生成小圆圈:核心思路:小圆圆的个数要跟图片张数一致。所以首先先得到ul里面图片的张数(图片放入li里面,所以就是li的个数)利用循环动态生成小圆圈(这个小圆圈要放入ol里面)创建节点createElement('li')插入节点ol.appendChild(li)点击小圆圆滚动图片:此时用到animate动画函数,将js文件引入(注意,因为index.js依赖animate.js 所以animate.js要写到index.js上面)使用动画函数的前提:该元素必须有原创 2022-04-11 20:54:01 · 434 阅读 · 0 评论 -
动画函数封装之 将函数封装到单独JS文件里面
以后经常使用这个函数的话,可以单独封装到一个Js文件,使用时引用即可。1.单独新建一个js文件2.直接引用<script type="text/javascript" src="animate.js"></script><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type原创 2022-04-10 17:15:52 · 385 阅读 · 0 评论 -
动画函数添加回调函数
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再去执行传进去的这个函数,这个过程就叫做回调。回调函数的位置:写到定时器结束的位置。以下例子为:当按下按钮移动到800后该元素的背景色变红。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="te.原创 2022-04-10 15:36:52 · 351 阅读 · 0 评论 -
缓动动画效果
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来。思路:1.让盒子每次移动的距离变小,速度就会慢慢落下来2.核心算法:(目标值-现在的位置)/ 10 作为每次一定的距离 步长3.停止的条件就是:让当前盒子位置等于目标位置就停止定时器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style原创 2022-04-10 15:17:59 · 837 阅读 · 2 评论 -
动画函数封装
动画实现核心原理:通过定时器setInterval()不断移动盒子位置。实现步骤:1.获得盒子当前位置2.让盒子在当前位置加上1个移动距离3.利用定时器不断重复这个操作4.加一个结束定时器的条件5.注意此元素需要添加定位,才能使用Element.style.left<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></titl原创 2022-04-10 13:27:27 · 362 阅读 · 0 评论 -
mouseenter鼠标事件
mouseenter鼠标事件1.当鼠标移动到元素上时就会触发mouseenter事件2.类似mouseover,它们两者之间的差别是mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发这样的原因就是 mouseenter不会冒泡。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></t原创 2022-04-09 23:50:55 · 2942 阅读 · 0 评论 -
三大系列总结
三大系列大小对比 作用 Element.offsetWidth 返回自身包括padding,边框,内容区的宽度,返回数值不带单位 Element.clientWidth 返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位 Element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位 第一个offset包含边框,23不包含。scroll包含了文字超出的一部分。主要用法:1.offset系列经常用于获得元素的位置 off原创 2022-04-09 23:36:05 · 140 阅读 · 0 评论 -
元素滚动scroll案例 仿淘宝固定侧边栏
页面被卷去的头部兼容性解决方案:页面被卷去的头部存在兼容性的问题,因此被卷去的头部通常有如下几种写法:1.声明了DTD 即页面头部存在<!DOCTYPE html> ,使用document.documentElement.scrollTop2.未声明DTD,使用document.body.scrollTop3.新方法window.pageYOffset和window.pageXOffset, IE9开始支持兼容性问题:function getScroll() {原创 2022-04-09 23:26:06 · 160 阅读 · 0 评论 -
scroll系列
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等。scroll系列属性 作用 Element.scrollTop 返回被卷去的上侧距离,返回数值不带单位 Element.scrollLeft 返回被卷去的左侧距离,返回数值不带单位 Element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位 Element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单原创 2022-04-09 22:07:49 · 315 阅读 · 0 评论 -
淘宝flexible.js源码分析
下面三种情况刷新页面都会触发load事件。1.a标签的链接2.f5或者刷新按钮(强制刷新)3.前进或后退按钮火狐中有个特点,‘往返缓存’。这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。(最新的火狐好像解决了这个问题)所以在火狐里后退按钮不能刷新页面。此时可以用pageshow事件来触发,这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页面中,pageshow会在load事件触发后触发;根据事件对象中的persi原创 2022-04-09 21:50:44 · 1040 阅读 · 0 评论 -
立即执行函数
1.立即执行函数:不需要调用,立马能够自己执行的函数2.写法 也可以传递参数进来(function函数名() {})() 或 (function函数名(){}()); 函数名也可不写3.立即执行函数最大的作用就是 独立创建了一个作用域,里面所有的变量都是局部变量 不存在命名冲突的情况 可以起名 也可以不起名<!DOCTYPE html><html> <head> <meta charset="utf-8"> <tit...原创 2022-04-08 21:53:47 · 3360 阅读 · 0 评论