自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(41)
  • 资源 (1)
  • 收藏
  • 关注

原创 git基本管理

工作区管理git clean命令用来从工作目录中删除所有没有跟踪(tracked)过的文件git clean -n 是一次clean的演习, 告诉你哪些文件会被删除git clean -f 删除当前目录下没有tracked过的文件,不会删除.gitignore指定的文件git clean -df 删除当前目录下没有被tracked过的文件和文件夹git checkout . 将没有放入到暂存区的所有文件恢复git checkout hd.js 放弃指定文件的修改git checkout – h

2022-02-14 13:37:29 176

原创 nrm的安装与使用

nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换。安装npm i -g nrm使用1.查看可选源nrm ls2.查看当前使用的源nrm current3.切换源nrm use <registry>4.添加源nrm add <registry> <url>5. 删除源nrm del <registry>6. 测试源速度nrm test <registry>...

2022-02-11 22:03:42 248

原创 git入门

安装Git可以在windows、Mac、Linux全平台系统使用。登录 https://git-scm.com/downloads 下载你系统的Git软件并进行安装。安装成功后可以在终端输入:git --version查看版本。初始配置配置文件为 ~/.gitconfig ,执行任何Git配置命令后文件将自动创建。第一个要配置的是你个人的用户名称和电子邮件地址。这两条配置很重要,每次 Git 提交时都会引用这两条信息,说明是谁提交了更新,所以会随更新内容一起被永久纳入历史记录:git confi

2022-02-04 20:13:06 442

原创 less 入门

变量可以设置变量,同一个变量可以重复被使用。@width: 10px;#header{ width: @width;}编译:header{ width: 10px;}混合混合是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。.test{ width: 10px;}.main{ .test(); height: 10px;}编译:.main{ width: 10px; height: 10px;}嵌套#header{ width: 100p

2021-12-25 21:43:37 96

原创 node.js文件系统

fs 模块提供了许多非常实用的函数来访问文件系统并与文件系统进行交互,无需安装。 作为 Node.js 核心的组成部分,可以通过简单地引用来使用它。下面是常用的api:fs.access(): 检查文件是否存在,以及 Node.js 是否有权限访问。fs.appendFile(): 追加数据到文件。如果文件不存在,则创建文件。fs.chmod(): 更改文件(通过传入的文件名指定)的权限。相关方法:fs.lchmod()、fs.fchmod()。fs.chown(): 更改文件(通过传入的文件名指

2021-12-14 17:02:20 738

原创 javascript异步机制 — call stack

代码在运行过程中,会有一个叫做调用栈(call stack)的概念。调用栈是一种栈结构,它用来存储计算机程序执行时其活跃子程序的信息。(比如什么函数正在执行,什么函数正在被这个函数调用等等信息)。调用栈是JS引擎执行程序的一种机制。程序每调用一层函数(方法),引擎就会生成它的栈帧,栈帧里面保存了函数的执行上下文,然后将它压入调用栈。栈是一个后进先出的结构,直到最里层的函数执行完,引擎才开始将最后加入的栈帧从栈中弹出。函数调用会在内存形成一个“调用记录”,又称“调用帧”(call frame),保存调用位置

2021-12-14 15:48:15 1009 1

原创 javascript调试

程序调试是我们在开发经常要做的事情,没有调试工具是很难去编写 JavaScript 程序的,你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。在javascript中主要有以下这几种调试方法。console.log()这是一种静态的调试方法,可以在控制台上输出相应的数值,可以给我们看到相应的数值变化。断点调试断点调试是一种动态的调试方法,在复杂的bug面前,这是一种很高效的方法。下面我们假设存在一个累加的bug,然后通过这两种方法来调试bug: 从1累加到10,发现输出

2021-12-14 15:16:16 683

原创 javascript的错误处理

try/catch/finally 语句try/catch/finally语句作为javascript的一种处理异常的方式,基本语法如下代码所示:try{ //可能出错的地方 console.log(a);}catch(error){ //打印错误信息 console.log(error);}finally{ //无论是否出错都会执行的代码 console.log("finally");}错误类型● Error● InternalError

2021-12-14 14:19:10 515

原创 html5新特性

语义标签常见语义标签:标签描述<header></header>定义了文档的头部区域<footer></footer>定义了文档的尾部区域<nav></nav>定义文档的导航<section></section>定义文档中的节(section、区段)<article></article>定义页面独立的内容区域<aside

2021-12-12 17:18:57 206

原创 本地存储localStorage和sessionStorage

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。不同浏览器无法共享

2021-12-12 16:56:42 235

原创 affset、client、scroll

offsetoffsetWidth offsetHeightoffsetWidth 元素控件自身的宽度。不包括overflow未显示的部分。offsetHeight 元素控件自身的高度。offsetLeft offsetTopoffsetTop: 指元素距离最近的(带有定位的)父元素的顶部的距离,如果没有定位则为距离根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)顶部的距离。offsetLeft :指元素距离最近的(带有定位的)父元素的左侧的距离,如果没有定位则为距离根元

2021-12-12 16:44:45 200

原创 javascript中的事件

在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件,比如用户的单击行为、表单内容的改变行为即为事件,我们可以为不同的事件定义处理程序。JS使用异步事件驱动的形式管理事件。绑定事件的方法html绑定<button onclick="alert(`houdunren.com`)">点击</button>DOM绑定<div id="app">hello js</div><script> const app = document

2021-12-12 16:28:56 208

原创 使用axios发送网络请求

发送get请求<!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"> <titl

2021-12-12 13:54:37 606

原创 BOM(浏览器对象模型)

BOM对象包含的内容window javascript层级的顶层对象,表示浏览器窗口Navigator 包含客服端浏览器的信息History 包含了浏览器窗口访问过的URLLocation 包含当前的URL信息Screen 包含客服端显示屏的信息window对象属性属性说明closed返回窗口是否已被关闭。defaultStatus设置或返回窗口状态栏中的默认文本。 (仅 Opera 支持)document对 Document 对象的只读引用。 请参阅 D

2021-12-11 22:29:37 100

原创 节点对象管理

javascrip操作的内容称为节点对象 Node ,包含12中类型的节点对象,常用的节点为document,标签元素节点,注释节点。节点均继承Node类型,所以有相同的属性和方法。document为DOM操作的起始节点。在浏览器渲染的过程中回将文档内容生成为不同的对象,不同的节点由专有的构造函数创建对象,下面时节点的原型链:原型说明Object根对象,提供hasOwnProperty等基本对象操作支持EventTarget提供addEventListener、remove

2021-12-11 16:51:08 268

原创 http协议

HTTP协议(超文本传输协议HyperText Transfer Protocol),它是基于TCP协议的应用层传输协议,简单来说就是客户端和服务端进行数据传输的一种规则。HTTP 是一种无状态 (stateless) 协议, HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理。这样做的目的是为了保持HTTP协议的简单性,从而能够快速处理大量的事务, 提高效率。HTTP请求协议Request Headers常见属性Accept 指定客户端能够接收的内容类型 Accept: text/pl

2021-12-11 14:46:10 2142

原创 使用jQuery的Ajax发送网络请求

ajax()基本参数$.ajax({type:‘POST’, // 规定请求的类型(GET 或 POST)url:uploadV, // 请求的url地址dataType:‘json’, //预期的服务器响应的数据类型data:{},//规定要发送到服务器的数据beforeSend:function(){ //发送请求前运行的函数(发送之前就会进入这个函数)// …},contentType:发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-url

2021-12-11 13:33:59 290

原创 XMLHttpResquest level2 新特性

请求时限xhr.timeout函数可以设置请求时限,如果超过设置的请求时限,就会停止http请求。还可以设置一个请求超时的回调函数。var xhr = new XMLHttpRequest();xhr.open("get","http://127.0.0.1:8000?name=js&age=18");xhr.timeout = 1;xhr.timeout = function(err) { console.log("请求超时");};xhr.send();xhr.onloa

2021-12-11 12:57:30 341

原创 使用XMLHttpRequest发送网络请求

使用XMLHttpRequest发送get请求步骤创建xhr对象调用xhr.open()函数调用xhr.send函数监听onreadystatechange事件未携带参数的get请求var xhr = new XMLHttpRequest();xhr.open("get","http://127.0.0.1:8000");xhr.send();xhr.onreadystatechange = function() { if(xhr.readyState === 4 &

2021-12-10 15:30:40 5658

原创 异步任务管理终极方案(async await)

回调函数管理异步任务,会造成难以看懂和维护的回调地狱。使用promise可以解决回调地狱问题,但是还是不过简洁和优雅。所以出现了async,await结合的方案,使异步编程看起来几乎跟同步编程一样,跟利于代码的维护。废话少说,直接上代码。function s1(){ return new Promise((resolve,reject) => { setTimeout(() => { var a = 1; console.

2021-12-09 22:32:52 547

原创 promise实现异步任务管理

Promise是一个构造函数,我们可以通过new 创建一个promise对象。var p = new Promise((resolve,resject) =>{});console.log(p);输出:Promise {<pending>}[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag):

2021-12-09 18:11:31 526

原创 javascript异步编程

javascript语言有一个很大的特点就是单线程,也就是在同一个时间只能处理一个任务。为了协调时间,用户交互,网络处理等行为。防止线程不被阻塞,Event Loop 的方案应用而生。javascript引擎处理任务是在执行任务,等待任务,休眠等新任务中不断循环,这种机制被称为时间循环。javascript中的任务分类同步任务程序一运行就会执行的任务,无需等待异步任务异步任务:不会立即执行的任务(异步任务又分为宏任务与微任务),网络请求,DOM时间,定时器等都是异步任务。微任务的优先级比宏任务的

2021-12-09 14:45:33 68

原创 javascript中的类(class)

ES6引入了类(class)这概念,通过class可以定义类。相比之前利用构造函数定义类,class会更为简洁,清晰,更像是一门面向对象语言。class的实现本质上还是利用构造函数和原型链。或者可以说是一种语法糖。实现一个类class Obj{ constructor(name){ this.name = name; this.fun = function () { console.log(this.name); }

2021-12-09 13:39:07 567

原创 javascript继承实现的方法

1.原型链继承function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//继承了SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue

2021-12-09 10:10:16 86

原创 原型与原型链

原型每一个对象都有一个原型对象,原型可以理解为对象的父亲,对象从原型继承它的方法和属性。对象有一个__proto__属性指向它的原型。var obj = {};var arr = [];console.dir(obj.__proto__);console.dir(arr.__proto__);输出:Object Array(0)可以看到obj的原型时Object,arr的原型是Array。Object.create使用Object.create()创建对象可以使用现用的对象做为新对

2021-12-08 18:04:15 84

原创 代理与反射

代理拦截是对象的访问控制,使用代理拦截的好处。读写属性时代码更简洁对象的多个属性控制统一交给代理完成

2021-12-08 16:17:03 100

原创 对象的浅拷贝与深拷贝

javascript中的数据类型分为值类型和引用类型,值类型存储在堆内存,而引用类型主要存储在栈内存。浅拷贝和深拷贝都是对于javascript中的引用类型而言。浅拷贝只复制了对象的引用(地址),而深拷贝是创建一个新的对象来完全复制另一个对象的内容。只有深拷贝才能做到真正的对象拷贝。浅拷贝var obj = {name: "js",age: 18};var copyObj = obj;obj.name = "hello";console.log(obj.name,copyObj.name);输出

2021-12-08 14:21:02 245

原创 属性访问器

使用属性访问器的好处用于避免错误的赋值需要动态监测值的改变属性只能在访问器和普通属性任选其一,不能共同存在getter/settergetter方法用于获得属性值,setter方法用于设置属性。我们来看一下具体的应用。var user = { data: { name: 'js', age: null }, set age(value) { if (typeof value != "number" || value > 100 || value < 10) {

2021-12-08 12:07:43 206

原创 mysql常用语句

起到mysql服务:net start mysql关闭mysql服务:net stop mysql登录数据库:mysql -u root -p选定操作的数据库:use mysql;查看数据库:show databases;查看数据库中的所有表:show tables from mysql;查看数据库中某个表的内容:select * from mysql.user;创建数据库: create database test;删除数据库:drop database test;MySQL的数据类型主

2021-12-08 11:33:05 592

原创 javascript中的对象

对象是包含属性与方法的数据类型,它是一种引用数据类型。面向对象编程据有以下特征:1.对象是属性和方法的集合即封装2.将复杂的功能隐藏在内部,只对外开发少量方法,更改对象内部复杂的逻辑不会对外部调用造成影响即抽像。3.继承通过代码复用减少冗余代码4.根据不同形态的对象产生不同的结果即多态基本声明与使用var obj = { name: "js", age: 30, fun: function (){ console.log(this.name,this.a

2021-12-08 11:25:32 72

原创 var let const声明变量的区别

var和let的区别1.全局环境声明的区别在全局环境中声明变量,var和let的主要区别在于,var声明的变量会成为window的属性或方法,而let则不会。var num1 = 1;let num2 = 2;console.log(window.num1,window.num2);输出:1 undefined2.变量提升使用var 声明变量时变量会提升,let不会。console.log(num);var num = 1;输出:undefined等价于:var num;con

2021-12-07 17:09:45 2120

原创 闭包的概念及其应用

闭包概念闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。闭包的用途闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。...

2021-12-06 22:57:59 326

原创 改变this指向的三种方法(call、apply、bind)

callcall():第一参数 为改变this指向的对象,后面正常接受其他的参数。var user1 = { name: "hello", age: 18, fun: function(){ console.log(this.name,this.age); }};var user2 = { name: "js", age: 20, fun: function(){ console.log(this.name,th

2021-12-05 21:00:28 215

原创 this指向问题

在使用javascript进行编程的时候,我们不可避免地要与this这个关键字打交道。由于this主要起到指代作用,有时候我们会混淆this的具体指向。在大多数的时候this都指向它所在函数的调用者。在全局作用域中this 指向window对象console.log(this);输出:Window {window: Window, self: Window, document: document, name: '', location: Location, …}在全局函数,this指向window

2021-12-05 19:52:44 265

原创 外边距塌陷和margin-top失效问题及解决方案

外边距塌陷外边距塌陷是小白在写CSS最常遇见的问题,我们可以看一下下面的这个例子:<!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,

2021-12-04 22:56:31 485

原创 javascript中的函数

函数是每一门编程语言必不可少的成分,函数将代码进行了初次的封装,在javascript中函数还有其他语言所不具备的特性,现在让我们来探究一下。函数的声明与定义通过Function构造函数创建函数javascript中函数也是对象,所以可以通过构造函数进行函数的创建。但是这种方法较为繁琐一般不会通过这种方式创建函数。var fun = new Function("title","console.log(title)");fun("hello js");输出:hello js使用标准语法来创建函

2021-12-04 20:27:30 202

原创 javascript中的Map数据结构

MapMap是一组键值对的结构,用于解决以往不能用对象做为键的问题。** 声明定义**var map = new Map([["id1",1],["id2",2]]);console.log(map);输出:{'id1' => 1,'id2' => 2}使用set 方法添加元素,支持链式操作var map = new Map();map.set("id1",1).set("id2",2);console.log(map);输出:输出:{'id1' => 1,'id

2021-12-02 19:37:14 3405

原创 javascript中的Set数据结构

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。它具有一下的特点:只能保存值没有键名严格类型检测如字符串数字不等于数值型数字值是唯一的遍历顺序是添加的顺序,方便保存回调函数Set使用 add 添加元素,不允许重复值var set = new Set();set.add(1);set.add(2);console.log(set);set.add(1);console.log(set);输出:{1,2};{1,2}获取元素数量var se

2021-12-02 17:45:58 689

原创 javascript中的Symbol数据类型

symbol是es6新出的原始数据类型,symbol主要用于防止属性名冲突而产生的,保证属性名的唯一性。创建一个symbol数据类型var sy = Symbol(); console.log(typeof sy);//输出: Symbol描述参数var sy1 = Symbol("this is a Symbol");var sy2 = Symbol("this is a Symbol");console.log(sy1 == sy2);输出:false从上面可以看出虽然两个sym

2021-12-02 15:55:58 319

原创 javascript中的数据类型

javascript跟很多语言相比,它有一个很突出的特点,它是一门弱类型语言。对于变量的声明,它不需要像C,或者java语言那样,要给定类型声明。比如我们定义一个整型变量a,在绝多数的语言都是这样声明的:int a,而在javascript 只需要使用关键字,var 或者let 声明即可:var a,let a。今天,我只要想探讨的是Javascript的数据类型。1.类型检测在Javascript中可以使用typeof 和 instanceof 来检测数据是那种类型。typeofvar test

2021-12-02 12:30:16 364

jQuery.zip javascript 前端 菜鸟入门

jQuery-3.2.1.js,jQuery-3.2.1.min.js,jQuery-3.2.1-API

2021-12-07

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除