如初的博客🥝

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

列表功能举例步骤 1：列表功能完整的代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ...

01-Node.js入门

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

Node.js的介绍引擎引擎的特性： JS的内核即引擎。因为引擎有以下特性：（1）转化的作用：汽油柴油等等->动能模板+数据—>页面 js引擎：js 代码—>机器码\字节码（2）移植性。有哪些引擎：备注：Node是用V8引擎去解析 js，此时，我们不用去考虑浏览器的兼容性问题。什么是 Node.js 1、官方解释： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。如上图所示： Node 内部采用 Google Chrome 的 V8 引擎，作为 JavaScript 语言解释器；通过自行开发的 libuv 库，调用操作系统资源。 2、非官方解释： Node.js：是 JavaScript 语言在服务器端的运行环境（平台）。 3、运行环境（平台）的含义：首先，JavaScript 语言通过 Node 在服务 ...

01-VS Code的使用

发表于 2019-04-26 | 更新于 2024-10-22 | 前端工具 | 前端

02-CSS属性：背景属性

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

background系列属性常见背景属性 CSS样式中，常见的背景属性有以下几种：（经常用到，要记住） background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。 background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要） no-repeat不要平铺； repeat-x横向平铺； repeat-y纵向平铺。 background-position:center top; 设置背景图片在当前容器中的位置。 background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。另外还有一个简写属性叫做background，它的作用是：将上面的多个属性写在一个声明中。上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 background-color ...

01-jQuery的介绍和选择器

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | jQuery

jQuery 的介绍引入 jQuery 的原因在用 js 写代码时，会遇到一些问题： window.onload 事件有事件覆盖的问题，因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐，代码量多。代码很乱，各个页面到处都是。动画效果很难实现。如下图所示： jQuery的出现，可以解决以上问题。什么是 jQuery jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。 js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。以下是jQuery的相关信息：官网：http://jquery.com/ 官网API文档：http://api.jquery.com/ 中文汉化API文档：http://www.css88.com/jqapi-1.9/ 学习jQuery，主要是学什么初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些API。这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时， ...

02-JavaScript模块化01：CommonJS

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

前言网站越来越复杂，js代码、js文件也越来越多，会遇到一些问题：文件依赖全局污染、命名冲突程序模块化包括：日期模块数学计算模块日志模块登陆认证模块报表展示模块等。所有这些模块共同组成了程序软件系统。一次编写，多次使用，才是提高效率的核心。模块化的理解什么是模块化概念：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起。模块的内部数据、实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。最早的时候，我们会把所有的代码都写在一个js文件里，那么，耦合性会很高（关联性强），不利于维护；而且会造成全局污染，很容易命名冲突。模块化的好处避免命名冲突，减少命名空间污染降低耦合性；更好地分离、按需加载高复用性：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能。高可维护性：软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较频繁。使用模块化的开发，方式更容易维护。部署方便模块化规范模块化规范的引入假设我们引入模 ...

02-JavaScript模块化02：AMD

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

AMD的基本语法 AMD的概念 AMD（Asynchronous Module Definition）：异步模块定义。AMD专门用于浏览器端，模块的加载是异步的。 AMD规范：是 RequireJS 在推广过程中对模块化定义的规范化产出。 RequireJS：一个基于AMD规范实现的模块化开发解决方案。暴露模块的方式定义没有依赖的模块：（参数只有一个 function） 12345define(function () { return 模块}) 定义有依赖的模块：（参数有两个：模块名、function） 123456//定义有依赖的模块：第一个参数为数组define(['module1', 'module2'], function (m1, m2) { return 模块}) 代码解释：第一个参数必须是数组，里面存放的是，需要依赖的其他的模块。第二个参数是function，里面带了形参 m1 和 m2，分别代表了 module1 和 module2。这个形参的作用是，前面依赖的模 ...

02-jQuery动画详解

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | jQuery

前言 jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。显示动画方式一： 1$("div").show(); 解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。方式二： 1$("div").show(2000); 解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。效果如下：方式三： 1$("div").show("slow"); 参数可以是： slow 慢：600ms normal 正常：400ms fast 快：200ms 解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。方式四： 1234//show(毫秒值，回调函数;$("div").show(5000,function () { alert("动画执行完毕！");}); 解释 ...

02-JavaScript模块化04：ES6

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

ES6模块化的基本语法 ES6模块化的说明 **依赖模块需要编译打包处理。**原因如下：（1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过Babel将 ES6 转化为 ES5。（2）生成了ES5之后，里面仍然有require语法，而浏览器并不认识require这个关键字。此时，可以用 Browserify编译打包 js，进行再次转换。推荐学习链接： http://es6.ruanyifeng.com/#docs/module 基本语法：导出模块： 1export 引入模块： 1import xxx from '路径' ES6模块化的使用举例（自定义模块） 1、初始化项目（1）在工程文件中新建如下目录： 123456789js | src | module1.js | module2.js | module3.js | main.jsindex.html （2）在工程的根目录下，新建文件package.json，内容如下： 1234{ "name" ...

03-CSS3选择器详解

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

CSS3介绍 CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状浏览器支持程度不够好，有些需要添加私有前缀移动端支持优于PC端不断改进中应用相对广泛应对的策略：渐进增强（1）坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好。【重要】比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。（2）考虑用户群体。（3）遵照产品的方案。参考链接：渐进增强 VS 优雅降级 | 简书渐进增强和优雅降级之间的不同（面试题目）浏览器的版本问题由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为： Chrome浏览器 version 46+ Firefox浏览器 firefox 42+ 如何使用手册 CSS参考手册的网址：http://css.doyoe.com/ CSS参考手册的下载链接：http://download.csdn.net/downlo ...

03-CSS样式表和选择器

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

02-JavaScript模块化03：CMD

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

CMD的基本语法 CMD的概念 CMD（Common Module Definition）：同步模块定义。CMD专门用于浏览器端，模块的加载是同步的。模块在使用时才会加载执行。 CMD规范：是 SeaJS 在推广过程中对模块化定义的规范化产出。 SeaJS SeaJS：一个基于CMD规范实现的模块化开发解决方案。官网链接： http://seajs.org/ https://github.com/seajs/seajs 推荐学习链接： http://www.zhangxinxu.com/sp/seajs/ http://es6.ruanyifeng.com/#docs/module 暴露模块的方式不管是定义没有依赖的模块，还是定义有依赖的模块，参数只有一个，那就是 function。定义没有依赖的模块： 12345678define(function (require, exports, module) { exports.xxx = value //暴露模块 module.exports = value}) 参数 ...