灵熙兔-CSDN博客

原创 css知识总结

一 .实现隐藏 1、display：none display:none可以让网页中所有内容不显示，不为被隐藏的对象保留物理空间，重现时触发reflow渲染，会影响到dom结构的渲染，同时触发repaint重绘。 display可能的值： none——此元素不会被显示。 block——此元素将显示为块级元素，此元素前后会带有换行符。 inline——此元素会被显示为内联元素，元素前后没有

2016-07-28 18:43:32 368

原创 CSS深入理解之relative

今天看到一个特别有趣的视频，讲解position：relative，听完这个老师生动的讲解，瞬间就懂了看完漫画做个总结啊： 1 . position:absolute; 他的意思是绝对定位，默认上溯父级元素，找第一个不是 static 的元素，以其为 absolute 的基准。如果设定TRBL并且父级没有设定position属性，那么当前的a

2016-07-11 17:21:12 10441 2

原创无缝滚动的制作

一.标签 marquee 属性： 1.滚动方向direction（包括4个值：up、 down、 left和 right） 2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动） 3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位） 4.滚动延迟scrolldelay（设置

2016-07-10 23:24:24 403

原创 JQuery学习二： DOM操作

一.节点的操作1.查找节点：var $var_1=$("htmltype"); //这句话就是获取所有htmltype节点如：var $ul_1=$("ul");2.创建并追加节点：创建节点：常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理， var $var_1=$("<htmltype>");//这句话是创建一个节点$("htmltype2").appe

2016-06-20 09:57:45 6726

原创 js选项卡

第一步，先写html代码和css样式<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> body,ul,li{margin:0; padding:0; font:12px/1.5 arial

2016-06-15 11:36:31 622

原创前端推荐学习网站

前端乱炖： http://www.html-js.com/ 这个网站是我去得很多的一个网站，里面有一个专栏模块，用于展示各种原创文章，原创翻译文章，知识性比较强，内容比较专业和系统。Div.IO: http://div.io/pro/index 高质量的前端社区，聚集了很多各大公司前端牛人CNode：Node.js专业中文社区 https://cnodejs.org

2016-04-26 17:32:33 528 1

原创 url

十年来感受的前端技术变化：http://www.weixinyidu.com/n_2730343 码农小兵：http://www.devdo.net/web/js Java之GUI编程（一）：http://blog.csdn.net/dandanzmc/article/details/24437181vue文档： vue2文档：http://cn.vuejs.org/v2/guide/ ，

2017-03-08 09:50:30 1361

原创 vuejs+element中使用minicolor颜色插件

vuejs+element开发中使用颜色选择器没有什么好方法，经过一番研究决定使用jquery的minicolor颜色插件。效果图：点击输入框就会出来颜色选择窗口，同时复制到输入框#16进制颜色，右侧也会出颜色 html代码：<el-form-item label="色调" class="is_required" prop="color"> <input ty

2017-02-06 14:11:55 6071

原创开发中问题总结

兔博主这一阵在北京实习前端，虽然晚上不加班单还是没有时间更新博客，平常开发中的小问题解决后也忘了回顾记笔记，现在得空能想起来点是点吧（这里都是vue.js开发环境）一、event事件在开发中，我们要常常用到event对象来处理一些事件： 1、在火狐浏览器怎么获取event的方法火狐浏览器中，调用函数如果不传递event作为参数是无法获取事件的，需要在函数调用时传递event ： HTML

2017-01-24 11:55:19 384

转载前端页面编码

escape()、encodeURI()、encodeURIComponent()区别详解： JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 。下面简单介绍一下它们的区别1、 escape()函数 escape() 函

2016-12-27 11:38:15 1063

原创 Git代码管理工具

Git代码管理工具安装与使用说明：一、准备工作 1) 使用Git首先你得有一个github账号，注册地址：https://github.com/，然后登录。 2) 接着，在github上点击create new, new repository, 随便输入一个项目名称即可，注意选上init this repository with readme(不选择也可以，事后再自己编辑)

2016-11-23 14:10:19 6470

原创 Less学习总结

一、less简介 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法

2016-11-23 09:40:59 790

原创 React JS入门

React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。React 大体包含下面这些概念：组件 JSX Virtual DOM Data Flo

2016-10-16 21:52:18 1825

原创 js模仿QQ头像资料卡显示与隐藏

我们使用QQ时经常需要查看朋友的资料卡，当我们把鼠标移入头像时，资料卡显示，并且鼠标能在头像与资料卡之间能随意移动，当鼠标移出头像或资料卡时，资料卡延时隐藏。实质就是延时提示框问题！首先写好布局：<style> div { float:left; margin:5px; } .head { width:50px;height:50px;background-col

2016-10-16 12:13:19 953

原创 Angularjs ng-form

ng-form用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但ng-form可以。这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建表单是非常有用的。（1）Angular为form扩展了自动校验，防止重复提交等功能（2）Angular对input的type进行了扩展，一共有10种类型： text,number,url

2016-10-06 16:47:36 853

原创 angularjs scope的绑定策略

当scope选项写为scope:{ }这种形式的时候，就已经为指令生成了隔离作用域现在，我们来看看绑定策略的三种形式： @、= 、&。（1）@ 首先是@，把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值，在属性值中插入{{ }}即可。什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来：<div ng

2016-10-05 20:00:29 368

原创 Angularjs学习笔记（五）指令

一、指令基础当浏览器加载一个包含AngularJS应用的HTML时，我们只需要用内置指令ng-app启动AngularJS应用，并标记出应用的根节点，这个指令需要以属性的形式来使用，因此可以将它写到任何位置，但是写到<html>的开始标签上是最常规的做法： 1.指令的使用方式<html ng-app="myApp"></html>任何在这个根元素

2016-10-05 10:05:54 1021

原创 Angularjs学习笔记（四）模块化与依赖注入

一、路由ngRoute服务随着web应用越来越大，一个应用里面存在多个视图。在不同的视图之间进行切换时（url），为了支持浏览器的“前进、后退、history”，angular有ngRoute服务，提供$routeProvider通常我们的URL形式为http ://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现，例如：http:/

2016-10-04 19:52:30 1244

原创 Angularjs学习笔记（三）表达式、指令、模型

一、表达式 AngularJS 使用表达式把数据绑定到 HTML。类似ng-bind 指令，AngularJS 表达式写在双大括号内：{{ expression }}把数据绑定到 HTML，在表达式书写的位置”输出”数据。注意：所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限；如果表达式发生了TypeError和ReferenceError并不会抛出异常；

2016-10-04 12:00:45 698

原创 Angularjs 学习笔记（二）MVC与作用域

模型 - 视图 - 控制器或MVC，MVC是普遍的叫法，是一种软件设计模式，用于开发Web应用程序。模型- 视图 - 控制器模式是由以下三部分组成：模型/Model - 一个负责维护底层数据模式。模型是负责管理应用程序的数据。它响应来自视图的请求，同时也响应指令从控制器进行自我更新。视图/View - 负责显示所有或数据到用户的部分。在一个特定的格式的演示数据，由控制器决定触发显示数据。控制

2016-10-02 22:28:30 906

原创 Angularjs 学习笔记（一）基础

1.简介： Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。2 . AngularJS应用程序的三个组成部分，它们如何映射到模型-视图-控制器设计模式：模板：是您用HTML和CSS编写

2016-10-02 16:13:09 1627

原创 sublime Text

sublime Text 的使用笔记

2016-10-01 11:48:49 1194

原创 ES6学习笔记（七）Iterator和for...of循环

一、遍历器的感念 JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合；这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理

2016-09-30 21:13:55 564

原创 JS中的call、apply方法

一、call()和apply()方法 call和apply，它们的作用都是将函数绑定到另外一个对象上去运行两者的格式和参数定义：call( thisArg [，arg1，arg2，… ] ); // 参数列表，arg1，arg2，...apply(thisArg [，argArray] ); // 参数数组，argArray1.方法定义call方法:调

2016-09-30 16:06:33 225

原创 ES6学习笔记（六）函数与对象

一、函数 1.参数的默认值在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y); } ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。function log(x, y = 'World') { console.log(x, y);}log(

2016-09-27 11:35:45 1137

Array:ES5:(1)Array.prototype.forEach(function(item,index,array){…})(2)Array.prototype.map(function(value,index,array){…//return value,该值会被插入新数组})映射为一个新数组(3)Array.prototype.some(function(item){…//条件})数组

2016-09-25 20:10:53 6316

原创 ES6学习笔记（五）Set和Map数据结构

一.Set ES6提供了新的数据结构Set。类似于数组，只不过其成员值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构。 1 . Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。var s = new Set();var set = new Set([1, 2, 3, 4, 4]);[...set] // [1, 2, 3, 4]var

2016-09-25 19:51:42 302

原创 CSS知识点总结(二)单位

一、长度单位绝对长度单位in（英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica），在网页的设计中很少用到。 pt是绝对单位，标准印刷上常用的单位，在文字排版工具（word，abobe）中是非常有用的字体单位。不管显示器的分辨率是多少，打印在纸面上的结果是一样的。相对长度单位是使用最多的长度单位。包括em、rem、ex、pxpx就是通常所说的像素，使网页设计中使用最多的长度单位。

2016-09-25 16:49:05 209

原创 ES6学习笔记（四）数值与数组的扩展

1.二进制和八进制数值 ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。0b111110111 === 503 // true0o767 === 503 // true从ES5开始，在严格模式之中，八进制就不再允许使用前缀0表示，ES6进一步明确，要使用前缀0o表示。如果要将0b和0o前缀的字符串数值转为十进制，要使用Number方法。Number('

2016-09-24 20:25:57 405

原创 ES6学习笔记（三）字符串的扩展

1.字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符，其中“xxxx”表示字符的码点。但是，这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表达。"\uD842\uDFB7" //"吉""\u20BB7" // " 7"ES6对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。"\

2016-09-24 16:33:13 1118

原创 CSS3（四）Media Queries 与Responsive 设计

随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。首先我们要了解常见的媒体类型： Screen、All和Print为最常见的三种媒体类型。 Screen——电脑显示器 A

2016-09-24 11:27:44 483

原创 CSS3（三）布局样式

一、多列布局——Columns：到目前为止大部分主流浏览器都对其支持：为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面语法：columns：<column-width> || <column-count> //列宽和列数columns: 2

2016-09-24 10:23:08 1800 3

原创 ES6学习笔记（二）变量的解构赋值

一、数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构,解构赋值不仅适用于var命令，也适用于let和const命令。以前，为变量赋值，只能直接指定值。var a = 1;var b = 2;var c = 3; ES6允许写成下面这样。var [a, b, c] = [1, 2, 3];可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属

2016-09-23 20:31:14 319

原创 ES6学习笔记（一）let const

准备工作：首先需要配好node环境，见博文：在项目根目录下 shift+右击 >打开命令窗口输入：npm init 进行初始化多次回车（文件夹里会多一个package.json文件）输入：npm install babel-cli babel-preset-es2015 稍等一会即可完成后你会发现文件夹里多了个 node_modules 文件夹，子文件夹.bin里有个babe

2016-09-23 18:16:19 282

原创 Node.js环境搭建

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。简单的说 Node.js 就是运行在服务端的 JavaScript。如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。node.js的下载安装下载地址：h

2016-09-23 11:49:38 323

原创 CSS3(二)选择器

一、属性选择器新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：例如： html代码：<a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我

2016-09-18 21:16:41 684

原创 CSS3(一)新增常用样式

目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。优点：CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。在编写CSS3样式时，不同的浏览器可

2016-09-18 19:43:52 2502

原创 CSS知识点总结(一)定义、使用方式及常见属性

一、颜色属性 color属性定义文本的颜色： 1.color：green ；（颜色对应的英文名称） 2.color：#FF0066 ；（十六进制）分为三段，分别表示R,G,B取值简写形式，当每个颜色的取值重复时，简写为#F06；3.color：rgb（255,0,0）；（RGB模式） 4.color：rgba（255,0,0,1）；（RGB模式和Alpha色彩空间透明度）Alpha取值范

2016-09-06 17:28:19 382

原创数据结构与经典算法（二）

第三章、栈栈是一种特殊的线性表，一般来说在线性表的插入删除不受控制，而栈上的插入删除操作会受限制，栈的插入和删除操作是在童一端进行的。一、栈 1.基本概念栈是仅限定在表的一端进行插入或删除操作的线性表。允许插入和删除操作的顶端称为栈顶，处于栈顶位置的元素称为栈顶元素。相应的称为栈底。栈中含有的元素个数称为栈长；不含元素的空表称为空栈。由于栈的插入和删除运算仅在栈顶一端进行，后进

2016-09-06 09:20:35 260

原创数据结构与经典算法（一）

数据结构是研究包括数据的逻辑结构、存储结构以及定义在它们之上的一组运算。第一章、基础知识 1.数据结构的主要研究内容（1）数据结构的逻辑结构。根据应用对象设计有限元素集合中结点之间的逻辑关系，如线性表、树、图等（2）逻辑结构在计算机中的物理实现。数据结构在计算机内存中的表示方法称为数据结构的物理结构，以区别前者的逻辑结构形式，如顺序表（顺序存储结构）、链表（链式存储结构）、二叉树等（3

2016-09-01 17:40:30 1503

ES6知识总结与实例讲解

空空如也