- 博客(32)
- 收藏
- 关注
RSS订阅原创 判断真数组和伪数组的方法
判断真数组和伪数组的方法数组：Array 对象用于在单个的变量中存储多个值。伪数组：伪数组也称类数组，无法直接调用数组方法，它的构造函数并不是Array，没有数组的典型的length属性。此外，它还是可以用for循环去遍历的。常见的伪数组：arguments(实参)，它是一个对象并不是一个数组。nodelist(dom元素节点)，调用document.getElementsByTagName、getElementsByClassName等各类获取元素的方法。判断方法：①通过instanceof
2021-05-30 23:47:13
959
1
原创 前端面试题（干货）
1.jsonp原理是，为什么说他不是真正的ajax，他的优缺点是？Jsonp原理：动态添加script标签，利于script标签的src属性，将前端方法作为参数传给后端，再将后端返回的数据，作为js代码传回前端。前端通过callback回调函数，拿到它的实参，就得到了后端返回的数据。①jsonp只能使用get请求，ajax可以使用get和post；②ajax核心是通过异步对象XMLHTTPRequest(响应体)，来获取非本页内容；jsonp核心是通过动态添加script标签来调用服务器提供的js脚本
2021-05-23 23:52:01
161
1
原创 熟悉 dom0级事件模型、dom2事件模型
熟悉 dom0级事件模型和dom2事件模型dom0级理解：在之前IE与Netscape的规范则被称为DOM0，dom0 级事件简单的来说就是普通的 “on+监听事件”。有两种写法：①第一种：在标签内部写<input id='btn' type="button" value="点点点" onclick="console.log('点击一次！')" >②第二种：给想要的元素添加document.getElementById("btn").onclick = function(){
2021-05-23 23:28:22
216
原创 ES6中的Promise
ES6 Promise定义：是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 的状态特点：1.Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。2.除了异步操作的结果，任何其他操作都无法改变这个状态。3.Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和
2021-05-16 20:00:38
87
原创 class 实现继承
class 实现继承Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。用法：<script> class Son extends Father { ... } </script>以上代码定义了一个Son类，以及Father类，通过extends关键字，Son类继承Father类的所有属性和方法。接下来我们要在Son中添加要继承的一些方法和属性。注： 子类
2021-05-13 20:34:17
1291
1
原创 ES6 class类——语法糖
ES6 class类——语法糖定义： class (类)作为对象的模板被引入，可以通过 class 关键字定义类。它的本质是函数（function），可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。基本用法：1.匿名类表达式<script> class { constructor(name) { this.name = name; } } <
2021-05-12 20:24:28
1366
原创 ES6新增基本数据类型——symbol
ES6新增基本数据类型——symbol基本数据类型除了 number 、 string 、 boolean 、 object、 null 和 undefined ，还有ES6新增的symbol。symbol的定义：表示独一无二的值，最大的用法是用来定义对象的唯一属性名。基本用法： Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。...
2021-05-11 19:26:03
242
1
原创 ES6新增声明let、const
ES6新增声明let、constES6：全称 ECMAScript 6，是于2015年正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。了解ES6中新增的两个声明命令let及const，和两者区别。let声明let命令，用来声明变量 let x = 1; console.log(x); // 输出 1这样可看和var声明没啥区别，但是新增它肯定是有别的用处。1、我们再看： console.log(x); // 报错 R
2021-04-25 21:20:25
166
原创 原生js封装ajax
原生js封装ajax为什么要封装ajax？答：一个网页里面会发送很多的ajax请求 而且所有的ajax的代码几乎一样，也就那五步个骤（上文已经讲过），所以将ajax封装需要用的时候直接调用，节省代码时间。首先我们知道需要传的参数都有什么：①请求方式：type。②请求路径：url。③传入的值/数据：data。④成功之后接受返回体：success。⑤返回体的数据类型：dataType。进行封装：第一步创建请求对象：var xhr = new XMLHttpRequest();第二步判
2021-04-24 23:32:06
252
原创 Ajax请求的五大步骤——一看就会
Ajax请求的五大步骤一、创建请求对象var xhr = new XMLHttpRequest();二、调用open方法，设置请求头和请求路径xhr.open("get","data.php");三、设置请求头（post请求需要设置）xhr.open("post","data.php");xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');四、监听响应完成事件xhr.onreadystate
2021-04-23 17:52:18
6427
3
原创 JS异步加载的三种方式
JS异步加载的三种方式我们平时使用的最多的一种方式即同步加载，又称阻塞模式。会阻止浏览器的后续运行，停止后续的解析，只有当前加载完成后，才能进行下一步操作。所以接下来我会介绍三种异步加载的方式。异步加载即非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。一、defer （IE适用） 代码块可以写在script标签中<script src="test.js" defer></script>或<script src="test.js" defer&
2021-04-07 19:24:24
439
4
原创 svg 和 canvas （两者均是画布）
svg 和 canvassvg是：一、矢量图，放大情况下不会产生马赛克（图形质量不会有所损失）。二、SVG 是万维网联盟的标准。三、可伸缩。四、SVG 的主要竞争者是 Flash。（Flash慢慢在被淘汰）五、通常用来设计图片，标签和css去绘制图像。svg实例：css样式： <style> *{ margin: 0; padding: 0; } svg{
2021-03-31 20:29:09
227
1
原创 浏览器渲染流程
浏览器渲染流程每个浏览器的渲染流程并不相同，以下webkit为例，主要包括以下五步：1、浏览器将获取的HTML文档解析成DOM树。2、处理css标签、样式，构成层叠样式表模型CSSOM（CSS Object Model）。3、将DOM和CSSOM合并为渲染树（rander tree）,代表一系列将被渲染的对象。4、渲染树（rander tree）的每个元素包括的内容都是计算过得，被称为布局（layout）。5、将渲染树（rander tree）的各个节点绘制到屏幕上，这一步被称为绘制（
2021-03-24 20:57:49
564
1
原创 js 防抖节流函数
js 防抖节流函数防抖(debounce)在前端开发中用户会频繁的触发事件执行,会消耗资源，会导致浏览器卡顿或者服务器崩溃。例如 : 搜索引擎 发送关键字给服务器，若是用户打错或打多关键字，引擎都会立马发送给服务器，这就会造成连续访问伏虎器导致服务器崩溃。防抖函数则要避免该情况发生，在用户输入完关键字之后延时一段时间在发送请求。 <input type="text" id="ipt"> <script> // 获取输入框 var ipt
2021-03-17 19:25:05
120
1
原创 js面试题（避免采坑）
先来道简单的热热身Question 1 ：<script> // 下列代码输出什么？ (function () { var a = (b = 3); })(); console.log('a defined? ' + (typeof a !== 'undefined')); console.log('b defined? ' + (typeof b
2021-03-11 11:30:30
177
1
原创 构造函数
1.定义：通过 new 函数名，来实例化对象的函数叫构造函数。构new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。new的作用：申请内存, 创建对象,当调用new时，后台会隐式执行new Object()创建对象。所以，通过new创建的字符串、数字是引用类型，而是非值类型。基本数据类型：number、boolean、string、undefined、null引用数据类型：Object常用的构造函数： var arr = []; 为 var a
2021-03-07 20:23:02
1754
原创 （js）原型、原型链到底是嘛呀？
原型、原型链到底是嘛呀？是这？来自百度百科（狗头咳咳！言归正传，以下才是正文哈。首先我们先用构造函数创建一个对象<script> function Show(){ } var show = new Show();</script>Show 就是一个构造函数，我们使用 new 创建了一个实例对象 show。默认情况下，prototype 是一个普通的对象，其中有个属性——constructor ，它也是一个对象，指向
2021-03-06 22:49:49
115
1
原创 js递归函数案例（斐波那契数列）
js递归函数案例（斐波那契数列）递归函数：直接或间接调用函数本身，则该函数称为递归函数。 <script> //斐波那契数列 1 1 2 3 5 8 13 21 ... （这个数列从第3项开始，每一项都等于前两项之和。） function a(num) { if(num===1||num===2){ return 1; }
2021-01-21 20:12:22
573
原创 作用域
作用域作用域分为：1.全局作用域 2.局部作用域全局作用域：概念：定义在函数外的变量，即为全局变量。特点：1.页面打开时全局作用域即被创建，页面关闭时即被销毁2.编写在script标签中变量和函数，作用域为全局3.该作用域在页面任意的位置都可以访问到 <script> var i = 0; console.log(i); start(); function start() { conso
2021-01-21 19:35:38
81
原创 js 循环小案例
一、输出100以内的素数首先我们要知道素数是什么：素数一般指质数，质数是指在大于1的自然数中，除了1和它本身以外不再有其他因数的自然数。 <script> var a, b; var i = 0; for (a = 2; a <= 100; a++) { for (b = 2; b <= 100; b++) { if (a % b == 0)
2021-01-18 20:31:17
505
原创 欢迎来到js世界！（two）
欢迎来到js世界！（two）今天我学习运算符和流程控制语句，任务量有点大哈！废话不多说，直接开始！一、运算符1.算术运算符+ 1.数学运算 2.字符串连接- 减* 乘/ 除% 取余（求模）<script> var a,b; a = 5; b = 2; console.log(a+b); // 控制台输出 7 console.log
2021-01-18 20:00:12
131
原创 欢迎来到js世界！（one）
莫西莫西，好久不见，大家喉！今天又要学习新知识惹，开不开森，快不快落！是的！开心、快乐，那么接下来欢迎进入js世界！js的定义js的发展js组成新的改变一、js的定义：是一种具有函数优先的轻量级，解释型 或即时编译型的编程语言。二、js的发展：它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScrip
2021-01-16 11:16:31
206
原创 如何创建弹性盒子？
如何创建弹性盒子？啥？啥时弹性盒子？解释解释！ok解释来了：弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。堵油俺的斯丹的？ 不懂？那咱么直接上手第一步：在弹性盒子（父级盒子）里添加 display：flex；样式.father { width: 100px; height: 100px;
2020-12-30 21:00:41
657
原创 CSS3制作动画案例（一）
哈喽！没错又是我。现在给大家展示我用CSS3做的一些3D案例吧！就是这个啦，其实还有动画效果的，就是截不下来。剧本@keyframes代码：@keyframes boss { from { transform: rotateX(-15deg) rotateY(0deg); } to { transform: rotateX(-15deg) rotateY(360deg); }}各个方块代码：八张照片，平分360度，那枚就需要每个
2020-12-24 20:11:29
317
2
原创 学习CSS3的第三天
学习CSS3的第三天又是新的一天啦，打起精神，学习一起来！！！今天我们要学习动画！对，没错！是动画！一、关键帧动画——animationanimation：① ② ③ ④ ⑤ ⑥ ⑦ ⑧；①animation-name 指定要绑定到选择器的关键帧的名称；②animation-duration 动画指定需要多少秒或毫秒完成；③animation-timing-function 设置动画将如何完成一个周期；④animation-delay 设置动画在启动前的延迟间
2020-12-24 19:51:47
69
1
原创 学习CSS3的第二天
学习CSS3的第二天第二天了第二天了，别睡了别睡了！起来学习啦！大家一起学习起来，学习使我快乐！继第一天的学习，我们打下了CSS3夯实的基础，现在我们要继续拓展CSS3中新增的还有哪些样式吼！出发够够够！一、背景渐变——background-image进过之前的学习大家应该知道background-image可以引入背景图片哈（不知道的集美or铁汁记得康康前面的文章哟，跟上大家的步伐），那么现在我要介绍它的新增样式渐变。1、linear-gradient（① ， ②） 线性渐变① a
2020-12-21 20:11:13
85
原创 学习CSS3的第一天
学习CSS3的第一天ok！通过前面的HTML+CSS的学习我们也开始渐渐了解了网页的基础结构和初级样式（新来的表贝，记得looklook前面的文章哟）。那么我们今天在一起来学习学习升级版CSS3吧！够够够！CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。首先呢我们来了解了解这CSS3有啥特别的吼。一、CSS3CSS3 就是CSS2的一个进阶版本 带来很多新属性和新本样式C3和C2最大的区别 C3是加入了动画的概念最特别的呢，不在这，在于它的兼容性：
2020-12-19 22:36:30
114
3
原创 两个阶段学会CSS（阶段二）
CSS盒子模型一、盒子模型是什么所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。如图 ：不同部分的说明：1、Margin(外边距) - 清除边框外的区域，外边距是透明的。2、Border(边框) - 围绕在内边距和内容外的边框。3、Padding(内边距) - 清除内容周围的区域，内边距是透明
2020-12-14 20:34:32
169
原创 两个阶段学会CSS（阶段一）
这里写自定义目录标题CSS基础入门CSS基础入门CSS基础入门学习目标：了解学习css样式且灵活运用一、什么是CSSCSS—层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的
2020-12-13 20:02:28
223
2
原创 HTML新手小白快速入门，冲冲冲！
HTML快速入门学习目标：了解HTML并搭建简单的基础静态网页学习一、什么是HTML：HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相
2020-12-08 18:15:29
287
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人