传说中的懿痕-CSDN博客

原创 DOM事件基础

事件基础文章目录事件基础事件概述事件三要素执行事件的步骤常见的鼠标事件事件概述JavaScript使我们有能力创建动态页面，而事件是可以被监测到的行为简单理解：触发——响应机制网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。事件三要素事件是由三部分组成：事件源、事件类型、事件处理程序。称为事件三要素<button id="btn">点击触发事件</button>事件源：事件触发的

2021-10-17 20:24:34 133

原创 DOM获取元素

DOM 获取元素文章目录DOM 获取元素DOM简介什么是DOM如何获取元素根据ID获取根据标签名获取通过HTML5新增的方法获取（IE浏览器只有IE9以上才能使用）特殊元素的获取DOM简介什么是DOM文档对象模型(Document Object Model，简称DOM)，是w3c组织推荐的处理可扩展标记语言(XML 或HTML)的标准编程接口W3C已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容、结构、样式如何获取元素主要有以下几种方法：根据ID获取根据标签名获取通过HTM

2021-10-17 20:01:14 142

原创 BOM窗口操作

BOM窗口操作窗口关系top对象始终指向最上层(最外层)窗口（因为可能存在iframe嵌套），即浏览器本身。如果当前窗口就是最上层窗口，则parent等于top（都等于window）。还有一个self对象，它是终极的window属性，始终会指向window。实际上window与self就是同一个对象，之所以要暴露self，就是为了和parent和top一致窗口位置与像素比window对象的位置可以通过不同的属性和方法来确定，浏览器提供了screenLeft和screenTop属性，用于表示窗口相对于

2021-10-16 14:53:06 387

原创 location对象

location对象window 对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们讲这个属性称为location对象文章目录location对象URLlocation对象location对象属性location对象的方法URL统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎样去处理它。URL 的语法格式protocol://host[:po

2021-10-13 22:56:41 99

原创 JS执行队列

Js执行队列文章目录Js执行队列JS执行机制同步和异步同步异步同步任务异步任务JS执行机制JavaScript语言的一大特点是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是处理页面中用户交互，以及操作DOM而诞生的，比如我们对某个元素进行添加和删除操作，不能同时进行，应先添加，之后删除。同步和异步HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中出现了同步和异步同步前一个任务结

2021-10-12 12:25:45 108 1

原创定时器的使用

定时器文章目录定时器setTimeout()定时器停止setTimeout()定时器setInterval()定时器停止 setInterval()定时器window对象给我们提供了两个非常好用的方法——定时器setTimeout()setInterval()setTimeout()定时器window.setTimeout(调用函数,延迟毫秒数);setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数注意：window可以省略调用函数可以直接写函数，也可

2021-10-12 11:10:41 162

原创 window对象常见事件

window对象常见事件文章目录window对象常见事件窗口加载事件调整窗口大小事件窗口加载事件window.onload=function(){}或者window.addEventListener('load',function(){})window.onload是窗口(页面)加载事件，当文档内容完全加载完会触发该事件（包括图像，脚本文件，CSS文件等），就调用处理函数注意：有了window.onload就可以把JS代码写到页面元素上面，因为onload是等页面内容全部加载完毕，再去

2021-10-11 22:57:34 225

原创 BOM概述

BOM概述BOM(Browser Object Model )即浏览器对象模型，他提供了独立于内容和浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性BOM浏览器对象模型把浏览器当作一个对象来看BOM的顶级对象是windowBOM学习的是浏览器窗口交互的一些对象BOM是浏览器厂商在各自浏览器上定义的，兼容性较差window对象是浏览器的顶级对象，他具有双重角色他是JS访问浏览器窗口的一个接口它是一个全局对象，定义在全

2021-10-11 22:26:13 69

原创一些有用的代理模式

代理模式资料来源JavaScript高级程序设计使用代理可以在代码中实现一些有用的编程模式跟踪属性访问通过捕获get、set和has等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问const user={ name:'yihen'}const proxy=new Proxy(user,{ get(target,property,receiver){ console.log(`获取属性${p

2021-10-07 21:20:38 74

原创代理捕获器与反射方法

代理捕获器与反射方法资料来源JavaScript高级程序设计代理可以捕获13种不同的基本操作。这些基本操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。文章目录代理捕获器与反射方法get()set()has()definePropertygetOwnPropertyDescriptor()deleteProperty()ownKeys()getPrototypeOf()setPrototypeOf()isExtensible()preventExtensions()apply

2021-10-06 16:52:22 147

原创捕获不变式

捕获器不变式使用捕获器几乎可以改变所有基本方法的行为，但也不也是没有限制。根据ECMAScript规范，每个捕获的方法都知道目标对象的上下文、捕获器签名，而捕获器处理程序的行为必须遵循“捕获器不变式”。捕获器不变式因方法不同而不同，但通常都会防止捕获器顶定义出现过于反常的行为比如，如果目标对象有一个不可配置且不可写的数据属性，那么捕获器返回一个与该属性不同的值时，会抛出TypeErrorconst target={ get(){ return "hello" }}

2021-10-05 12:45:43 170

原创代理与反射之捕获器

捕获器每个代理的主要目的是可以定义捕获器，捕获器就是在处理程序对象中定义的的基本操作的拦截器。每个处理程序对象可以包含0个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为const test={ name:"yihen"}const tag={ // 捕获器在处理程序对象中以方法名为键 get(){ retur

2021-10-03 22:22:27 277

原创手写Promise（三）——最终版

最终版最终版添加了catch、resolve、reject、all、race方法，最终以类的形式封装class Promise { // 构造方法 constructor(executor) { // 添加状态 this.PromiseState = 'pending' this.PromiseResult = null; // 声明属性 this.callback = []; // 保存

2021-09-26 16:23:40 76

原创手写Promise（二）——then方法的添加

then方法的添加最终代码放在最下面文章目录then方法的添加最终代码在有了构造函数的框架下，最重要的then方法应该怎么添加呢？最好的方法当然是添加到原型里了！分析内置的Promise的then方法，他接受两个参数，所以我们可以写成这样：// 添加then方法Promise.prototype.then = function (onResolve, onRejected) { // 通过实例的PromiseState判断执行哪一个参数 if (this.PromiseStat

2021-09-25 16:18:00 762

原创手写Promise（一）——构造声明函数

手写Promise构造函数完整的代码放在最下面文章目录手写Promise构造函数最终的代码在JS内置的Promise方法中，我们是这样声明的：const promise=new Promise((resolve,reject)=>{})所以我们要手写Promise的第一步就是覆盖掉原来的Promise。分析一下，在内置的Promise方法中，接收一个参数，是执行函数，所以我们手写的Promise也得有一个形参,并且在new 的时候会直接调用该实参，实参的执行器函数接收两个参数，所以代码如

2021-09-25 12:34:08 320

原创 Ajax速通（五）——fetch

fetch服务端代码const { request, response } = require('express');const expres=require('express');const app=expres();// fetch服务app.all('/fetch-server',(request,response)=>{ // 设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin',"*");

2021-09-20 23:53:06 75

原创 Ajax速通（四）——axios

axios服务端代码const { request, response } = require('express');const expres=require('express');const app=expres();// axios服务app.all('/axios-server',(request,response)=>{ // 设置响应头,设置允许跨域 response.setHeader('Access-Control-Allow-Origin',"*");

2021-09-20 23:51:29 93

原创 Ajax速通(三)——Ajax-Jquery

Ajax-JqueryJquery引入推荐使用https://www.bootcdn.cn/实例服务端代码// 1. 引入expressconst { response } = require('express');const express =require('express');// 2. 创建应用对象const app= express();// 3. 创建路由规则// request 是对请求报文的一个封装// response 是对响应报文的一个封装app.g

2021-09-20 23:48:29 92

原创 Ajax速通（二）——原生Ajax

原生Ajax所有操作都以注释的形式写在实例代码中文章目录原生Ajax重启工具nodemon安装服务端代码Ajax Get 请求Ajax POST请求Ajax JSON 响应IE 缓存问题请求超时或网络异常取消请求重复请求问题重启工具nodemon安装在测试的时候，我们需要频繁更改服务端代码，但是每次更改都需要重启一次过于麻烦，所以我们借助nodemon工具实现自动重启。安装方法：在终端输入 npm install -g nodemon使用方法：nodemon js文件如果报错：可以参考这个

2021-09-20 23:40:07 145

原创 Ajax速通（一）——前置知识

Ajax前置知识文章目录Ajax前置知识HTTP协议请求报文响应报文nodejs安装express框架的安装express的基本使用示例测试HTTP协议HTTP(hypertext transport prototool) 协议[超文本传输协议]，协议详细规定了浏览器和万维网服务器之间互相通信的规则。主要规定了两块内容：请求和响应。该内容可大致知道，不需要刻意记住请求报文这里重点介绍格式与参数请求行：包含三部分 1. 请求类型（如get） 2.url路径（域名后面的内容，3. HTTP协议版

2021-09-20 23:06:06 398

原创超详细Javascript数组使用

Javascript数组文章目录Javascript数组创建数组类数组转换为数组fromof数组空位数组索引迭代器方法复制与填充转换方法栈方法队列方法排序方法操作方法1. ```concat()```2. ```slice()```3.```splice()```创建数组这里提供两种方法创建数组new Array()let test=new Array();console.log(test) // []可以传入参数，如果传入的参数是数值，那么length会被赋值为传入的参数 let t

2021-09-15 22:11:49 259 1

原创 CSS进阶之堆叠上下文

堆叠上下文堆叠上下文（stack content），它是一块区域，这块区域有某个元素创建，它规定了该区域的内容在z轴上排列的先后顺序文章目录堆叠上下文创建堆叠上下文的元素同一个堆叠上下文中元素在z轴上的排列顺序。创建堆叠上下文的元素html元素（根元素）设置了z-index数值（非auto值）的定位元素同一个堆叠上下文中元素在z轴上的排列顺序。从后到前的排列顺序：创建堆叠上下文的元素的背景和边框堆叠级别（z-index，stack level）为负数的堆叠上下文，负数相同后面的覆盖前

2021-09-04 00:07:24 67

原创 CSS进阶之行盒的垂直对齐

行盒的垂直对齐文章目录行盒的垂直对齐多个行盒垂直方向上的对齐图片的底部白边多个行盒垂直方向上的对齐给没有对齐的元素设置CSS属性：vertical-align（设置在行盒上）预设值middle：中线对齐bottom：底边对齐top：顶边对齐text-top：文字顶边对齐text-bottom：文字底边对齐<p> <input type="checkbox"> <span>无对齐</span>

2021-09-03 12:11:14 158

原创 CSS进阶之浮动的细节规则

浮动的细节规则盒子位置左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的顶边不得高于上一个盒子的顶边若剩余空间无法放下浮动盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动示例指向左边的箭头表示左浮动若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。浮动盒子的顶边不得高于上一个盒子的顶边资料来源于渡一教育，仅作学习使用...

2021-09-03 11:52:00 130

原创 CSS进阶之块级格式化上下文

块级格式化上下文全称 Block Formatting Context , 简称BFC它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局,常规流块盒在水平方向上, 必须撑满包含块.常规流块盒在包含块的垂直方向上依次摆放常规流块盒若外边距无缝相邻, 则进行外边距合并常规流块盒的自动高度和摆放位置, 无视浮动元素BFC的渲染区域:这个区域由某个HTML元素创建, 以下元素会在其内部创建BFC区域:根元素(< html >元素创建的BFC区域,覆盖了网页中的所有元素)

2021-09-03 01:00:56 117

原创 CSS进阶之web字体和图标

web字体和图标如果字体名字是多个单词, 要用引号包围文章目录web字体和图标web字体字重(font-weight)字号(font-size)文本颜色(color)字体风格(font-style)大小写转换下划线等(text-decoration)文本阴影 (text-shadow)空白处理(white-space)文本溢出处理(让溢出部分显示为...)首行文本缩进(text-indent)文本对齐方式(text-align)垂直对齐(vertical-align)字符间距排版模式(writing-m

2021-09-02 14:17:15 100

5.Vue的生命周期.zip

空空如也