![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端三剑客
文章平均质量分 68
likepoems
个人博客: likepoems.com
展开
-
JavaScript实现右键菜单
JavaScript实现博客的右键菜单原创 2023-11-22 16:12:44 · 713 阅读 · 0 评论 -
JS比较前后两个数组对象的差异
js数组方法,比较两个数组对象前后的差异原创 2023-03-07 13:39:51 · 1145 阅读 · 1 评论 -
对象的深拷贝和浅拷贝总结
对象的深拷贝和浅拷贝原创 2022-05-26 12:06:33 · 233 阅读 · 0 评论 -
JavaScript实现带省略号的分页
JavaScript实现带省略号的分页更新实现效果地址原创 2022-05-25 14:56:40 · 1242 阅读 · 1 评论 -
原生Ajax处理文件流
在通过Ajax处理请求时,可能会遇到需要下载文件的情况,这里简要的说明下处理方法。let downloadFile = document.getElementById("downloadImportInfo");let fileUrl = "D:/test.xlsx"; // ajax获取到的文件地址downloadFile.onclick = function () { const xhr = new XMLHttpRequest(); let url = "localhost:.原创 2022-05-23 16:29:37 · 1823 阅读 · 0 评论 -
jQuery+bootstrap实现有省略号的数据分页
jQuery+bootstrap实现有省略号的数据分页更新实现效果地址原创 2022-05-21 16:10:21 · 1807 阅读 · 6 评论 -
前端面试题
1、第一组1、jquery中的$是什么意思在JQuery中,“$”就是jQuery的别称,是jQuery库提供的一个回传函数,定义为“选取”,是“selector”的缩写;语法“$ (selector)”,作用是根据“ ()”里的参数进行查找和选择html文档中的元素。2、圣杯布局、等高布局写法// 圣杯布局<style> .father{ padding: 0 300px 0 200px; } .son_left, .son_center, .原创 2021-11-17 09:29:22 · 1370 阅读 · 0 评论 -
斐波拉契数列
1、斐波拉契数列的描述斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家莱昂纳多·斐波那契(Leonardo Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:0、1、1、2、3、5、8、13、21、34、……2、斐波拉契数列的几种实现方法2.1 递归let Fib = (number) => { if ...原创 2021-11-24 05:57:13 · 149 阅读 · 0 评论 -
栈的简单使用
栈1、基本含义栈遵循后进先出的规则(LCFO),元素从栈顶进入,先进入的元素会慢慢向栈底的方向移动,后进的元素会从栈顶出去。简单的示意图:入栈顺序是从上到下,出栈刚好相反。在JavaScript中,入栈可以看成数组尾部添加即push;出栈可以看成pop;2、举个例子class Stack { constructor() { this.arr = []...原创 2021-11-24 13:23:19 · 361 阅读 · 0 评论 -
扁平化多维数组
将下面的多维数组打开,输出去重后的结果(扁平化数组)function fn(array, result = []) { for (let i of array) { if (Array.isArray(i)) { fn(i, result) } else { result.push(i) } } return result}let s = fn([1, 2, 3, [1, 2, 2,原创 2021-11-25 19:50:09 · 106 阅读 · 0 评论 -
JS常见问题总结
1. 什么是 JavaScript ?JavaScript 是一种具有面向对象的、解释型的、基于对象和事件驱动的、跨平台的、弱类型的程序设计语言2. JavaScript 与 ECMAScript 的关系?ECMAScript 是规则,JavaScript 是对规则的体现3. 变量的命名规则?严格区分大小写,由英文、数字、下划线、$组成,推荐使用驼峰命名法,不能使用保留字和关键字,见名知意,名字不能重复4. window.onload 的作用?当页面加载完成后再执行5. js 数据类型?基原创 2021-02-01 07:22:36 · 2165 阅读 · 0 评论 -
JS 学习笔记(二)Ajax的简单使用
使用Ajax访问本地TXT文件ajax.js// 创建请求对象var ajax = new XMLHttpRequest();// 建立连接ajax.open('get', 'test.txt');// 发送请求ajax.send()// 监听结果ajax.onreadystatechange = function () { // readyState 状态值 s...原创 2021-03-12 03:09:56 · 57 阅读 · 0 评论 -
JS 学习笔记(一)常用的字符串去重方法
要求:从输入框中输入一串字符,按回车后输出去重后的字符串方法一:<body> <input type="text" id="input" placeholder="请输入字符串"> <p id="p1"></p></body><script> document.onkeydown = fu...原创 2021-04-02 14:07:14 · 313 阅读 · 0 评论 -
ES6 学习笔记(一)let、const与作用域
一、let命令1.1用法1.1.1 let类似于var,但所声明的变量只在let命令所在的代码块有效。如:{ let a = 10 var b = 20}console.log(b)console.log(a)输出结果:20D:\code\Workspace\JS_projects\test\02\01.js:10console.log(a)^Ref...原创 2021-04-02 18:12:59 · 147 阅读 · 0 评论 -
ES6 学习笔记(二)解构赋值
一、数组的解构赋值1、基本用法ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构如:let [a,b,c]=[1,2,3];console.log(a,b,c) // a=1 b=2 c=3let [foo,[[bar], baz]]=[1,[[2],3]];console.log(foo,bar,baz) // foo=1 bar=2 baz...原创 2021-04-03 20:51:08 · 147 阅读 · 0 评论 -
ES6 学习笔记(四)基本类型Number
1、数值1.1 、JavaScript数值的特点不区分整数值和浮点数值。所有数值均用浮点数值表示。采用IEEE-754标准定义的64位浮点数格式表示。整数在实际操作时(如数组索引),则是基于32为整数。1.2、 整数直接量除十进制外,JavaScript能识别十六进制(以0x或0X为前缀)、二进制(以0b或0B为前缀)和八进制(以0o或0O为前缀)如:0xff ---...原创 2021-04-05 02:11:13 · 333 阅读 · 0 评论 -
ES6 学习笔记(三)原始值与引用值
总结:1、原始值,表示单一的数据,如10,“abc”,true等。1.1、 ES的6种原始值: Undefined、Null、Boolean、Number、String、Symbol1.2、 保存原始值的变量是按值访问,操作存储在变量内存中的实际值2、引用值,表示有多个值(原始值或其他引用值)构成的对象2.1、 ES不允许直接访问对象的内存空间。2.2、 实际操作对象时,访问的...原创 2021-04-05 23:53:37 · 261 阅读 · 0 评论 -
ES6 学习笔记(五)基本类型Boolean
Boolean1、需要注意的地方:取值:true false对于值为空字符串,0,-0,NaN,Null,undefined,false的布尔对象,它都会有一个初始值false。对于其它的值如"false",[]等都会建立一个初始值是true的对象。不能把基本类型中true或false和值为true或false的对象搞混淆了。2、Boolean 的转化:1、使用Boole...原创 2021-04-07 03:33:31 · 574 阅读 · 0 评论 -
ES6 学习笔记(六)基本类型String
字符串String1、字面量需要注意的地方:由单引号或双引号括起来的字符序列。单双引号可以嵌套,由最外围引号定界字符串字符串字面量可以拆分成数行,每行必须以反斜线(\)结束,且反斜线都不计入字符串的内容。在书写HTML的JS代码时,要注意与HTML代码混合搭配使用引号。实例代码:let str1 = "I have a dog"let str2 = "My 'dog' ...原创 2021-04-07 14:49:57 · 388 阅读 · 0 评论 -
ES6学习笔记(七)正则表达式
正则表达式1、基础1.1 含义:通俗的来讲,正则表达式是一种匹配和替换的工具。如:在JS中验证手机号时,我们需要考虑用户输入的字符必须是number类型,且必须是11位的整数,且数字的前三位必须是134,155,183,188,199等等。对于这一问题,可以用if-else来实现,只不过太过于麻烦,而正则表达式就将这一问题简单化。1.2 组成部分一个完整的正则表达式由分隔符,表达式...原创 2021-04-18 17:12:29 · 1429 阅读 · 0 评论 -
JS学习笔记 (三) 对象进阶
1、JS对象1.1 JS对象特征1、JS对象是基本数据数据类型之一,是一种复合值,可以看成若干属性的集合。属性是名值对的形式(key:value)属性名是字符串,因此可以把对象看成是字符串到值的映射2、对象除了可以保持自有的属性,还可以从一个称为原型的对象继承属性。其中,原型链继承是JavaScript的核心特征。3、对象是动态的,可以增加或删除属性。4、除了字符串、数值、...原创 2021-04-28 14:46:44 · 140 阅读 · 0 评论 -
JS学习笔记 (四) 数组进阶
1、基本知识1、数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始。2、数组是无类型的。数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型。数组的元素可以是对象或其它数组。3、数组是动态的,数组长度可长可短。在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间4、数组可以是稀疏的。数组元素的索引不一定是连...原创 2021-05-05 08:26:20 · 377 阅读 · 0 评论 -
JS学习笔记 (五) 函数进阶
1、函数基础1.1 函数的基本概念函数是一段JavaScript代码,只被定义一次,但是可以被调用或者执行许多次。函数是一种对象,可以设置属性,或调用方法。函数中的参数分为实参和形参。其中,形参在函数体中类似局部变量,函数调用会为形参提供实参的值。函数使用实参的值来计算返回值,成为该函数调用表达式的值。除了实参外,函数每次调用都会有一个this的值。如果函数挂载在对象的属...原创 2021-05-06 18:48:14 · 124 阅读 · 0 评论 -
JS 可编辑表格的实现
1、实现效果用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化。先看下效果,如图:2、设计思路先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画。给要修改的数据的单元格添加name属性,给总分那一列的单元格添加rname属性。先获取所有要更改数据的单元格,通过for循环遍历,给他们添加单击事件。定义一个addAnimate方法,表示...原创 2021-05-08 05:26:29 · 4085 阅读 · 6 评论 -
JS 可编辑表格的实现(进阶)
1、前言在普通的可编辑表格的基础上,改进可编辑表格。数据来自外部的json(模拟服务端),通过json数据生成可编辑表格。根据实际情况,表格没有新增数据功能。表格的可编辑列,计算的列,每列的数据大小,以及是否删除都可进行配置,在修改单元格内容和删除行数据都会映射到相应数据集中。实现效果:2、设计思路与方法现将基本样式写好,将所有的数据写在json文件里。定义两个空数组,通过Aja...原创 2021-05-09 07:43:38 · 3363 阅读 · 2 评论 -
JS 学习笔记 (六) 函数式编程
1、函数闭包1.1 概述JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的。为了实现这种词法作用域,JavaScript函数对象的内部状态不仅包含函数的代码逻辑,还必须引用当前的作用域链。函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性被称为“闭包”从技术的角度讲,所有的J...原创 2021-05-09 19:05:09 · 265 阅读 · 0 评论 -
JS 学习笔记 (七) 面向对象编程OOP
1、前言创建对象有很多种方法,最常见的是字面量创建和new Object()创建。但是在需要创建多个相同结构的对象时,这两种方法就不太方便了。如:创建多个学生信息的对象let tom = { name: "Tom", age: 20, sex: "boy", height: 175};let marry = { name: "Marry",...原创 2021-05-10 14:13:30 · 241 阅读 · 0 评论 -
ES6 学习笔记(九)Set的基本用法
1 基本用法set类似于数组,它的成员是唯一的,当有多个相同的值,只会保留一份。1.1 创建方法Set本身是一个构造函数,用来生成Set实例,如:const s = new Set()let arr = [2, 3, 4, 5, 6, 2, 2]arr.forEach(x => s.add(x));for (let i of s) { console.log(i)...原创 2021-05-23 10:26:30 · 230 阅读 · 0 评论 -
ES6 学习笔记(十)Map的基本用法
1 基本用法Map类型是键值对的有序列表,而键和值都可以是任意类型。可以看做Python中的字典(Dictionary)类型。1.1 创建方法Map本身是一个构造函数,用来生成Map实例,如:let m1 = new Map()1.2 初始化Map构造函数可以接收一个数组作为参数,该数组的成员可以是一组表示键值对的数组。也可以是任何具有 Iterator 接口、且每个成员都是一个...原创 2021-05-23 20:20:49 · 2411 阅读 · 0 评论 -
ES6 学习笔记(十一)迭代器和生成器函数
1、前言JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性(迭代)。从以前的for循环到之后的filter、map再到后来的for...in和for...of的迭代机制。只要具有iterator接口的都可被迭代。2、迭代器 Iterator2.1 含义迭代器(iterator)为各种数据结构,提供一个统一的、简便的访问接口,简单的说,迭代可以是数组或对象的遍历...原创 2021-06-06 08:18:35 · 109 阅读 · 0 评论 -
ES6 学习笔记(十二)代理器Proxy的简单使用
1、前言以前在学习react时做了个仿手机端的QQ音乐项目。当时的数据是通过proxy代理的QQ音乐数据接口,直接写在package.json里面。Proxy 对象(Proxy)是 ES6的特性,只是不太常用。2、基本内容2.1 含义正如MDN上所说,Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。通俗的讲,Proxy是...原创 2021-06-15 17:49:25 · 354 阅读 · 0 评论 -
ES6 学习笔记(十三)promise的简单使用
1、什么是promise在JavaScript中,我们经常会用到回调函数,而回调函数的使用让我们没法使用return,throw等关键字。JS引用promise正好解决了这个问题。promise单词意思是承诺,代表未来的某个事情或者是行为。promise是一个容器,包含了异步操作。因此我们认为promise是异步操作的解决方案。所有异步操作都可以通过promise来解决2、了解prom...原创 2021-06-19 03:15:41 · 119 阅读 · 0 评论 -
ES6学习笔记(十四)module的简单使用
1、前言module模块机制是es6新引入的,它解决了作用域的问题,使代码更加规范和结构化。下面简单的使用一下。2、基本使用2.1 模块和脚本的区别模块代码运行在严格模式下,并且没有任何办法跳出严格模式。在模块的顶级作用域创建的变量,不会影响到全局作用域,它们只会在模块顶级作用域的内部存在。模块顶级作用域的this值为undefined。模块不允许在代码中使用HTML风格的...原创 2021-06-19 11:11:41 · 476 阅读 · 0 评论 -
前端html和css总结
1、html知识总结1.1 表格的的相关属性属性表示border-collapse设置表格的边框是否被合并为一个单一的边框cellpadding单元格边距cellspacing单元格间距valign: top顶对齐 单元格内容垂直方向的对齐方式valign: middle居中对齐valign: bottom底部对齐cols...原创 2021-10-12 11:13:55 · 155 阅读 · 0 评论 -
HTML5+CSS3常见布局方式
1、等高布局1.1 代码等高布局是指子元素在父元素中高度相等的布局方式<div class="father"> <div class="f1"> 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首...原创 2021-10-19 01:23:01 · 814 阅读 · 0 评论 -
HTML5和CSS3新特性
1、HTML5新标签和属性1.1 兼容性前缀与语义化兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的。内核兼容性前缀浏览器Gecko-moz-FirefoxWebkit-webkit-Chrome、SafariPresto-o-OperaTrident-ms-IE语义化:根据页面的结构,选择...原创 2021-10-12 20:25:50 · 127 阅读 · 0 评论