WEB前端开发
整理WEB前端开发的笔记
唯恋殊雨
这个作者很懒,什么都没留下…
展开
-
Web前端学习笔记——Canvas 01
一、canvas简介1.1 什么是canvas?(了解)是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。canvas 拥有多种...原创 2018-03-22 16:13:49 · 1015 阅读 · 0 评论 -
Web前端学习笔记——Canvas 02
三、 canvas进阶3.1 Canvas颜色样式和阴影3.1.1 设置填充和描边的颜色(掌握)fillStyle : 设置或返回用于填充绘画的颜色strokeStyle: 设置或返回用于笔触的颜色以上两个值都可以接受颜色名,16进制数据,rgb值,甚至rgba. 一般先进行设置样式然后进行绘制。例如:ctx.strokeStyle = "red"; ctx.strokeStyle ...原创 2018-03-23 16:41:46 · 897 阅读 · 0 评论 -
Web前端学习笔记——Canvas 03
面向对象版本的进度条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable原创 2018-03-31 14:47:37 · 326 阅读 · 0 评论 -
Web前端学习笔记——构建前端自动化工作流环境
目录为什么要有自动化的流程1.Node环境1.1.什么是Node1.2.Node环境搭建1.3.Node用途1.4.Node开发Web应用Demo1.5.NPM2.Bower2.1.什么是Bower2.2.为什么使用Bower2.3.Bower实践3.Sass/LESS4.Gulp4.1.Gulp简介4.2.Gulp准备工作4.3.基...原创 2018-09-12 09:46:47 · 513 阅读 · 0 评论 -
Web前端学习笔记——AngularJS入门
目录什么是 AngularJS为什么使用 AngularJSAngularJS 的核心特性相关链接Angular 上手安装 Angular简单示例案例解析使用总结Angular 基础概念MVC 思想模型控制器 视图模型($scope)表达式(Expression)对比 JavaScript 表达式单向数据绑定双向数据绑定...原创 2018-09-12 22:22:34 · 2144 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之过滤器、服务、路由
目录过滤器data 过滤器lowercase, uppercasenumberlimitTo 过滤器orderByfilter 过滤器自定义比较json 过滤器自定义过滤器Form 表单Form 表单 – 验证Form 表单 – 验证规则服务创建服务 内置服务 - $http$log服务$timeout自定义服务路由...原创 2018-09-14 21:06:52 · 367 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之TodoMVC案例
TODOMVC案例根据界面原型抽象数据成员(有哪些数据,每个数据的类型和结构) 设计模块,控制器 完成数据绑定 编写交互逻辑 下载地址:https://download.csdn.net/download/tichimi3375/10667891 <!-- package.json -->{ "private": true, "dependencies"...原创 2018-09-14 21:18:31 · 297 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之豆瓣电影案例
step-01 构建项目结构克隆项目骨架bash $ git clone --depth=1 https://github.com/Micua/angular-boilerplate.git moviecat $ cd moviecat安装项目依赖bash $ bower install bootstrap --save.editorconfig -- 统一不同开发者的不同开发工具...原创 2018-09-14 21:29:41 · 980 阅读 · 0 评论 -
Web前端学习笔记——模块化开发
目录概述什么是模块化开发非模块化开发的问题为什么使用模块化开发实现模块化的推演step-01 全局函数step-02 封装对象step-03 划分私有空间step-04 模块的扩展与维护step-05 第三方依赖管理实现规范CommonJS规范AMD规范CMD规范•服务器端规范•浏览器端规范CMD实现-SeaJSAMD实现-R...原创 2018-09-14 22:31:24 · 1002 阅读 · 0 评论 -
Web前端学习笔记——VueJS基础
什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与...原创 2018-09-15 22:15:34 · 974 阅读 · 0 评论 -
Web前端学习笔记——VueJS之过滤器、生命周期、请求、动画
品牌管理案例添加新品牌删除品牌<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo原创 2018-09-19 18:43:27 · 504 阅读 · 1 评论 -
Web前端学习笔记——VueJS之组件、路由
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;全局组件定义的三种方式使用...原创 2018-09-20 19:44:07 · 834 阅读 · 0 评论 -
Web前端学习笔记——HTML基础
开发工具我们主要用的 开发工具有 chrome 、 sublime 、 photoshop浏览器(显示)浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。查看浏览器占有的市场份额(知晓)查看网站: http://tongji.baidu.com/data/browser这些...原创 2018-09-19 20:56:41 · 730 阅读 · 0 评论 -
Web前端学习笔记——CSS基础、选择器
CSS的发展历程从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS 网页的美容师CSS的出现,拯救了混乱的HTML,当让更加...原创 2018-09-21 14:34:16 · 494 阅读 · 0 评论 -
Web前端学习笔记——Webpack
在网页中会引用哪些常见的静态资源?JS.js .jsx .coffee .ts(TypeScript 类 C# 语言)CSS.css .less .sass .scssImages.jpg .png .gif .bmp .svg字体文件(Fonts).svg .ttf .eot .woff .woff2...原创 2018-09-20 20:15:35 · 677 阅读 · 0 评论 -
Web前端学习笔记——CSS样式、外观、复合选择器
CSS字体样式属性font-size:字号大小font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下C...原创 2018-09-20 21:43:20 · 516 阅读 · 0 评论 -
Web前端学习笔记——CSS显示模式、特性、背景
标签显示模式(display)非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用。欧洲白人: 生活寒带或着是说常年温度较低的地缘,加上年日照时间少,身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色最重要的总结: 是为了更好的适应环境而完成的自然选择。同理,我们网页的标...原创 2018-09-20 21:45:19 · 725 阅读 · 0 评论 -
Web前端学习笔记——CSS盒子模型、浮动
盒子模型(CSS重点)其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按照美工...原创 2018-09-20 21:46:41 · 1362 阅读 · 1 评论 -
Web前端学习笔记——CSS版心和布局流程、清除浮动
版心和布局流程阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰、易读。同样,在制作网页时,要想使页面结构清晰、有条理,也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。布局流程为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如...原创 2018-09-20 21:48:20 · 5905 阅读 · 1 评论 -
Web前端学习笔记——CSS之Photoshop切图
Photoshop基本使用PS界面组成:ctrl + r 显示隐藏标尺 右击 标尺 — 把里面的单位一律改为像素ctrl+ d 取消选区菜单栏、选项栏、工具栏、浮动面板(拖拽名称,可单独操作面板)、绘图窗口 窗口菜单,可显示隐藏所有面板工作区:(新建)调整浮动面板图层操作(重点)图层面板快捷键 F7 其实图层就是一张张透明的纸 可以实现叠加问题。...原创 2018-09-20 21:49:25 · 887 阅读 · 0 评论 -
Web前端学习笔记——CSS定位、高级技巧、文字溢出、精灵图、Web字体
定位(position)background-position 背景定位如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦!为什么要用定位?那么定位,最长运用的场景...原创 2018-09-20 21:52:42 · 3992 阅读 · 0 评论 -
Web前端学习笔记——CSS京东案例、BFC
京东项目(一)京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分。项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂的,这里用京东电商网站复习、总结、提高前面所学布局技术。其实,最主要的原因还是,为啥写京东? 因为刘强东,赚了我们的钱,抢了我们的女神, 我们也要学刘强东,赚别人的钱,抢别人…...原创 2018-09-20 21:55:12 · 3139 阅读 · 2 评论 -
Web前端学习笔记——HTML5新标签与特性
HTML5新标签与特性文档类型设定documentHTML: sublime 输入 html:4sXHTML: sublime 输入 html:xtHTML5 sublime 输入 html:5 字符设定:HTML与XHTML中建议这样去写:HTML5的标签中建议这样去写常用新标签w3c 手册中文...原创 2018-09-20 21:56:03 · 946 阅读 · 0 评论 -
Web前端学习笔记——CSS3 新增选择器
CSS3 新增选择器结构(位置)伪类选择器(CSS3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型:nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一...原创 2018-09-21 14:34:25 · 547 阅读 · 0 评论 -
Web前端学习笔记——Webpack结合VueJS使用、Mint-UI、MUI
注意:有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D在普通页面中使用render函数渲染组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2018-09-21 20:53:33 · 1569 阅读 · 0 评论 -
Web前端学习笔记——VueJS-APP案例
将项目源码托管到oschina中点击头像 -&amp;gt; 修改资料 -&amp;gt; SSH公钥 如何生成SSH公钥创建自己的空仓储,使用 git config --global user.name &quot;用户名&quot; 和 git config --global user.email ***@**.com 来全局配置提交时用户的名称和邮箱使用 git init 在本地初始化项目使用 touc...原创 2018-09-24 19:21:33 · 2265 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之对象
对象为什么要有对象function printPerson(name, age, sex....) {}// 函数的参数如果特别多的话,可以使用对象简化function printPerson(person) { console.log(person.name); ……}什么是对象现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。举例: 一部...原创 2018-09-21 22:14:58 · 832 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之数组、函数、作用域
数组为什么要学习数组之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的姓名,此时该如何存储?数组的概念所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。数组的定义数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。通过数组字面量创建数组// 创建...原创 2018-09-21 22:16:07 · 587 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之变量、操作符、表达式和语句
浏览器说明浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。通俗的讲:可以显示页面的一个软件,国内网民计算机上常见的网页浏览器有,QQ浏览器、Internet Explorer、Firefox、Safari,Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等,浏览器是最...原创 2018-09-21 22:19:42 · 1039 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web APIWeb API介绍API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())We...原创 2018-09-24 21:31:15 · 2521 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之特效
特效偏移量offsetParent用于获取定位的父级元素offsetParent和parentNode的区别var box = document.getElementById('box');console.log(box.offsetParent);console.log(box.offsetLeft);console.log(box.offsetTop);console.lo...原创 2018-09-24 21:31:27 · 1769 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之事件详解
事件详解注册/移除事件的三种方式var box = document.getElementById('box');box.onclick = function () { console.log('点击后执行');};box.onclick = null;box.addEventListener('click', eventCode, false);box.removeEvent...原创 2018-09-24 21:31:39 · 445 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之事件、创建元素、节点操作
事件事件:触发-响应机制Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。事件三要素事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程序:事件触发后要执行的代码(函数形式)事件的基本使用var box = document.getElementById('box');box.oncli...原创 2018-09-24 21:31:53 · 783 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之正则表达式、伪数组、垃圾回收
JavaScript 中使用正则表达式创建正则对象方式1:var reg = new Regex('\d', 'i');var reg = new Regex('\d', 'gi');方式2:var reg = /\d/i;var reg = /\d/gi;参数标志说明i忽略大小写g全局匹配gi全局匹配+忽略大小写正则匹配// 匹...原创 2018-09-24 21:51:07 · 313 阅读 · 0 评论 -
Web前端学习笔记——JavaScript 之继承、函数进阶
函数进阶函数的定义方式函数声明函数表达式new Function函数声明function foo () {}函数表达式var foo = function () {}函数声明与函数表达式的区别函数声明必须有名字函数声明会函数提升,在预解析阶段就已创建,声明前后都可以调用函数表达式类似于变量赋值函数表达式可以没有名字,例如匿名函数函数表达式没有变量提升,...原创 2018-09-24 21:53:53 · 553 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之面向对象游戏案例:贪吃蛇
面向对象游戏案例:贪吃蛇案例相关源码以上传到 GitHub :https://github.com/lipengzhou/new-snake案例介绍游戏演示在线演示地址:贪吃蛇案例目标游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力,使用面向对象的方式分析问题,需要一个漫长的过程。功能实现搭建页面放一个容器盛放游戏场景 div#map,设置样式#map { ...原创 2018-09-24 21:56:07 · 1615 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之面向对象编程
JavaScript 高级在线地址:JavaScript 高级基本概念复习由于 JavaScript 高级还是针对 JavaScript 语言本身的一个进阶学习,所以在开始之前我们先对以前所学过的 JavaScript 相关知识点做一个快速复习总结。重新介绍 JavaScriptJavaScript 是什么解析执行:轻量级解释型的,或是 JIT 编译型的程序设计语言语言特点:...原创 2018-09-24 21:59:27 · 2825 阅读 · 0 评论 -
Web前端学习笔记—— jQuery之简介、对象、选择器
jQuery简介JavaScript库的概念JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)常见的JavaScript 库 - jQuery、Prototype、MooToo...原创 2018-09-25 11:17:23 · 306 阅读 · 0 评论 -
Web前端学习笔记—— jQuery之事件机制、补充、插件
jQuery事件机制JavaScript中已经学习过了事件,jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。jQuery事件发展历程(了解)简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)简单事件注册click(handler) 单击事件m...原创 2018-09-25 11:12:57 · 309 阅读 · 0 评论 -
Web前端学习笔记—— jQuery之操作节点、属性、尺寸和位置
jQuery节点操作创建节点// $(htmlStr)// htmlStr:html格式的字符串$('<span-这是一个span元素</span-');添加节点append appendTo 在被选元素的结尾插入内容prepend prependTo 在被选元素的开头插入内容before 在被选元素之后插入内容after 在被选元素之前插入内容清...原创 2018-09-25 11:15:28 · 330 阅读 · 0 评论