自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(34)
  • 收藏
  • 关注

原创 NodeJs中文件操作

HTTP模块HTTP模块的作用是创建一个服务器,HTTP是Node的内置模块,不用在单独下载使用requier指令来导入http模块,将实例化的HTTP赋值给httpconst http = require("http");使用http模块的createServer() 方法创建服务器,使用listen 方法绑定端口号,listen方法接收两个个参数,第一个参数要绑定的端口号,第二个参数服务启动成功后执行的回调函数createServer()方法有两个参数,request, response分别表

2020-09-27 20:26:41 469

原创 Set

Set用于存储任何类型的唯一值,可以是基本类型或者是对象引用只能保存值没有键名值是唯一的遍历顺序是添加的顺序,方便保存回调函数Set类型与Array和Object的对比数组可以存放任何数据let arr = [1, 1, 1, 1, 1, 1];console.table(arr);Set不能存放相同的数据let set = new Set([1, 2, 3, 4, 5]);set.add(1);set.add("1");console.log(set);Set中只

2020-09-24 19:11:31 132

原创 Symbol

Symbol用于防止属性名冲突而产生的,比如向第三方对象中添加属性时。Symbol 的值是唯一的,独一无二的不会重复的基础知识Symbollet hd = Symbol();let edu = Symbol();console.log(hd); //symbolconsole.log(hd == edu); //falseSymbol 不可以添加属性let hd = Symbol();hd.name = "小夜勃";console.log(hd.name);描述参数可传入字符串

2020-09-24 19:10:50 224

原创 Express

Express介绍安装Expressnpm install express简单使用引入var express = require('express');var app = express();配置路由app.get('/', function (req, res) { res.send('Hello World!');});监听端口app.listen(3000,'127.0.0.1');Express框架中的路由路由是由一个 URI和一个特定的 H

2020-09-18 23:09:17 2066

原创 封装自己的Ajax库

框架基本结构声明一个立即执行函数,整体逻辑放在立即执行函数中设置默认配置项设置核心方法(GET,POST)(function anonymous(window) { //默认配置项 let _default = { method: "GET", // 请求方式 url: "", // url baseURL: "", headers: {}, // 请求头信息 dataType: "JSON", /

2020-09-09 07:33:53 926

原创 Fetch

Fetch基本语法let promise = fetch(url, [options])url —— 要访问的 URL。options —— 可选参数:method,header 等。如果没有options,那么默认为一个GET请求Fetch请求发送GET/HEAD请求 不能设置body不管服务器返回的状态是多少,FETCH都不认为是失败GETfetch("https://v1.hitokoto.cn/", { method: "GET",}).then(result

2020-09-09 07:33:23 839

原创 实现跨域访问

跨域访问是什么同源策略1995年,同源政策由Netscape公司引入浏览器。目前,所有浏览器都实行这个政策。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。随着互联网的发展,“同源政策” 越来越严格。目前,如果非同源,共有三种行为受到限制:Cookie、LocalStorage和lndexDB无法读取DOM无法获得AJAX请求不能发送所谓“同源”指的是“三个相同”:协议相同、域名相同以及端口相同。域名是什么域名又称为网域,是由一串用点分隔的名字组成的Internet

2020-09-07 10:06:41 937

原创 jQuery中的Ajax

jQuery中的AjaxjQuery提供了六个Ajax操作方法load()$.get 和 $.post 方法$.ajax 方法$.getScript 方法和 $.JSON 方法jQuery提供的事件ajaxStart 和 ajaxStopajaxComlete、ajaxSend、ajaxError、ajaxSuccess 事件load()方法load()方法是jQuery中最为简单的Ajax方法基本语法结构$element.load(url,[data],[callback]

2020-09-07 10:06:07 1244

原创 JSON数据格式

JSON是什么JSON是JavaScript Object Notation的缩写 是一种轻量级的数据交换格式JSON语法规则名称/值对的集合 不同语言中它被理解为对象{"name":"小夜勃"}值得有序列表 大部分语言中他被理解为数组[ 1,2,3]JSON文件JSON具有独立的文件,扩展名为“json” 。该文件中允许保存JSON格式的数据。JavaScript中的JSONJSON 的值可以是字符串、数值、布尔值、null、对象、数组。JavaScrip

2020-09-07 10:05:18 906

原创 Ajax基本用法

同步交互与异步交互同步交互指发送一个请求,需要等待返回,然后才能够发送下ー个请求。同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44azKsJr-1599406779157)(https://s1.ax1x.com/2020/08/29/d7RsxJ.png)]异步交互所谓异步交互,就是指指发送一个请求,不需要等待返回,随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不

2020-09-06 23:39:54 269

原创 JS模块-导出和导入

模块的基本概念和用法在声明前导出通过在声明之前放置export来标记任意声明为导出,无论声明的是变量,函数还是类都可以。// 导出数组export let Number = ['One', 'Two', 'THree','Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];// 导出 const 声明的变量export const YEAR = 2015;// 导出函数export function Add(a,b) { console.lo

2020-07-11 12:13:38 523

原创 JavaScript模块基本用法

模块的概念一个模块就是一个文件,一个脚本就是一个模块模块可以相互加载,使用特殊的指令 export 和 import 就可以实现交换功能,从另一个模块调用一个模块的函数:export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。例如有一个exprot.js文件导出一个函数export function sayHi(user) { alert(`Hello, ${user}!`);}然后另一个文件导入这个函式import {sayHi

2020-07-10 10:17:18 1547 2

原创 Promise对象

Promise基本概念Promise 对象的构造器(constructor)语法如下let promise = new Promise(function(resolve, reject) { // executor});传递给new Promise的函数被称为 executor,当 new Promise 被创建,executor 会自动运行它的参数 resolve 和 reject 是由 JavaScript 自身提供的回调。我们的代码仅在 executor 的内部。当executor获

2020-07-09 14:44:43 216

原创 JavaScript中的 JSON方法

JSON方法可以将对象转换为字符串,并包含重要的属性JSON.stringify接收对象并将其转换为字符串let user = { name: "John", age: 30, courese : ["JS","JSON","HTML"], off : false, wife : null};let json = JSON.stringify(user)console.log(json)//{"name":"John","age":30,"cour

2020-07-03 21:59:50 1660 1

原创 Node.js Http模块学习

基础HTTP服务器const http = require("http");http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello World"); response.end();}).listen(8888);浏览器访问 http://localhost:8888/ 会看到一个写着“H

2020-07-02 22:09:33 1975 2

原创 JavaScript同步异步理解

同步异步是什么同步:调用某个程序时,调用方需要等到这个调用返回结果才能继续往后执行异步:和同步相反,调用方不用等到结果,而是在调用执行后,调用者可以继续执行后续操作比如说:你要去买手机,到了商店你看上一款手机,然后服务员去仓库给你拿货,在拿货期间,你只能在店里等着,不能离开,这就是同步。如果你在淘宝购买,下完完成后你可以去做其他的事情,只要等着快递到货就行,这就是异步同步异步含义同步方法:代码按顺序执行,上一条代码执行完毕,后续代码才可以执行异步方法:当执行到异步代码时,异步代码由另外一个线程

2020-07-02 21:26:21 209

原创 JS解构赋值

解构赋值解构赋值 是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中数组解构let arr = ["Ilya", "Kantor"]// 解构赋值// firstName = arr[0]// secondName = arr[1]let [firstName, secondName] = arr;alert(firstName); // Ilyaalert(secondName); // Kantor上述代码将一个数组解构到变量中,我们就可以针对这些变量进行操作

2020-07-01 21:34:28 303

原创 let和const命令

1. let 命令1.1 基本用法ES6 新增的let命令,用来声明遍历,类似于var,但是声明的变量只在let命令所在的代码块内有效var和let的区别是:let有块级作用域,var没有块级作用域{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1用let声明了变量a,用var声明了变量b,然后在外部调用这两个变量,let声明的变量报错,var声明的变量返回了正确的值for循环的计数器就很适

2020-07-01 21:32:56 52865 2

原创 NodeList 接口,HTMLCollection 接口

这两种集合都属于接口规范,返回的结果是NodeList实例或HTMLCollection实例NodeList可以包含各种类型的节点HTMLCollection只能包含 HTML 元素节点1.NodeList 接口1.1 概述NodeList实例是一个类似数组的对象,它的成员是节点对象document.body.childNodes instanceof NodeList // trueNodeList也可以使用lenght属性和forEach方法,但是不能使用pop,push之类的数组方

2020-06-30 17:53:13 291

原创 DOM-Node接口常用的属性和方法

1.属性1.1 Node.prototype.nodeTypedocument.nodeType // 9不同节点的nodeType的属性值不同文档节点(document):9,对应常量Node.DOCUMENT_NODE元素节点(element):1,对应常量Node.ELEMENT_NODE属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE文本节点(text):3,对应常量Node.TEXT_NODE文档片断节点(DocumentFragment):11,对应常

2020-06-29 17:20:01 1590

原创 jQuery原理-事件操作相关方法

on事件注册方法注册多个相同类型事件,后注册的不会覆盖先注册的注册多个不同类型事件,后注册的不会覆盖先注册的on: function (name, callBack) { // 1.遍历取出所有元素 this.each(function (key, ele) { // 2.判断当前元素中是否有保存所有事件的对象 if(!ele.eventsCache){ ele.eventsCache = {}; }

2020-06-26 17:27:02 125

原创 jQuery原理-属性操作相关方法

attr方法传递一个参数,返回第一个元素属性节点的值传递两个参数,代表设置所有元素属性节点的值并且返回值就是方法调用者传递一个对象,代表批量设置所有元素属性节点的值attr : function(attr,value) { // 判断是否为字符串 if(xqQuery.isString(attr)){ // 判断传入的是一个参数还是两个参数 if(arguments.length === 1){ // 一个参数直接返回第一个

2020-06-26 17:26:35 354 1

原创 jQuery原理-DOM操作方法

笔记未写完empty方法清空指定元素中的所有内容返回值:返回调用的jQuery实例empty : function () { // 遍历指定元素 this.each(function (key, value){ value.innerHTML = ""; }); // 方便链式编程 return this;}remove方法删除所有的元素或指定元素无参数遍历指定元素获取遍元素的父级通过父级删除指定元素if(argu

2020-06-26 17:25:43 501

原创 jQuery原理-原型方法

jQuery原型上的属性jquery:jQuery版本号jquery: "1.124.0"selector:实例默认的选择器取值selector: ""length: 实例默认的长度length: 0push:给实例添加新元素push: [].pushsort:对实例中的元素进行排序 sort: [].sortsplice:按照指定下标指定数量删除元素,也可以替换删除的元素splice: [].splicepush sort splice p

2020-06-26 17:22:55 179

原创 jQuery原理-入口函数

jQuery基本结构(function( window, undefined ) { var jQuery = function( ) { return new jQuery.prototype.init( ); } jQuery.prototype = { constructor: jQuery } jQuery.prototype.init.prototype = jQuery.prototype; window.jQue

2020-06-26 17:21:44 582

原创 jQuery文档处理

jQuery添加节点方法内部插入方法:在元素的内部插入节点append /appendTo作用:将元素添加到指定元素内部的最后面不同点:写法相反append//创建一个新节点let $li = $("<li>我是新增的li</li>")//新节点添加到ul中$("ul").append($li)​ appendTo//创建一个新节点let $li = $("<li>我是新增的li</li>")//新节点添加到ul中$l

2020-06-18 18:30:35 208 1

原创 jQuery动画效果

jQuery动画效果jQuery显示和隐藏动画show方法显示动画内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;hide方法隐藏动画toglle方法切换动画(显示变隐藏,隐藏变显示)三个方法都可以传入两个参数第一个参数表示动画执行时间第二个参数表示动画完成后执行的回调函数对联广告案例监听网页滚动偏移量当网页滚动偏移量大于或小于一定值后显示或隐藏图片<!DOCTY

2020-06-17 20:59:14 246

原创 jQuery事件处理

jQuery事件处理jQuery事件绑定jQuery事件绑定的方式eventName(fn)编码效率略高 部分事件jQuery没实现 不能使用$('button').click(function(){ console.log("hello 王二狗")})//给button元素绑定点击事件on(eventName, funcion(){})编码不方便, 但更通用$('button').on("click",function(){ console.log

2020-06-17 20:55:35 151

原创 jQuery的CSS操作

jQuery的CSS操作操作CSS样式方法CSS方法用于设置或获取元素CSS样式//单个设置$("div").css("width", "100px")$("div").css("height", "100px")$("div").css("background", "yellow")//链式设置 -> 链式操作如果大于3步, 建议分开$("div").css("width", "100px").css("height", "100px").css("background",

2020-06-17 20:54:00 124

原创 Jquery属性操作

jQuery属性操作jQuery中的attr方法/prop方法attr方法作用: 获取或者设置属性节点的值可以传递一个参数, 也可以传递两个参数如果传递一个参数, 代表获取属性节点的值如果传递两个参数, 代表设置属性节点的值如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值如果是设置:找到多少个元素就会设置多少个元素如果设置的属性节点不存在, 那么系统会自动新增属性//获取指定属性节点console.log($("span").attr("class")

2020-06-17 20:52:48 139

原创 jQuery选择器

jQuery选择器基础选择器选择器名称描述返回示例#idid选择器根据给定的id匹配一个元素单个元素$("#box");选取id为box元素.class类选择器根据给定的类名匹配元素集合元素$(".box");选取所有类名为box元素element元素选择器根据给定的元素名称匹配元素集合元素$(“p”);选取所有元素*通配符选择器匹配所有元素集合元素$("*");选取所有元素内容选择器选择器描述返回

2020-06-17 20:52:14 117

原创 jQuery核心对象

jQuery核心函数jQuery核心函数$() 代表调用jQuery的核心函数接收一个字符串选择器 -> 返回一个jQuery对象, 对象中保存了找到的DOM元素接受一个字符串代码片段 -> 返回一个jQuery对象, 对象中保存了创建的DOM元素接受一个DOM元素 -> 会被包装成一个jQuery对象返回给我们<!DOCTYPE html><html> <head> <meta charset="utf-8">

2020-06-17 20:50:58 201

原创 jQuery静态方法

jQuery静态方法静态方法each方法原生JS中forEach方法第一个参数: 遍历到的元素第二个参数: 当前遍历到的索引原生的forEach方法只能遍历数组, 不能遍历伪数组let arr = [1,2,3,4,5,6]arr.forEach(function(value,index){ console.log(index,value)})jQuery中each方法第一个参数: 当前遍历到的索引第二个参数: 遍历到的元素jQuery的each方法数组/伪数组都可

2020-06-17 20:50:02 248

原创 jQuery入口函数

jQuery入口函数jQuery入口函数的多种写法第一种写法$(document).ready(function () { console.log("one")})第二种写法jQuery(document).ready(function () { console.log("two")})第三种写法$(function () { console.log("three")})第四种写法jQuery(function () { console.log("fou

2020-06-17 20:46:57 276

空空如也

空空如也

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

TA关注的人

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