如初的博客🥝

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

发表于 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": { " ...

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/download/smyhvae/1024 ...

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 来设置成功的回调函数 c ...

03-VS Code的使用积累

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

常见配置自动保存： 1"files.autoSave": "onFocusChange" 参考链接：https://blog.csdn.net/WestLonly/article/details/78048049 在新的窗口中打开文件： 1"workbench.editor.enablePreview": false, 常见操作如何查看代码结构方法一：「Cmd + Shift + O」方法二：安装插件Code Outline 参考链接：https://www.zhihu.com/question/264045094 在本地开启服务器12345# 安装npm install -g live-server# 启动live-server 参考链接：Visual Studio Code + live-server编辑和浏览HTML网页常用插件方式一：打开VS Code，左侧有五个按钮，点击最下方的按钮，然后就可以开始安装相应的插件了。方式二：在vscode中输入快捷键「ctrl+shift+P」，弹出指令窗口，输入ext ...

03-变量的强制类型转换

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

前言强制类型转换：将一个数据类型强制转换为其他的数据类型。类型转换主要指，将其他的数据类型，转换为：String、Number、Boolean。你会把某个数据类型转换成 null 或者 undefined 吗？不会，因为这样做，没有意义。其他的简单类型 —> String方法一：变量+”” 或者变量+”abc”举例如下： 123vat a = 123; // Number 类型console.log(a + ''); // 转换成 String 类型console.log(a + 'haha'); // 转换成 String 类型上面的例子中，打印的结果，都是字符串类型的数据。方法二：调用toString()方法举例如下： 1变量.toString() 【重要】该方法不会影响到原变量，它会将转换的结果返回。当然我们还可以直接写成a = a.toString()，这样的话，就是直接修改原变量。注意：null和undefined这两个值没有toString()方法，所以它们不能用方法二。如果调用，会报错。另外，Number类 ...

04-CSS选择器：伪类

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

03-jQuery操作DOM

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

文本主要内容样式和类操作节点操作样式操作和类操作作用：设置或获取元素的样式属性值。样式操作1、设置样式： 123456789 //设置单个样式： css(属性，值); $("div").css("background-color","red"); //设置多个样式： css(json);$("div").css({"width":100,"height":100,"background-color":"pink"}); 2、获取样式： 123//获取样式：css(属性);//获取的时候如果有很多个，那么获取jquery对象中的第一个alert($("div").css("width")); 举例如下：类操作（className）1、添加类样式： 1$(selector).addClass("liItem"); //为指定 ...

04-WebStorm的使用

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

WebStorm的简单设置1、主题修改：可能大家会觉得软件的界面不太好看，我们可以换一下主题。选择菜单栏“File—settings—apperance—theme”，主题选择Darcula： 2、导入第三方主题：系统提供的两种主题可能都不太好看，我们可以进入网站http://color-themes.com/来获取第三方主题，这里推荐两个主题，大家二选一即可： Sublime Material 上图中，在网站http://color-themes.com/中将主题下载之后，是一个jar包。那怎么导入到WebStorm呢？别着急，回到WebStorm，选择菜单栏“ File-Import Settings”，将下载好的jar包导入即可。 3、代码字体修改：选择菜单栏“File—settings—Editor—Font”：上图中，点击红框部分，然后弹出如下界面：我们在上图中修改代码的字体。修改完之后发现 WebStorm 的一些默认字体（比如侧边栏的工程目录的字体）并没有发生变化，如果想改的话，也可以改（我个人一般是不改的）。 4、关闭更新：如下图所示： 5、 ...

04-CSS3属性详解（一）

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

前言我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。本文主要内容：颜色文本盒模型中的 box-sizing 属性处理兼容性问题：私有前缀边框背景属性渐变颜色CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。 RGBA、HSLA可应用于所有使用颜色的地方。 RGBA 举例： 123background-color: rgba(0, 0, 255, 0.3);border: 30px solid rgba(0, 255, 0, 0.3); 解释： RGBA 即：Red、Green、Blue、Alpha R、G、B 的取值范围是：0~255 HSLA 举例： 1background-color: hsla(240,50%,50%,0.4); 解释： H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 S 饱和度，取值范围 0%~100%。值越大，越鲜艳。 L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。 A 透明度，取值范围 0~1。如果不知道 ...

04-运算符

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

本文首发于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。我们在本文件夹的第二篇里讲到了JS中变量的概念，本篇文章讲一下运算符和表达式。前言比如说+、*、/、( 都是运算符，而（3+5）/2则是表达式。运算符的定义和分类运算符也叫操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。比如：typeof 就是运算符，可以来获得一个值的类型。它会将该值的类型以字符串的形式返回：number string boolean undefined object。注：运算符都是会返回结果的，而typeof这个运算符返回的结果就是变量的类型。那返回的结果的类型是什么呢？是字符串。运算符有很多分类，比如：算数运算符自增运算符逻辑运算符赋值运算符关系运算符三元运算符（条件运算符）算数运算符常见的算数运算符有以下几种：求余的举例：假设用户输入345，怎么分别得到3、4、5这三个数呢？答案： 12345得到3的方法：345 除以100，得到3.45然后取整，得到3。即：parseInt(345/10 ...

05-Atom在前端的使用

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

常用插件 Emmet：快速生成HTML片段，比如输入ul>li*3可以快速生成： 12345<ul> <li></li> <li></li> <li></li></ul> 详细地址，Emmet教程 Snippets：快速生成 js 代码片段（用来处理代码片段的模板输出），详细地址 Tree View：文件浏览器，详细地址 file icons：文件识别图标，使用这个插件会让你的编辑器显示对应的图标，详细地址 language-javascript-jsx：jsx语法高亮，详细地址 language-vue：vue语法高亮，详细地址 linter-eslint：eslint插件，详细地址 vue-snippets：vue代码片段，详细地址 pigments：颜色显示器，详细地址 linter-eslint：语法检查 Atom-Beautify：代码格式化参考链接：https://github.com/cucygh/JDFinance/blob/mast ...