前端知识
文章平均质量分 88
举一个栗子吖
这个作者很懒,什么都没留下…
展开
-
JavaScript 数组字符串方法
向数组的一个或多个元素,并返回新的数组长度向数组的一个或多个元素,并返回新的数组长度删除并返回数组的最后一个元素,若该数组为空,则返回undefined删除并返回数组的第一个元素,若该数组为空,则返回undefined将数组倒序,返回倒序新数组对数组元素进行排序, 排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。从小到大升序:arr.sort(function(a,b){return a-b})从大到小降序:arr.sort(function(a,b){return b-a})添加原创 2022-06-18 19:38:15 · 1395 阅读 · 3 评论 -
Vue双向数据绑定原理
当一个vue实例创建时,vue会遍历data中对象所有的属性,使用Object.defineProperty(Vue3使用的是proxy)把这些属性全部转成getter / setter。 而每个组件实例都有Watcher对象,会在组件渲染的过程中把属性记录成依赖, 之后当依赖项的setter被调用时,会通知Watcher重新计算,从而使得关联的组件得以更新。...原创 2022-06-07 12:50:42 · 326 阅读 · 0 评论 -
ESLint介绍 ----安装配置
目录EsLint 介绍ESLint 安装配置VSCode规范化介绍为什么要有规范标准软件开发需要多人协同,不同程序员具有不同的编码习惯和喜好,不同的喜好增加项目维护成本,因此,每个项目或者团队需要明确统一的标准哪里需要规范化标准代码:符合web开发的基本原则、文件命名规范、HTML规范、CSS规范、JS书写规范、图片规范、其他未考虑到规范;开发过程中人为编写的成果物,如接口文档、测试用例、日志(请求日志、错误日志~)实施规范化的方法编码前人为的标准约定、 通过工具实现 LintEsLi原创 2022-04-18 21:59:03 · 3296 阅读 · 0 评论 -
Ajax基础知识
目录一. 原生AjaxAjax简介XML 简介AJAX 的特点二. HTTP相关问题HTTP 请求报文HTTP 响应报文常见的响应状态码不同类型的请求及其作用区别 一般http请求 与 ajax请求三. 原生AJAX 的基本使用 XHR1. 准备工作1.1 安装Node.js1.2 安装express2. 运行原理及实现2.1 Ajax实现步骤2.2 服务器端响应的数据格式2.3 请求参数传递一. 原生AjaxAjax简介AJAX 全称为Asynchronous JavaScript And原创 2022-04-08 20:13:36 · 576 阅读 · 1 评论 -
Node.js 基础知识------Ajax详细的环境搭建
准备学习Vue框架,在开始之前先大概过一遍Nodejs和Ajax基础知识,例如NPM包管理、文件读写、路由path、网络htttp等目录Node.js1、 安装Node.js2、系统模块fs文件操作3、系统模块 path 路径操作4、第三方模块(包)Ajax1.、概述Node.jsNode.js是一个基于 Chrome V8 引擎的 JavaScript运行环境Node.js内置API模块(fs、path、http等)第三方API 模块(express、mysql等)1、 安装Node.js原创 2022-04-07 19:27:54 · 2133 阅读 · 0 评论 -
ES6新增语法
ES6新增的用于声明变量的关键字 letlet声明的变量只在所处的块级作用域有效可以防止循环变量变成全局变量。在一个大括号中,使用let关键字声明的变量才具有块级作用域,var关键字不具备这个特点if (true) { let a = 10;}console.log(a) // a is not defined不存在变量提升只能先声明再使用 console.log(a); // a is not defined let a = 20;使用let关键字声明的变量具有原创 2022-04-06 14:37:03 · 1518 阅读 · 0 评论 -
JavaScript正则表达式
1. 概述正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式,在JS中,正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。正则表达式还常用于过滤页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。2. 特点灵活性、逻辑性和功能性非常的强可以迅速用极简单的方式达到字符串的复杂控制对于刚接触的人,比较晦涩难懂实际原创 2022-04-05 11:32:09 · 128 阅读 · 0 评论 -
JavaScript函数进阶
目录1. 函数的定义和调用1.1 函数的定义方式2. this3. 严格模式4. 高阶函数5. 闭包6. 递归1. 函数的定义和调用1.1 函数的定义方式函数声明方式function 关键字(命名函数) function fn() { };函数表达式(匿名函数) var fun = function() { };利用 new Function ,了解即可,因为效率低,也不方便书写,较少使用var fn = new Function('参数1','参数2原创 2022-04-04 17:43:36 · 1254 阅读 · 0 评论 -
JS构造函数和原型
1. 构造函数和原型1.1 概述在典型的OOP语言中,例如java,都存在类的概念。类就是对象的模板,对象就是类的实例,但是在ES6之前,JS没有引入类的概念。ES6 全称ECMAScript 6.0,2015.06发版。在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方式:对象字面量//var obj1 = { }new Object()//var obj2 = new Object()自定义构造函数1.2 构原创 2022-03-31 22:37:03 · 867 阅读 · 0 评论 -
JavaScript面向对象
1. 面向对象编程两大编程思想面向过程 POP (Process-oriented programming)分析出解决问题所需要的步骤,然后用函数把这些步骤一步步实现,使用的时候一步步调用面向对象 PPO (Object Oriented programming)把事务分解成为一个个对象,然后由对象之间分工与合作。以对象功能划分问题,而不是步骤。面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。面向对象特性封装性继承性多态性2. ES6中原创 2022-03-31 19:00:38 · 989 阅读 · 0 评论 -
CSS样式和属性总结 + 高频面试题
本系列实时更新CSS基础、选择器、文本和字体属性、盒模型、浮动、背景、2D3D转换1、元素水平 / 垂直居中的方法合集水平居中行内元素text-align: center ;块级元素margin: 0 auto ;绝对定位 50% + 自我位移 50%position: absolution ;left: 50% ;transform: translateX(-50%) ;flex布局display: flex ;justify-content: center ;垂直居中原创 2022-03-30 11:16:49 · 129 阅读 · 0 评论 -
PC 端网页特效
1. 元素偏移量 offset 系列1.1 offset 概述offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意: 返回的数值都不带单位offset 系列常用属性:1.2 offset 与 style 区别2. 元素可视区 client 系列3. 元素滚动 scroll 系列4. 动画函数封装5. 常见网页特效案例...原创 2022-03-29 14:47:01 · 160 阅读 · 0 评论 -
JavaScript ------ BOM 浏览器对象模型
1. 概述BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 windowBOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分BOM 比 DOM 更大,它包含 DOMwindow 对象是浏览器的顶级对象,它具有双重角色。它是 JS 访问浏览器窗口原创 2022-03-28 15:57:39 · 169 阅读 · 0 评论 -
JavaScript ------ DOM(事件高级)
DOM(事件高级)1. 注册事件(绑定事件)2. 删除事件(解绑事件)3. DOM 事件流4. 事件对象1. 注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式1. addEventListener 事件监听方式eventTarget.addEventListener(type, listener[, useCapture])// 将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执原创 2022-03-27 20:56:06 · 171 阅读 · 0 评论 -
JavaScript ------ DOM(事件基础)
API (Application Programming Interface 应用程序编程接口) 是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而无需访问源码,或理解内部工作机制的细节。简单理解:API是给程序员提供的一种工具,以便轻松的实现想要完成的功能。Web API是浏览器提供的一套操作浏览器功能和页面元素的API(DOM + BOM)。现阶段针对浏览器讲解常用的API,主要针对浏览器做交互效果。Web API 一般都有输入和输出(函数的传参和返回值)原创 2022-03-25 22:39:27 · 1231 阅读 · 0 评论 -
JavaScript语法基础(四)
查阅文档Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。MDN: https://developer.mozilla.org/zh-CN/查阅该方法的功能查看里面参数的意义和类型查看返回值的意义和类型通过 demo 进行测试内置对象JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些原创 2022-03-23 11:48:43 · 1395 阅读 · 0 评论 -
JavaScript语法基础(三)
1、数组创建数组// 利用 new 创建数组var 数组名 = new Array( ) ;var arr = new Array( ) ; //创建一个新的空数组// 利用数组字面量创建数组var 数组名 = [];var arr1 = [1,2,7,4,'color', true];访问数组// 访问数组元素 数组名[索引号]arr1[4] //‘color’遍历数组数组索引号从0开始数组名.length 可以获取数组长度for (var i=0; i <原创 2022-03-22 16:39:33 · 1022 阅读 · 0 评论 -
JavaScript语法基础(二)
目录流程控制-分支结构if 语句if else语句(双分支语句)if else if 语句(多分支语句)三元表达式switch语句流程控制-分支结构流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。JS 语言提供了两种分支结构语句if 语句switch 语句if 语句// 条件成立执行代码,否则什么也不做if (条件表达式) { // 条件成立执行的代码语句}if else语句(双分支语句)// 条件成立 执行 if 里面代码,原创 2022-03-22 09:23:02 · 376 阅读 · 0 评论 -
JavaScript语法基础(一)
写目录1、输入输入语句2、变量变量语法扩展变量命名规范1、输入输入语句2、变量变量语法扩展变量命名规范原创 2022-03-21 21:59:52 · 5396 阅读 · 1 评论 -
HTML5 和CSS3 提高
1、HTML5的新特性HTML5的新增性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性有兼容性问题,基本都是IE9+以上版本才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1.1、HTML5的新增的语义化标签以前布局,基本都是div来做,但它对于搜索引擎来说,是没有语义的。<header>: 头部标签<nav>: 导航标签<article>: 内容标签<section>:定义文档某个区域<asid原创 2022-03-17 17:14:42 · 427 阅读 · 0 评论 -
CSS——高级技巧
目录1、精灵图1.1、 为什么需要精灵图1.2、 精灵图(Sprites)的使用1、精灵图1.1、 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。为了有效地减少服务器接收和发送请求地次数,提高页面地加载速度,出现了CSS精灵技术(CSS Sprites)。核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以。1.2、 精灵图(Sprites)的原创 2022-03-16 21:30:32 · 199 阅读 · 0 评论 -
CSS——定位
1、定位1.1、为什么需要定位定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子浮动:可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子1.2、定位组成1.3、静态定位static(了解)1.4、相对定位relative(重要)...原创 2022-03-15 17:30:13 · 105 阅读 · 0 评论 -
学成在线案例
1、准备工作代码示例:2、代码原创 2022-03-15 10:28:53 · 202 阅读 · 0 评论 -
CSS——浮动
浮动传统网页布局三种方式网页布局本质:用CSS来摆放盒子,把盒子摆放到相应位置。CSS提供了三种传统的布局方式(盒子如何进行排列)普通流浮动定位标准流(普通流 / 文档流)标签按照规定好默认方式排列,标准流是最基本的布局方式1、块级元素独占一行,从上往下排列常用元素:div 、hr、 p、 h1~h6、 ul、 ol、 dl、 form、 table等2、行内元素按照顺序,从左到右顺序排列,碰到父元素边缘自动换行常用元素:span 、a、 i、em等为什么需要浮动有很原创 2022-03-12 11:36:53 · 657 阅读 · 0 评论