- 博客(67)
- 收藏
- 关注
RSS订阅原创 vue基础
一、Vue初步1.1 Vue简单认识Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vfue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。vue.js、Angular.j...
2019-11-01 20:14:49
249
原创 关于mui轮播图的相关问题及解决
直接引入文档，轮播图只能手动切换，不能自动轮播，是初始化代码有问题mui写的实例，div代码块<div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop" id="stul"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一...
2019-10-29 22:18:07
1198
2
原创 响应式布局和自适应布局
注：响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础...
2019-10-23 22:25:25
311
转载 express
基本结构先回顾一下 express 使用的的过程，首先是把模块倒入，然后当做方法执行，在返回值中调用 use 处理路由，调用 listen 监听端口。const express = require('express')const app = express()app.use('/home', (req, res) => { res.end('home')})app.liste...
2019-10-22 20:32:44
128
转载 npm
npm 包管理工具1. 什么是 npm ?npm是 Node 的包管理工具 ，是全球最大的开源库生态系统官网 https://www.npmjs.com/2. 常见命令初始化项目 $ npm init $ npm init --yes 默认配置 下载命令: npm init 初始化包管理文件 npm install 包名 下载...
2019-10-21 20:38:24
142
转载 rem使用
rem概念rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。首先，先说一个常识，浏览器的默认字体大小都是16px。...
2019-10-20 22:08:03
257
原创 nodejs基础
Nodejs简介1.简单的说 Node.js 就是运行在服务端的 JavaScript。2.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。3.Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Nodejs的应用场景由于Nodejs目前还不够成熟，因此一般不会用作独立开发，它的主要用途如下1.中间层通常在开发应用时，...
2019-10-18 23:02:07
116
转载 BootStrapValidate 简单使用
首先需要引入 以下文件bootstrapValidator.css //可不引入jquery-2.1.0.min.jsbootstrap.min.jsbootstrapValidator.js下面是校验方式 其中校验的两个文本框的name属性为 loginName和 password （切记文本框一定要用name属性 否则校验无效）function validate(){ ...
2019-10-15 20:45:57
465
原创 Bootstrap栅格系统以及排版
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，...
2019-10-14 00:00:36
799
转载 vscode常用插件
1 文件图标 vscode-icons插件名称：vscode-icons插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。vscode-icons 插件可以实现对各种文件类型的文件前的图标进...
2019-10-08 20:51:55
1500
转载 less复习
lessless是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。less中的注释以//开头的注释，不会被编译到css文件中；以/**/包裹的注释会被编译到css文件中。less中的变量使用@来声明一个变量，如：@myCo...
2019-10-07 22:57:21
123
原创 cookie
cookie工作的原理Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是C...
2019-09-22 19:20:37
113
原创 媒体查询
响应式布局可以看作是流式布局和自适应布局设计理念的融合。其目标是确保一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。响应式布局依赖媒体查询，而前端枚举的媒体查询是有限的，只能适应主流的宽高，要匹配足够多的屏幕大小，UI和前端的工作量都不小；通常应用响...
2019-09-20 22:49:29
551
原创 模板引擎
实现思路：定义好模板，用id拿到模板内容的字符串，用正则去匹配双花括号，找到之后使用定义好的对象属性进行替换1.定义模板<script id="contentTemplate" type="text/html"> <h1>{{title}}</h1> <ul> {{each list}} ...
2019-09-18 21:14:05
110
原创 js获取节点
一、JS获取节点的兄弟,父级,子级元素的方法原生jsvar s= document.getElementById(“test”);del_ff(s); //清理空格var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点v...
2019-09-17 22:16:20
264
原创 bootstrap
一、什么是bootstrap?bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件：bootstrap.min.css和bootstrap.min.js。为什么没有.min.html呢？不知道，或许有一天会有吧~在bootstrap4.x版本中，bootstrap.min.js需要依赖两个...
2019-09-16 21:34:56
125
原创 css3动画效果
animation动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;(除了名字，动画时间，延时有严格顺序要求其它随意)@keyframes 动画名称 { from{ 开始位置 } /*0%*/ to{ 结束 } /*...
2019-09-16 00:51:26
91
原创 移动端 touch事件
移动端首先要书写meta标签<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0移动端touch事件 和 鼠标点击事件移动端的事件是新增的，touch事件也叫触摸事件。因为手指的行为叫触摸。...
2019-09-11 22:18:41
265
原创 flex布局
伸缩布局(CSS3)CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。Flex...
2019-09-10 19:14:41
166
原创 canvas动画制作
绘制图片drawImage()三个参数drawImage(img,x,y)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角五个参数drawImage(img,x,y,w,h)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角w,h 图片绘制尺寸设置(图片缩放，不是截取)九个参数drawImage(img,x,y,w...
2019-09-09 19:23:05
779
原创 canvas总结
什么是CanvasHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度： <canvas id="myCanvas" width="200" ...
2019-09-08 20:30:34
151
原创 canvas
canvas /*获取元素*/ var myCanvas = document.querySelector('#myCanvas'); /*获取绘图工具*/ var context = myCanvas.getContext('2d'); /*设置绘图的起始位置*/ context.moveTo(100,100); /*绘制路径*/ ...
2019-09-06 17:17:14
87
原创 h5表单和本地缓存
H5新增的input类型<form> 邮箱：<input type="email"><br/> 数量：<input type="number" value="20" max="25" min="18"><br/> 电话：<input type="tel"><br/>...
2019-09-04 20:11:36
910
原创 HTML5基础
新特性HTML5 中的一些有趣的新特性：• 用于绘画的canvas 元素• 用于媒介回放的video 和audio 元素• 对本地离线存储的更好的支持• 新的特殊内容元素，比如article、footer、header、nav、section• 新的表单控件，比如calendar、date、time、email、url、search浏览器支持最新版本的Safari、Chrome、F...
2019-09-03 19:20:29
237
转载 JS中几种绑定事件的方式
事件处理程序即给元素绑定事件的方式有下列几种：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。其实这些方式就是一个逐步优化和实现跨浏览器的过程。1、HTML事件处理程序：直接在html的标签中添加事件属性，例如：这样做很是不好，有下列两大缺点，这也是如今在开发中很难见到这样绑定事件的原因。（1）存在一个时差问题，因为用户可能会在H...
2019-09-02 20:56:50
246
原创 css3动画
animation动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;(除了名字，动画时间，延时有严格顺序要求其它随意)@keyframes 动画名称 { from{ 开始位置 } /*0%*/ to{ 结束 } /...
2019-09-01 19:08:06
266
原创 fullPage
FullPage插件插件功能介绍基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，支持手机、平板触摸事件，支持 CSS3 动画，支持窗口缩放，窗口缩放时自动调整，可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。使用步骤引用文件 <link rel="stylesheet...
2019-08-29 22:19:36
117
原创 css3基本属性2
3D变形(CSS3) transform3d x y z左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。x左边是负的，右边是正的y 上面是负的， 下面是正的z 里面是负的， 外面是正的rotateX()就是沿着 x 立体旋转.rotateY()沿着y轴进行旋转r...
2019-08-28 20:23:40
118
原创 css3样式
CSS3属性CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。1.选择器 2.盒模型 3.背景和边框 4.文字特效5.2D/3D转换 6.过渡 7.动画CSS3高级选择器p:first-of-type : 返回指定p元素的第一个p:last-of-type : 返回指定p元素的最后一个p:first-child : 返回其父元素的首个子元素pp:last-chil...
2019-08-27 22:02:24
244
原创 ajax基本概念和实现过程
Ajax基本概念Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，可以在不重新加载整个网页的情况下，对网页的某部分进行更新.Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键-发送异步请求、接受响应以及执行回调。JS实现Ajax的过程:...
2019-08-26 18:27:25
132
原创 jquery常用方法
转换jQuery对象原生 javascript DOM 对象不能使用 jQuery 的方法，需转换DOM 对象转 jQuery 对象使用 $() 将 DOM 对象包装起来var span = document.getElementsByTagName(span)[0];$(span)jQuery 对象转 DOM 对象使用 jQuery 的 get(index) 方法var sp...
2019-08-25 21:29:39
117
原创 封装自己的jquery插件
第一步：要想封装自己的jq插件，要先了解jquery插件运行机制。jQuery使用无new的构造方式，直接$(’ ')进行构造，相当于new jQuery()。看下面例子。jQuery将jQuery.prototype赋值给jQuery.prototype.init的prototype作为中转站，最终return出了一个jQuery实例。将上述代码写在一个自执行函数内（形成私有作用域，避免命名...
2019-08-22 22:12:06
450
原创 jquery元素相关操作
元素相关操作向后追加元素 $('div').append($a); $a.appendTo($('div'));向前追加元素 $('div').prepend($a); $a.prependTo($('div'));在外部插入元素 before()前面 after()后面 $('p').after($a); $('p').before(...
2019-08-21 22:24:29
137
原创 jQuery
操作样式js中操作样式：style属性： 行内样式className属性：类名jquery中操作样式：css(): 操作style样式addClass()系列方法： 操作类名css()方法：操作单个样式 .css(‘属性’,‘属性值’)操作多个样式： .css({‘属性名’：‘属性值’,‘属性名’：‘属性值’}) 属性名可以打引号，也可以不打引号获取样式： .cs...
2019-08-20 21:21:13
140
原创 jQuery基础
使用jQuery的三个步骤：1. 引入jQuery文件2. 入口函数3. 功能实现1.关于jQuery的入口函数：//第一种写法$(document).ready(function() { });//第二种写法$(function() { });要注意jQuery对象与DOM对象的区别1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是d...
2019-08-19 19:10:21
107
原创 web api
API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。获取页面元素根据id获取元素var div = document.getElementById('main');根据标签名获取元素var divs...
2019-08-18 22:59:34
98
转载 正则表达式
正则表达式简介：正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。非打印字符：特殊字符：所谓特殊字符，就是一些有特殊含义的字符，如上面说的runoo*b中的*，简单的说就是表示任何字符串的意思。如果要查找字符串中...
2019-08-15 19:11:44
86
原创 js三大系列
js中有一套方便的获取元素尺寸的办法：offset系列offset常用属性（5个）offsetWidth和offsetHeight————（检测盒子自身宽高+padding+border）offsetLeft和offsetTop————（检测距离父盒子有定位的左/上面的距离）offsetParent————（检测父系盒子中带有定位的父盒子节点）offsetwidth和offsetheig...
2019-08-08 18:34:45
259
原创 数组的几个方法，获取css属性和键值对
1.数组的一些方法push() 在数组的末尾添加一个或多个元素 返回数组新长度pop() 移除数组的最后一项，返回移除的项shift() 移除数组的第一项，返回移除项unshift() 在数组的第一项前面添加一个或多个元素，返回数组的长度2.获取css属性getComputedStyle可获取当前元素的所有css属性，返回的是一个[object CSSStyleDeclar...
2019-08-07 19:18:55
1174
原创 关于第一次技术沙龙的收获与期望
关于第一次技术沙龙的收获与期望今天是特别的一天，我所在的中兴微品致远公司举办了一场技术沙龙，主讲是彭璟老师，对象是我们和上一期web前端的同学，沙龙分为以下几个阶段。1.由两个班的同学先进行自我介绍，我印象深刻的记住了许多同学，他们来自五湖四海，但都怀有同样的梦想，学好web前端的技术，成就一番自己的事业。2.自我介绍结束后，我们在两位年轻漂亮的女老师的带领下展开了一个小游戏，这个游戏充分调...
2019-08-06 19:13:04
504
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人