如初的博客🥝

发表于 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-JS简介

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

JavaScript背景 Web前端有三层： HTML：从语义的角度，描述页面结构 CSS：从审美的角度，描述样式（美化页面） JavaScript：从交互的角度，描述行为（提升用户体验） JavaScript是世界上用的最多的脚本语言。发展历史 JavaScript诞生于1995年。布兰登 ? 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。 JavaScript是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。备注：由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。 JavaScript和ECMAScript的关系 ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称 ...

01-VS Code的使用

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

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-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}) 参数 ...

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时， ...

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 ...

02-变量

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

字面量：数字和字符串 “字面量”即常量，是固定值，不可改变。看见什么，它就是什么。简单的字面量有2种：数字、字符串。（1）数值的字面量非常简单，写上去就行了，不需要任何的符号。例如： 11 alert(886); //886是数字，所以不需要加引号。（2）字符串的字面量也很简单，但一定要加上引号。可以是单词、句子等。温馨提示：100是数字，"100"是字符串。总结字面量都可以直接使用，但是我们一般不会直接使用字面量。如果直接使用字面量的话，非常麻烦。比如说，多个地方要用到同一个字面量，还不如事先定义一个变量，用来保存字面量。变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而不会直接使用字面量。变量变量的概念变量：变量可以用来保存字面量，而且变量的值可以任意改变。变量的定义和赋值在js中使用var关键字来声明一个变量。变量举例如下： 1var a = 100; 如下图所示： var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”：定义变量：var就是一个关键字，用来定义变量。所谓关 ...

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-Emmet in VS Code

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

前言 Emmet可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。举个例子，我们在编辑器中输入缩写代码：ul>li*6 ，然后按下 Tab 键，即可得到如下代码片段： 12345678<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul> 如何在某个语言中打开 Emmet 支持默认情况下，你可以直接在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less、stylus、handlebars、php 和 javascriptreact 中使用 Emmet 。但对于其他语言，你也可以通过如下设置将其打开： 1234567"emmet.includeLanguages": { &qu ...

03-Vue中的Ajax请求

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

vue-resource的介绍 vue-resource是Vue高度集成的第三方包。官网链接：文档（http相关）：https://github.com/pagekit/vue-resource/blob/master/docs/http.md vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。解释： vue.js文件向Windows对象暴露了Vue这个关键词；vue-resource.js向Vue身上挂载了this.$http这个属性。于是，我们可以直接写this.$http.get或者this.$http.post或者this.$http.jsonp来调用。 vue-resource 发送Ajax请求常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。 get 请求格式举例： 12345678this.$http.get(url) .then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数 ...