CSS 函数 CSS 函数 颜色 rgba() rgba()函数使用红(R),绿(G),蓝(B),透明度(A)的叠加来生成各式各样的颜色。 RGBA 即红色,绿色,蓝色,透明度(英语:Red, Green, Blue,Alpha) **红色(R)**0 到 255 间的整数,代表颜色中的红色成分。 **绿色(G)**0 到 255 间的整数,代表颜色中的绿色成分。 **蓝色(B)**0 到 255 间的整数 2024-03-17 Software Language CSS
CSS 动画 CSS 动画 transtion 基本用法 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的,也就是说,所有的状态变化,都是即时完成。 当鼠标放置于缩略图之上,缩略图会迅速变大,注意,缩略图的变大是瞬间实现的,下面是代码,相当简单。 123456789img{ height:15px; width:15px;}img:hover 2024-03-17 Software Language CSS
CSS 优先级 CSS 优先级 在引用样式表的4种方法中,其中,优先级最高的是嵌入样式表的方法,其余3种方法顺序相同,若同时出现,浏览器依然会遵守"最近优先的原则",即与内容最靠近的那个样式表插入方法。 在使用CSS样式过程中,经常会遇到同一个元素由不同选择符定义的情况,这时候就要考虑到选择符的优先级,通常我们使用的选择父包括:id选择符,类选择符,包含选择符和HTML标签选择符等,因 2024-03-17 Software Language CSS
jQuery 对象 jQuery 对象 Jquery核心 $符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象,通过该对象可以获取jQuery 对象,调用jQuery提供的方法等,只有jQuery对象才能调用jQuery提供的方法。 1$ <==> jQuery Dom对象与Jquery包装集对象 原始的 Dom 对象只有 DOM 接口提供的方法和属 2024-03-17 Software FrontEnd jQuery
jQuery 选择器 jQuery 选择器 基本元素 基础选择器 与css选择器基本相同,可简化原生js繁琐的dom操作。 1$("#id") = document.getElementById("id") 筛选 siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,可以用可选的表达式进行筛选。 [expr]用于筛选同辈元素的 2024-03-17 Software FrontEnd jQuery
jQuery 事件 jQuery 事件 ready加载事件 ready()类似于onload()事件。 ready()可以写多个,按顺序执行。 $(document).ready(function(){})等价于${function(){}} 12345678910<script type="text/javascript"&g 2024-03-17 Software FrontEnd jQuery
jQuery Dom操作 jQuery Dom操作 jQuery也提供了对HTML节点的操作,而且在原生js的基础之上进行了优化,使用起来更加方便,注意:以下的操作方式只适用于jQuery对象。 操作元素的属性 获取属性 方法 说明 举例 attr(属性名称) 获取指定的属性值 attr(‘checked’)attr(‘name’) prop(属性名称) 获取具有true和false两个属性的属性值 2024-03-17 Software FrontEnd jQuery
jQuery Ajax jQuery Ajax $.ajax jQuery 调用 ajax 方法: 格式: 123$.ajax({ /*参数*/}); 参数: type:请求方式 GET/POST url:请求地址 url async:是否异步,默认是 true 表示异步。 data:发送到服务器的数据。 dataType:预期服务器返回的数据类型。 contentType:设置请求头。 2024-03-17 Software FrontEnd jQuery
Yarn 命令 Yarn 命令 新建项目 1$ yarn init -y,--yes:表示默认选项都为yes 安装所有包 12$ yarn install #安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock$ yarn global install #全局安装。 –flat:安装一个包的单一版本。 –force:强制重新下载所有包。 –production:只安装depe 2024-03-17 Software FrontEnd Yarn
Webpack 配置文件 Webpack 配置文件 使用不同的配置文件 如果出于某些原因,需要根据特定情况使用不同的配置文件,则可以通过在命令行中使用 --mode 指定配置该参数的配置文件。 1234"scripts": { "build-dev": "webpack --mode development", "build-p 2024-03-17 Software FrontEnd Webpack
Webpack 命令 Webpack 命令 使用配置文件 1webpack [--config webpack.config.js] 不使用配置文件 1webpack <entry> [<entry>] -o <output-path> 实例 1webpack --entry ./first.js --entry ./second.js --output-path /build & 2024-03-17 Software FrontEnd Webpack
Webpack Plugin Webpack Plugin BannerPlugin 配置 webpack.config.js 123plugins: [ new webpack.BannerPlugin('Copyright')] 将版权信息写在括号中。 查看 在dist中生成bundle.js.LICENSE.txt 1/*! Copyright */ HtmlWebpackPlugi 2024-03-17 Software FrontEnd Webpack
Webpack Loader Webpack Loader Webpack使用多个Loader时,从右向左加载。 css-loader与style-loader css-loader 会对 @import 和 url() 进行处理,就像 js 解析 import/require() 一样。 stype-loader将模块导出的内容作为样式并添加到 DOM 中。 二者组合在一起使你能够把样式表嵌入webpack打包后的JS 2024-03-17 Software FrontEnd Webpack
Webpack Dev Tools Webpack Dev Tools Webpack Dev Server 安装 1$ yarn add -D webpack-dev-server 配置 webpack.config.js 12345678devServer: { contentBase: "./public", port: 8000, stats: { colors: 2024-03-17 Software FrontEnd Webpack
Vue 问题解决 Vue 问题解决 vue-router 路由切换后滚动条未返回顶部 解决方法:在vue-router的配置文件中加入如下配置。 1234567891011const router = new VueRouter({ routes, // 切换路由后,滚动条回到顶部。 scrollBehavior(to,from,saveTop){ if(save 2024-03-17 Software FrontEnd Vue
Vue Vue-CLI Vue Vue-CLI 安装 123npm install -g @vue/cli# ORyarn global add @vue/cli 查看版本。 1vue --version 升级。 如需升级全局的 Vue CLI 包,请运行: 123npm update -g @vue/cli# ORyarn global upgrade --latest @vue/cli 命令 创建一个项目 1 2024-03-17 Software FrontEnd Vue
Node.js 初始化 Node.js 初始化 简单的说 Node.js 就是运行在服务端的 JavaScript Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。 安装 1brew install node@12 查看node 2024-03-17 Software FrontEnd Node.js
Node.js MySQL Node.js MySQL 安装模块 1yarn add mysql 连接数据库 实例 1234567891011121314var mysql = require('mysql');var connection = mysql.createConnection({ host : 'localhost', user 2024-03-17 Software FrontEnd Node.js
Node.js GET&POST请求 Node.js GET&POST请求 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交。 表单提交到服务器一般都使用 GET/POST 请求。 获取GET请求内容 由于GET请求直接被嵌入在路径中,URL是完整的请求路径,包括了?后面的部分,因此你可以手动解析后面的内容作为GET请求的参数。 node.js 中 url 模块中的 parse 函数提供了这个功能。 实 2024-03-17 Software FrontEnd Node.js
Angular 基础语法 Angular 基础语法 边界指令ng-app 描述:AngularJS框架在使用的时候除了需要引入框架文件之外,还需要为框架指明一个边界,告知框架在哪个范围内生效。 如果不使用边界指令进行声明,则AngularJS框架引入失败。 习惯上写在html标签之内,表示在当前页面中angularJS都能正常使用。 语法: 1<html ng-app></html> 注意:边界 2024-03-17 Software FrontEnd Augular