javasctipt
关注
分享
扫一扫
babybk
热衷于it行业，热衷于web开发
展开
-
node版本控制n的使用
n是Node的一个模块，作者是TJ Holowaychuk（鼎鼎大名的Express框架作者） 安装很简单：$ sudo npm install -g n安装完成之后，直接输入n后输出当前已经安装的node版本以及正在使用的版本（前面有一个o），你可以通过移动上下方向键来选择要使用的版本，最后按回车生效。$ n 0.10.1 0.10.15 o 0.10.21 0原创 2017-02-04 12:45:46 · 4317 阅读 · 0 评论 -
手写的一个图表插件
转载请注明出处<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0;list-style-type: none;} #box{ /*width:原创 2016-06-01 22:02:41 · 659 阅读 · 0 评论 -
JavaScript history 对象
JavaScript history 对象history – history用于窗体中的导航 history，中文”历史” 引用网址：http://www.dreamdu.com/javascript/window.history/ history对象是window对象的属性 浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经转载 2016-05-08 21:49:27 · 482 阅读 · 0 评论 -
location.hash的用法及onhashchange (精华，建议大家没事读一下)
location.hash是什么: 熟悉HTML都知道喵链接，没错，location.hash就是获取或设置喵链接的。上面的用法相信大家都知道，但是下面的就要考细节了。 当我们载入一个页面后，然后又去触发了一个AJAX请求去部分改变了页面上的内容，这个时候，你会发现，浏览 器其实并没有记录这两个动作，而是把这两个动作记录为了一个动作，即是认为你只打开一个页面，所以“前进/后退”按钮就没有用转载 2016-05-08 21:36:38 · 69745 阅读 · 0 评论 -
JSON.parse和eval的区别
摘自:http://blog.youkuaiyun.com/zk437092645/article/details/8641500 作者:第2016换个昵称JSON(JavaScript Object Notation)是一种轻量级的数据格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是Javascript原生格式，这意味着在javascript中处理JSON数据不需要任何特殊的API转载 2016-05-08 20:35:26 · 294 阅读 · 0 评论 -
labjs使用教程
知道LABJS这个概念其实早于sea.js，但因为sea.js是中文，并且第一眼就喜欢上sea.js的CommonJS所以并没有深入了解过LABJS。在使用sea.js的时候不可避免的碰到js文件依赖问题，这时候才想起不到5k的LABJS来，看过手册之后俺不禁怀疑“有必要sea.js和labjs一起使用么”，或许俺等到sea.js可以支持文件加载顺序之后再回到sea.js的怀抱？除了看起来美观和支持转载 2016-05-08 19:05:04 · 793 阅读 · 0 评论 -
CSS3的calc()使用
摘自:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 作者:大漠calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，转载 2016-05-08 18:22:49 · 877 阅读 · 0 评论 -
web移动端页面适配
PPK的关于三个viewport的理论 摘自:http://www.cnblogs.com/2050/p/3877280.html 作者:无双ppk大神对于移动设备上的viewport有着非常多的研究（第一篇，第二篇，第三篇），有兴趣的同学可以去看一下，本文中有很多数据和观点也是出自那里。ppk认为，移动设备上有三个viewport。首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，转载 2016-05-08 16:40:57 · 3385 阅读 · 0 评论 -
手机触屏事件(touch事件,网上资料有限,想具体了解还需要自己研究)
上篇文章我们讲了html的基本事件，这篇文章我们着重讲解下触摸事件，触摸事件触发的条件是手指接触屏幕、手指在屏幕上移动或者从屏幕上离开。 事件是触摸的集合，它起始于手指初次放置在屏幕上，终止于最后一个手指离开屏幕。事件从开始到结束过程中的所有触摸操作都存储在相同事件的记录中。 touch事件 touch事件可以分为单点触摸和多点触摸两种，单点触摸高端机一般都支持，Safari2.0、Androi转载 2016-05-07 19:52:51 · 605 阅读 · 0 评论 -
js事件之event.preventDefault()与event.stopPropagation()用法区别
很多朋友都以为event.preventDefault()与event.stopPropagation()是jquery的方法，其实不是的它们是js本身自带的方法了，下面我来给各位同学简单介绍它们两的用法与区别了。 event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “su转载 2016-05-07 22:00:32 · 5562 阅读 · 0 评论 -
用html5新增的js媒体 API手写的一个视频播放器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>html5视频测试</title> <style> *{margin: 0;padding: 0;list-style-type: none;font-family: "微软雅黑";}原创 2016-05-07 10:53:16 · 3781 阅读 · 0 评论 -
JS(JavaScript)插入节点的方法appendChild与insertBefore
首先 从定义来理解 这两个方法： appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild) insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild) 相同之处：插入子节点 不同之处：实现原理方法不同。 appendChild方转载 2016-05-15 15:27:47 · 5560 阅读 · 0 评论 -
JavaScript DocumentFragment：更快捷的操作DOM的途径
我相信很少人知道JavaScript里还有这样一个很有用的东西：DocumentFragment。程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构，而效率高是它真正的优势，试验表明，它比直接操作DOM快70%。下面我们就来看看DocumentFragments是如何使转载 2016-05-15 15:17:54 · 699 阅读 · 0 评论 -
js常用属性及方法总结(温习下旧知识)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="box" qwe="张展亮" style="background:#000"> asdfsdf </div></body>原创 2016-05-09 22:49:15 · 542 阅读 · 0 评论 -
JS中cookie的基本使用
cookie是本身是HTML中ducument中的一个属性，可以用来保存一些简单的数据信息，比如用户名、密码等，提高一些网站的用户体验度。下面就来简单的说说cookie，它有下面几个特性：1.有过期时间，这个可以设置，如果不设置默认是关闭浏览器则清除 2.有大小限制，一般cookie的条数不会超过50条，但因浏览器的不同也会有差异，单个cookie的大小不能超过2M 3.cookie是以键值对的转载 2016-06-24 18:58:34 · 551 阅读 · 0 评论 -
CSS实现的loading页面等待效果
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>无标题文档</title> <style type="text/css"> .loading{ width:160px; height:56px; position: absolute; top:50%;转载 2016-06-24 19:06:11 · 8327 阅读 · 0 评论 -
js深拷贝和浅拷贝
js深拷贝和浅拷贝一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。var arr = ["One","Two","Three"];var arrto = arr; arrto[1] = "test"; document.writeln("转载 2016-05-23 10:45:52 · 494 阅读 · 0 评论 -
淘宝 NPM 镜像使用
前言因为众所周知的原因，使用node，官方NPM仓库安装依赖包是个看人品的事情，不过有万能的淘宝，所以需要部分调整就可以避免这些原因。（以下内容osx, centos下测试通过）淘宝镜像基本使用首先是版本管理，NODE更新迭代较快，推荐使用NVM来进行版本管理，因为NVM支持镜像选项，所以，简单设置环境变量即可：export NVM_NODEJS_ORG_MIRROR=http://npm.taob转载 2017-02-04 13:35:19 · 1580 阅读 · 1 评论 -
将网站打造成单页面应用SPA（Single Page Application）
摘要：不知你有没有发现，像Github、百度、微博等这些大站，已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转，然后使用HTML5的新API修改了Url，你可以在F12的Network面板里发现这个秘密。前言不知你有没有发现，像Github、百度、微博等这些大站，已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转，然后使用HTML5的新A转载 2017-02-10 10:48:58 · 2184 阅读 · 0 评论 -
Request —— 让 Node.js http请求变得超简单
先前一直比较关注前端的东西，对后端了解较少。不过一直对Node.js比较感兴趣，去年12月还去参加了阿里的CNODE交流聚会。以后希望通过这里的博客分享一些学习Node.js的笔记。一方面总结了自己的学习心得，另一方面也可以和大家一起分享交流。嗯，大概就是这样子。这篇就先介绍一个Node.js的模块——request。有了这个模块，http请求变的超简单。使用超简单Request使用超简单，同时支持转载 2017-02-07 11:07:36 · 1092 阅读 · 0 评论 -
ES7 中使用 async/await 解决回调函数嵌套问题
JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题。以往在浏览器中，因为与服务器通讯是一种比较昂贵的操作，因此比较复杂的业务逻辑往往都放在服务器端，前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据。但是到了 webapp 风行的时代，前端业务逻辑越来越复杂，往往几个 AJAX 请求之间互有依赖，有些请求依赖前面请求的数据，有些请求需要并行进行。还有在类似 node.转载 2017-02-05 19:13:00 · 9539 阅读 · 1 评论 -
generator对象
1、generator对象Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator的中文翻译是生成器，它是ECMAScript6（代号harmory）中提供的新特性。在过去，封装一段运算逻辑的单元是函数。函数只存在“没有被调用”或者“被调用”的情况，不存在一个函数被执行之后还能暂停的情况，而Generator的出现让这种情况成为可能。2、generat转载 2017-02-05 18:19:31 · 870 阅读 · 0 评论 -
react生命周期
React 生命周期介绍一、理论 组件本质上是状态机，输入确定，输出一定确定 生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类：二、初始化阶段： getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,) getInitialState:获取每个实例的初始化状态（每个实例自己维护） compone转载 2016-11-10 14:03:57 · 421 阅读 · 0 评论 -
javascript source map 的使用
出处: http://www.cnblogs.com/Ray-liang/p/4018162.html 之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件，一直没有搞懂他是用来做什么的，直接删除掉运行时浏览器又会报错，后来google了一直才真正搞懂了这个小小的map文件背后的巨大意义。从源码转换讲起 JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和转载 2016-08-12 10:50:36 · 2669 阅读 · 0 评论 -
nodejs npm常用命令
npm是一个node包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。有了npm，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。1、npm install moduleNames：安装Node模块 安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块。node的安装分为全局模式和本地模式。 一般情况下会以本地模式运行，包会被转载 2016-08-22 18:07:14 · 473 阅读 · 0 评论 -
Sublime3玩转ES6+ReactJs
原文 (http://ued.fanxing.com/emmet/)前言Webpack+React+ES6无疑是目前最火热的开发模式了，为了与时俱进，开始对它进行探索和学习。工欲善其事必先利其器，众所周知，ES6和JSX都是新的语法，而目前的Sublime2已经力不从心了，作为Sublime的忠实粉丝，换IDE又得重新适应，于是折腾了一番，升级Sublime3，不断找相应插件，这里给大家分享一下必转载 2016-08-22 18:04:07 · 13826 阅读 · 0 评论 -
Sublime插件：Terminal
Sublime插件：Termina前言 这几天在window环境下用gulp构建前端工程，切来切去浪费了不少时间（右键sublime菜单打开文件所在目录，然后去项目根目录，右键打开cmder）。这点webstorm自带的Terminal真的有很方便的了。 现在有了它就和webstorm一样方便的了，ctrl+shift+T组合键搞定。地址 github.com wbond，熟悉不？写pack转载 2016-08-19 14:23:13 · 3656 阅读 · 0 评论 -
强烈推荐！教你测试手机网页的五大方法
原文地址：http://blog.teamtreehouse.com/how-to-test-a-mobile-website1、在真正的移动设备上测试在真正的设备上测试手机版网页总是最好的，毕竟模拟器的拟真程度始终是有限的，有些体验的细节无法完全模仿出来。用户体验包含的因素很多，网络的影响，像素密度带来的视觉效果，各种视觉元素的实际大小，网页的实际加载时间，等待都还是实际的设备来的真实。当然，彻底转载 2016-08-08 17:39:25 · 1881 阅读 · 0 评论 -
gulp详细入门教程
简介： gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、转载 2016-08-08 15:59:33 · 479 阅读 · 0 评论 -
推荐一些css reset
/*KISSY CSS Reset理念：清除和重置是紧密不可分的特色：1.适应中文 2.基于最新主流浏览器维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构转载 2016-08-15 16:19:24 · 656 阅读 · 0 评论 -
js动态dom节点对象和非动态dom节点对象
从这个例子可以看出document.getElementsbyClassName( )是一个动态的方法 而document.getElementsbyClassName( )[ i ],不是动态的（所有带getElements的dom方法都一样遵循这个道理）<!doctype html><html lang="en"><head> <meta charset="UTF-8">原创 2016-04-30 16:45:59 · 587 阅读 · 0 评论 -
javascript中构造函数的返回值问题和new对象的过程
首先明确一点：javascript中构造函数是不需要有返回值的，这一点跟java很类似。可以认为构造函数和普通函数的最大差别就是：构造函数中没有return语句，普通函数可以有return语句；构造函数中会使用this关键字定义成员变量和成员方法，普通的函数不会使用this关键字定义成员变量和方法。function Person(name,sex) { this.name = name转载 2016-04-29 22:29:11 · 698 阅读 · 0 评论 -
js面向对象特点
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>原创 2016-04-27 14:22:19 · 437 阅读 · 0 评论 -
js原生ajax实例详解
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>原创 2016-04-27 14:24:02 · 2052 阅读 · 0 评论 -
js跨域实例（利用百度搜索引擎模拟百度搜索）
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>原创 2016-04-27 14:29:06 · 3808 阅读 · 0 评论 -
js form表单发送数据两种方式（post get）区别
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'> <原创 2016-04-27 14:35:47 · 4394 阅读 · 1 评论 -
js正则常用的方法
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>原创 2016-04-27 14:37:44 · 481 阅读 · 0 评论 -
js使用正则写getClass
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'> <原创 2016-04-27 14:39:09 · 558 阅读 · 0 评论 -
js正则做表单验证实例
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>原创 2016-04-27 14:45:11 · 1349 阅读 · 0 评论 -
js正则关键字详解
<!DOCTYPE HTML><html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>原创 2016-04-27 14:46:33 · 2538 阅读 · 0 评论