- 博客(38)
- 资源 (2)
- 收藏
- 关注
原创 Git与Angular入门
复习Node Node.js — 类似一个操作系统一个JS的运行环境主要用于开发Web应用程序(回想登陆的例子)很多的前端开发工具都是基于node这个平台所用的工具就相当于一些软件NVM (可选的)Node Version Manager(Node的版本管理工具)因为node的版本比较多,很多时候我们可能依赖多个版本,并要求自由切换使用nvm use [对应的版本号] [平台架构(如
2017-07-31 14:31:11 864
原创 gulp文件
//gulpfile.js'use strict';/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */// 在gulpfile中先载入gulp包,因为这个包提供了一些APIvar gulp = require('gulp');var less = require('gulp-less');var cssna
2017-07-31 14:20:27 255
原创 git简单使用
5.3.1.初始化一个本地GIT仓储// 定位到仓储文件夹目录$ cd /dir// 初始化本地仓储$ git init5.3.2.添加本地GIT忽略清单文件.gitignore// 添加OS X中系统文件.DS_Store到忽略清单,这将忽略项目任意目录下的.DS_Store文件或是文件夹$ echo .DS_Store >> .gitignore5.3.3.查看本地仓储的变更状态$ gi
2017-07-31 14:14:10 233
原创 封装jsonp跨域请求
(function(window,document,undefined){ // url = http://ssss?dsf=sdfs& var jsonp = function(url, data, callback) { // 1.挂载回调函数 var fnSuffix = Math.random().toString().replace('.',
2017-07-29 15:44:38 332
原创 在Windows环境下用Yeoman构建AngularJS项目
本文将通过 Yeoman 创建一个 AngularJS 应用,同时 也能感受到 Grunt 和 Bower 的功能。认识YeomanYeoman 是一位戴帽子、立意奇颖的人。Yeoman 是一套工作流程。Yeoman 是Web 应用开发脚手架。通过很少的命令,就能给你整个应用或者独立的模块生成模板代码,比如控制器或者模型。Yeoman 可以启动预览 Web 服务器,观察文件,如果被编辑,就会重新加载
2017-07-26 15:28:26 644
原创 移动web开发经验与常见问题总结
1.1 移动web1.1.1 三种布局有最大、最小宽度的百分比自适应布局 适用场景:门户网站首页,图片较多的首页。百分比自适应布局 适用场景:信息文字较多的网页,内容较多网页。全屏自适应布局 适用场景:单页面网页,移动web app 页面。1.1.2 Box-sizing在移动端的使用在百分比定宽的页面经常使用。*,::before,::after{ -webkit-
2017-07-19 16:14:14 481
原创 28个HTML5特征、窍门和技术
前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。一、新的Doctype//zxx:”doctype”中文意思指“文档类型”仍在使用麻烦的,不可能记得住的XHTML文档类型?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
2017-07-18 12:26:04 701
原创 JS中策略模式变成--面向未来变成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty
2017-07-17 18:57:56 299
原创 Node版本管理工具NVM配置
1.Node环境1.1.什么是NodeNode.js 可能类似jquery.js不是JS文件,也不是一个JS框架()而是Server side Javascript runtime, 服务端的一个JS运行时我们可以在NODE运行JS代码alert();ECMAScript JS- ES BOM DOMnode中只能运行ECMAScript,无法使用 BOM 和 DOM目前我们的J
2017-07-17 18:29:32 317
原创 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs.如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个.安装 (全局安装加 -g) : npm install http-server Windows 下使用:在站点目录下开启命令行输入 http-server访问: http://localhost:8080 or http://12
2017-07-17 18:10:27 1382
原创 Array对象常用方法
//shift:删除原数组的第一项,返回删除元素的值;如果数组为空则返回undefined var arr = [1, 2, 3, 4, 5]; var out = arr.shift(); console.log(arr); //[2,3,4,5] console.log(out); //1 var arr = []; var out = arr.s
2017-07-14 19:12:34 312
原创 常用string原型扩展
/** 在字符串末尾追加字符串 **/String.prototype.append = function (str) { return this.concat(str);}/** 删除指定索引位置的字符,索引无效将不删除任何字符 **/String.prototype.deleteCharAt = function (index) { if (index < 0 || in
2017-07-14 19:10:30 818
原创 常用string内置对象方法
//concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。 var str = "Hello"; var out = str.concat(" World","!"); console.log(str); //Hello console.log(out); //Hello World! //charAt() – 返回指定位置的字符。
2017-07-14 19:05:52 1111
原创 常用数组扩展
/** 删除数组中指定索引的数据 **/Array.prototype.deleteAt = function (index) { if (index < 0) { return this; } return this.slice(0, index).concat(this.slice(index + 1, this.length));}/** 数组洗牌
2017-07-14 18:51:28 218
原创 静态属性-原型属性-实例属性
//对象构造函数 function Atest(name){ //私有属性,只能在对象构造函数内部使用 var className = "Atest"; //公有属性,在对象实例化后调用 this.name = name; //对象方法 this.hello = function(){
2017-07-14 18:46:29 335
原创 js中对call()函数和apply()函数的深入探索
call的探索01 call借用 //对象1 var myclass={ getAllStudentsNumbers:function(){ return 130} }; //对象2 var student={ getDetail:function(){ return {name:'莉莉',ai
2017-07-13 18:38:27 508
原创 几点建议帮你写出简洁的JS代码
我决定为初学者写一篇博客来介绍一些常见编程技巧,这些技巧可以帮助你写出更加规范,容易维护的代码。1. 常量这个问题哦不仅仅是写JavaScript的开发者们会遇到,在所有的开发语言中都要避免。我们来看一个例子:$elem.on('keydown', function(e) { if (e.keyCode == 27) { //... }});
2017-07-13 11:43:59 309
原创 BOM的相关内容整理
// 利用userAgent属性判断是哪个浏览器 function CheckBrowser(){ var u_agent = navigator.userAgent; var browser_name='未知浏览器'; if(u_agent.indexOf('Firefox')>-1){ browser_name
2017-07-12 18:46:31 430
原创 自动轮播--面向对象实现方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css"> *{margin: 0 auto;padding: 0;list-style: none;border: 0; text-align: ce
2017-07-11 14:33:37 413
原创 选项卡tab小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty
2017-07-10 19:16:02 546
原创 常用正则表达式大全
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script>/* 常用正则表达式大全!(例如:匹配中文、匹配html) 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文
2017-07-10 19:08:40 215
原创 正则表达式--基础语法总结
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> //正则表达式基础知识 //星号(*) : 星号代表匹配它前面一个字符任意遍(0或任意次) //加号(+): 加号是一个与星号(*)类
2017-07-07 18:42:39 276
原创 正则表达式复习--正则语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script type="text/javascript">/********* * 正则表达式是一个描述字符模式的对象 * 可以使用一个RegExp()构造函
2017-07-07 18:39:55 351
原创 正则表达式--表单验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css"> body{background: #ccc;} label{width: 40px; display: inline-block;}
2017-07-07 18:32:49 242
原创 JS数据类型检测方法汇总
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> var num = 1 var str = '心暖未晴' var bool=false; var arr=[];
2017-07-07 17:11:05 276
原创 JavaScript中对Object.defineProperty 函数 的理解
Object.defineProperty 函数 (JavaScript) 将属性添加到对象,或修改现有属性的特性。语法Object.defineProperty(object, propertyname, descriptor)参数
2017-07-07 16:36:06 358
原创 Jquery插件Nicescroll 制作滚动条
jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。页面使用:$("html").niceScroll({ cursorcolor:"#E62020", curs
2017-07-05 12:06:44 890
原创 globs 的匹配规则
gulp 内部使用了node-glob 模块来实现其文件匹配功能:匹配符说明*匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾**匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。?
2017-07-03 19:24:23 1432
原创 gulp创建任务模板(less/压缩/合并/最小化图片)
**package.json**{ "name": "code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "li
2017-07-03 19:08:45 494
原创 Gulp前端自动化工具
Gulp当下的前端开发不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了我们要提高效率,就必须减少重复的工作使用less之类预处理的CSS coffeescript提供开发阶段的便利,开发阶段更快捷现在的开发行业优质的开发人员是不应该将精力放在这些重复性质的工作上Gulp就是一种可以自动化完成我们开发过程中大量的重复工作 预处理语言的编译js
2017-07-03 18:28:34 593
原创 Sass/Less对比
# Sass/Less ComparisonIn this document I am using Sass's SCSS syntax. You can choose to use the indented syntaxin sass, if you prefer it, it has no functional differences from the SCSS syntax.For Less
2017-07-03 18:05:01 459
原创 Node学习笔记(一)
node实现验证登录功能'use strict';var http = require('http');var url = require('url');var querystring = require('querystring');http.createServer(function(request,response){ // var u = url.parse(request.ur
2017-07-03 17:37:10 225
原创 jQuery.expr[':'].Contains自定义伪类选择器
不区分大小写过滤筛选jQuery.expr[':'].Contains = function(a,i,m){ return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;}function filelist(input,list) { $(input).ch
2017-07-03 14:31:06 1696
原创 利用jQuery.expr创建一个自己的伪类选择器
前段时间看到一段jQuery代码,代码里面用到了jQuery.expr这个对象。完全陌生又木有。翻了下jQuery的官方文档,没找到关于这个对象的解释,不过搜寻了一番过后终于在jQuery的选择器引擎——sizzle的文档里找到了线索。如果没猜错的话,这个对象应该是Sizzle.selectors对象的扩展。其实要验证这一点非常简单,我们把两个对象分别console.log出来对比下就知道了。页面引
2017-07-03 14:18:23 763
原创 Bootstrap项目实战——架构视角介绍使用
微金所项目实战1. 搭建Bootstrap页面骨架及项目目录结构├─ /xxxxxxx/ ··················· 项目所在目录└─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的
2017-07-03 11:54:29 8246
原创 CSS3中:nth-child和:nth-of-type的区别深入理解
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3,才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以”type”来区分的。也就是说:ele:nth-of-type(n)是指父元素下
2017-07-03 11:47:00 3249 2
原创 less的使用介绍(一)
Less类似的预处理css语言还有 Sass styuls等等 一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点 官网 中文网 中文网 http://www.w3cplus.com/css/less概要为什么要有预处理CSSCSS基本上是设计师的工具,不是程序员的工具。在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如说PHP、Javas
2017-07-03 11:03:34 2388
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人