Just-Lsy-CSDN博客

原创 Node.js—数据库

1. 数据库的基本概念1.1. 什么是数据库数据库（database）是用来组织、存储和管理数据的仓库。为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。1.2 常见的数据库及分类市面上的数据库有很多种，最常见的数据库有如下几个:MySQL 数据库(目前使用最广泛、流行度最高的开源免费数据库:Community+Enterprise) Oracle 数据库(收费) SQL Server数据..

2022-04-06 23:15:51 3192 1

原创 Node.js—Express、Express 路由、Express 中间件、使用 Express 写接口

目标：能够使用 express.static() 快速托管静态资源能够使用 express 路由精简项目结构能够使用常见的 express 中间件能够使用 express 创建API接口能够在 express 中启用 cors 跨域资源共享1 初识 Express1.1 Express 简介1.1.1 什么是Express官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的Web开发框架。通俗的理解：Express 的作用和 Node.js

2022-04-05 17:25:42 3014

原创 Node.js—模块化、npm 与包

目标：能够说出模块化的好处能够知道 CommonJS 规定了哪些内容能够说出 Node.js 中模块的三大分类各自是什么能够使用 npm 管理包能够了解什么是规范的包结构能够了解模块的加载机制 1. 模块化的基本概念1.1 什么是模块化模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆...

2022-04-01 22:30:13 457

原创 Node.js —初识Node.js、fs 文件系统模块、path 路径模块、http 模块

1. DOS基础操作1.1 常用的命令1、怎么打开DOS命令窗口（小黑屏）、CMD 窗口、终端、shell ---打开菜单—-运行---->cmd--->回车；或者win+r，输入cmd，回车。2、什么是DOS命令？可以完全完成文件的新建、编辑、保存、删除等一系列操作。3、mkdir abc（非必须掌握）创建一个目录，起名abc ...

2022-03-30 17:23:18 1748

原创 ES6—ECMASript 6 新特性（二）

1. 迭代器1.1 定义遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费。原生具备 iterator 接口的数据(可用for of 遍历) Array Arguments Set Map String TypedArray NodeList 案

2022-03-28 18:43:48 1785

原创 ES6—ECMASript 6 新特性（一）

1. let 关键字let 关键字用来声明变量，使用 let 声明的变量有几个特点：不允许重复声明块级作用域不存在变量提升不影响作用域链应用场景：以后声明变量使用let 就对了<script type="text/javascript"> /* let关键字就是用来声明变量的使用let关键字声明的变量具有块级作用域在一个大括号中使用let关键字声明的变量才具有块级作用域

2022-03-24 17:56:43 1194

原创 JavaScript高级—正则表达式（正则表达式在 JavaScript 中的使用、正则表达式中的特殊字符、正则表达式中的替换）

目标：能够说出正则表达式的作用能够写出简单的正则表达式能够使用正则表达式对表单进行验证能够使用正则表达式替换内容 1. 正则表达式概述1.1 什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过..

2022-03-24 15:22:04 2512

原创 JavaScript高级—函数进阶（this、严格模式、高阶函数、闭包、递归）

目标：能够说出函数的多种定义和调用方式能够说出和改变函数内部this的指向能够说出严格模式的特点能够把函数作为参数和返回值传递能够说出闭包的作用能够说出递归的两个条件能够说出深拷贝和浅拷贝的区别 1. 函数的定义和调用1.1 函数的定义方式<script> // 函数的定义方式 // 1. 自定义函数(命名函数) function fn() { }; // 2. 函数表达式 (..

2022-03-23 17:57:35 181

原创 JavaScript 高级—构造函数和原型（构造函数和原型、继承、ES5 中的新增方法）

目标：能够使用构造函数创建对象能够说出原型的作用能够说出访问对象成员的规则能够使用ES5新增的一些方法 1. 构造函数和原型1.1 概述在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。ES6，全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分..

2022-03-22 17:14:05 1188

原创面向对象tab栏切换案例 (有错有错求指教)

1. 面向对象案例1.1 功能需求点击tab栏可以切换效果；点击+号，可以添加tab项和内容项： 1. 创建新的选项卡 li 和新的内容 section. 2. 把创建的两个元素追加到对应的父元素中. 3. 以前的做法：动态创建元素 createElement，但是元素里面内容较多,需要innerHTML赋值在 appendChild 追加到父元素里面. 4. 现在高级做法：用 insertAdjacentHTML() ...

2022-03-20 11:10:05 345

原创 JavaScript 高级—面向对象（面向对象、ES6 中的类和对象、类的继承）

目标：能够说出什么是面向对象能够说出类和对象的关系能够使用class创建自定义类能够说出什么是继承1.面向对象编程介绍1.1两大编程思想面向过程面向对象1.2 面向过程编程面向过程编程，即POP（Process-oriented programming）。面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.3 面向对象编程面向对象编程，即 OOP（Object Orie...

2022-03-19 22:19:09 688

原创 jQuery—事件、 jQuery 其他方法、jQuery 插件

目标：能够说出4种常见的注册事件能够说出on绑定事件的优势能够说出jQuery事件委派的优点以及方式能够说出绑定事件写解绑事件1. jQuery 事件1.1 事件注册语法：element.事件(function () {})$('div').click(function () { 事件处理程序 })其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll..

2022-03-19 00:13:50 338

原创品优购-电梯导航

品优购-电梯导航-jq部分代码，其他详细代码结合文档看// jq入口函数$(function () { // 当我们点击了小li 此时不需要执行页面滚动事件里面的 li 的背景选择即添加 current // 节流阀互斥锁 var flag = true; // 1.显示隐藏电梯导航 var tooltop = $('.recom-hd').offset().top; toggleToP(); //每次打开页面先调用一次 fu.

2022-03-17 22:04:52 665

原创 jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）

4. jQuery 属性操作4.1 设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href，比如 <input> 元素里面的 type。获取属性语法prop('属性')设置属性语法prop('属性', '属性值')4.2 设置或获取元素自定义属性值 attr()用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index ='1'。获取属性语法attr('属性') /

2022-03-16 23:46:21 276

原创王者荣耀手风琴案例

2022-03-16 01:44:11 356

原创 jQuery—常用API（jQuery 选择器、jQuery 样式操作、 jQuery 效果）

目标：能够写出常用的jQuery选择器能够操作jQuery样式能够写出常用的jQuery动画能够操作jQuery属性能够操作jQuery元素能够操作jQuery元素尺寸、位置 1.jQuery 选择器1.1jQuery 基础选择器原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。$('选择器'）//里面选择器直接写CSS选择器即可，但是要加引号名称用法描述 ID 选择...

2022-03-16 01:26:51 430

原创淘宝服饰精品案例

案例分析：核心原理:最标经过左侧盒子某个小i，就让内容盒子相对应图片显示，其余的图片隐藏；需要得到当前小i的索引号，就可以显示对应索引号的图片; jQuery得到当前元素索引号$(this).index(); 中间对应的图片，可以通过eq(index)方法去选择; 显示元素show()，隐藏元素hide(). <script src="jquery.min.js"></script> <style> * {

2022-03-15 01:10:27 1077

原创 jQuery—基本使用

目标：能够说出什么是jQuery 能够说出jQuery的优点能够简单使用jQuery 能够说出DOM对象和jQuery对象的区别1. 概述1.1JavaScript 库仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript 库：即 library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等。...

2022-03-14 14:29:36 424

原创本地存储—sessionStorage、localStorage

1.本地存储概述1.1 背景随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5 规范提出了相关解决方案。1.2本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage 约5M、localStorage 约20M 只能存储字符串，可以将对象 JSON.stringify() 编码后存储2.window.sessionSto...

2022-03-14 01:13:05 3724

原创筋斗云案例

1. 效果鼠标经过某个小 li，筋斗云跟这到当前小 li 位置鼠标离开这个小 li，筋斗云复原为原来的位置鼠标点击了某个小 li，筋斗云就会留在点击这个小 li 的位置2. 实现利用动画函数做动画效果原先筋斗云的起始位置是 0 鼠标经过某个小 li，把当前小 li 的 offsetLeft 位置做为目标值即可鼠标离开某个小 li，就把目标值设为 0 如果点击了某个小 li，就把 li 当前的位置存储起来，做为筋斗云的起始位置核心 JS 代码：window.addEv..

2022-03-13 17:44:22 682

原创返回顶部案例

1.window.scroll滚动窗口至文档中的特定位置：window.scroll(x, y)注意：里面的 x 和 y 不跟单位，直接写数字。2.带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset 得到最后是页面滚动，使用 window.scroll(x, y)5.2.3 修改后的缓存动画函数function animate(...

2022-03-13 16:08:36 355

原创网页轮播图案例（重点）

1. 功能需求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。图片播放的同时，下面小圆圈模块跟随一起变化。点击小圆圈，可以播放相应图片。鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过，轮播图模块，自动播放停止。2. 总体分析因为 js 较多，我们单独新建 js 文件夹，再新建 js 文件，引入页面中。此时需要添加 load 事件。鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。显示隐藏 dis

2022-03-12 23:34:10 489

原创 PC端网页特效—动画函数封装

1. 动画函数封装1.1 动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上 1 个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位（position: absolute），才能使用 element.style.left<style> div { position: absolute; left

2022-03-11 22:07:01 109

原创 PC端网页特效—元素偏移量 offset 系列（获取鼠标在盒子内部的坐标）、元素可视区 client 系列、元素滚动 scroll 系列（页面被卷去的头部、仿淘宝固定右侧侧边栏）

Tip：在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。目标：能够说出常见offset系列属性的作用能够说出常见client系列属性的作用能够说出常见scroll系列属性的作用能够封装简单动画函数能够写出网页轮播图案例 1. 元素偏移量 offset 系列1.1 offset 概述offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置.

2022-03-09 23:51:58 311

原创模态框拖拽案例

1. 弹出框，我们也称为模态框。点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。鼠标松开，可以停止拖动模态框移动。1.1 分析点击弹出层，模态框和遮挡层就会显示出来 display:block; 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标触发事件是鼠标按下 mousedown

2022-03-07 23:32:33 400

原创 BOM—JS 执行机制、location 对象、navigator 对象、history 对象

1. JS 执行机制1.1 JS 是单线程JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作DOM 而诞生的。比如我们对某个DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯

2022-03-06 17:36:10 404

原创 BOM—BOM 概述、window 对象的常见事件、定时器

BOM 目标:1. BOM 概述1.1 概述BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分1.2 DOM vs BOMDOM BOM 文.

2022-03-05 23:58:10 423

原创模拟京东按键输入内容案例、模拟京东快递单号查询案例

模拟京东按键输入内容案例：<body> <input type="text"> <script> var search = document.querySelector('input'); document.addEventListener('keyup', function (e) { console.log(e.keyCode); if (e.keyCode ===

2022-03-04 23:30:36 258

原创事件高级—（注册/绑定事件、删除/解绑事件、DOM事件流、事件对象、阻止事件冒泡、事件委托、常用的鼠标事件和键盘事件）

任务要求： 1.注册事件（绑定事件）1.1 注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和事件监听注册方式。1.1.1 传统注册方式利用on 开头的事件onclick <button onclick="alert('hi~')"></button> btn.onclick = function() {}; 特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖.

2022-03-04 21:35:38 413

原创动态生成表格案例

2022-02-22 02:04:56 838

原创 DOM—操作元素（H5自定义属性）节点操作（子、父、兄弟节点，创建、添加节点，删除节点，复制节点）

1. H5自定义属性目的：用于保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。由于有些自定义属性很容易引起歧义，难以判断是元素内置属性还是自定义属性。H5给我们新增了自定义属性：1.1 设置H5自定义属性H5规定自定义属性 date-开头作为属性名并且赋值如: <div date-index = "1" ></div>...

2022-02-21 23:16:48 2511

原创简单的发布留言案例

2022-02-20 23:48:06 250

原创新浪下拉菜单案例

2022-02-20 16:41:13 129

原创 tab栏切换案例（必掌握）

2022-02-19 19:01:10 343

原创 DOM—操作元素（获取属性值、设置属性值、移除属性）

1. 自定义属性的操作1.1 获取属性值element . 属性获取属性值；（元素本身自带的属性） element . getAttribute( ' 属性 ' )；（主要获取自定义的属性（标准））<body> <div id="demo" index='12'></div> <script> var div = document.querySelector('div'); // 1. 获...

2022-02-18 16:24:20 2028

原创排他思想算法、百度换肤、全选\取消全选、

排他思想算法<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1. 获取所以按钮元素 .

2022-01-06 10:17:56 325

原创新浪下拉菜单案例

2022-01-03 02:17:54 97

原创开关灯案例

<body> <button>关灯</button> <script> var btn = document.querySelector('button'); var flag = 0; btn.onclick = function () { if (flag == 0) { btn.innerHTML = '开灯'; .

2022-01-03 02:07:01 369

原创世纪佳缘用户名显示隐藏内容

2022-01-02 23:09:31 1121 5

原创 DOM—事件基础操作元素（改变元素内容、修改元素属性、表单属性设置、样式属性操作）

1.事件基础1.1 事件三要素事件源、事件类型、事件处理程序<body> <button id='btn'>唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1. 事件三要素：事件源、事件类型、事件处理程序 // （1）事件源：事件被触发的对象——按钮 var btn = document.getElementById('btn');.

2022-01-02 22:24:42 758

空空如也

空空如也