会飞的Pikachu-CSDN博客

翻译 45个必备的JavaScript Web开发工具

JavaScript是一种灵活多变的脚本语言，它在全世界被广泛的应用在Web页面和服务器应用中。你可以因为任何目的去使用它，但是你需要一些工具。幸运的是，为了完成独特的任务，无以计数的JavaScript工具已经被开发者发布。这里有45个关于JavaScript的工具，所有这些工具将帮助您创建现代网站与用户所期望的所有特性。它们都提供了精简的设计和简单的接口。。。。AngularJS Google

2015-04-30 16:00:16 1883

翻译 Responsive Design常用的媒体查询

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2015-04-30 15:59:30 1071

翻译常见的10个JavaScript动画函数库

一、Snap.svgSVG是一种创建交互式动画非常棒的方式，独立的分辨率的矢量图形在任何大小的屏幕上看起来效果都很好。Snap.svg库使操作SVG变得更jQuery操作DOM一样简单。二、Motio一个基于动画和平移的简单但强大的JavaScript库三、animo.js堆栈动画，可以创建跨浏览器平台的模糊效果，在动画完成可以调用回调函数，创建更魔幻的动画。四、Move.jsMove.js是一个很小的函数库，能简单而优雅的支持CSS3. 五、favic

2015-04-28 12:25:25 1283

翻译 Impress.js制作酷炫Presentation PPT

可以先看一个demo：http://dwqs.github.io/resume昨天，我写了一些关于Impress.js的东西，对于创建在线的自我展示，这是一个非常不错的JavaScript库。由于是线上发布，所有有部分人问我怎么正确的使用它。因为没有在实际的项目页面设置帮助文档。这一篇文章将帮助你开始创建一个简单的幻灯片，但是之后你一定要完成它，可以用它来做很多酷炫的效果，唯一限制你的就是你的创造力。需求为了看到效果，请使用Google Chrome or Safari (or Firefox

2015-04-15 17:48:59 1776

原创 ajax学习笔记

一、js原生发送Ajax请求关于Ajax的简单介绍，可以戳此：DOM笔记（五）：JavaScript的常见事件和Ajax小结<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo</title> </head> <body> <button id="btn">ajax加载</button>

2015-04-15 17:45:37 1872

翻译 15个必须知道的chrome开发者技巧

在Web开发者中，Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能，使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能，如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享15个有助于改进你的开发流程的技巧。一、快速切换文件如果你使用过sublime text，那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能，当DevTools被打开的时候，按Ctrl+

2015-04-12 12:43:14 1306

翻译排序算法的JavaScript实现

排序算法的JavaScript实现

2015-04-07 09:05:29 898 4

原创响应式菜单制作

看看效果：PC端：QQ截图20150327215831移动端：QQ截图20150327215915一、HTML<div id="demo"> <span class="icon-menu" id="icon"></span> <ul class="nav"> <li>首页</li> <li>前端开发 <ul class="submenu">

2015-03-31 13:33:52 1234

原创 js：简单的拖动效果

效果演示：https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/html:<div class="wrap"> <div id="boxmove" style="left:150px;top:150px;"> movebox </div> </div>css#boxmove{ position: absolute; width: 200px; border:1px solid #ccc;

2015-03-31 13:28:19 916 3

原创 QQ和新浪微博登陆第三方的简单实现

一、微博登陆第三方0、去开发平台完成开发者认证：http://open.weibo.com/developers/basicinfo 创建一个示例应用，获取APPKey1、登陆有两种方式：js+html和WBML部署。以js+html为例，申请到APPKey之后，引入js,要替换掉appkey参数<script src=http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=3343891779 type="text/javascript" ch

2015-03-27 18:34:09 1522

原创一个js闭包问题的解答

在详解js闭包这篇文章中，最后留了一个问题，代码在下：<script type="text/javascript"> var name = "trigkit4"; 　　var segmentFault = { 　　　　name : "My SF", 　　　　getNameFunc : function(){ 　　　　　　return function(){ 　　　　　　　　return this.name; 　　　　　};

2015-03-24 12:48:13 842

原创 SASS小结

sass-logoSASS是Syntactically Awesome Stylesheete 的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门语言，这种特性也被称为“css预编译”。它的主要设计思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的css文件。sass并不是css的替代品，它只是让css变得更加高效、可维护，也不必去修改编译后的css文件。一、安装sasssass是基于ruby的产物，因此在安装sass前需要先安装r

2015-03-22 14:07:33 1225

原创全屏滚动实现：fullPage.js和fullPage

fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。一、fullPage.js实现全屏 fullPage.js是开源的JQuery插件库，其Github地址：https://github.com/alvarotrigo/fullPage.js 1、基本演示 1.1 引入文件<link rel="styl

2015-03-18 09:43:28 2362

原创 Linux的文件权限

linuxLinux一般将文件可存取访问的身份分为3个类别：owner、group、others，且3种身份各有read、write、execute等权限。一、用户和用户组 1、文件所有者由于Linux是多用户、多任务的操作系统，因此可能常常有多人同时在某台主机上工作，但每个人均可在主机上设置文件的权限，让其成为个人的“私密文件”，即个人所有者。因为设置了适当的文件权限，除本人（文件所有者）之外的用户无法查看文件内容。例如某个MM给你发了一封Email情书，你

2015-03-14 11:17:17 980

翻译 6个Python性能优化技巧

原文：6 Python Performance Tips译文：6个Python性能优化技巧译者：dwqsPython是一门非常酷的语言，因为很少的Python代码可以在短时间内做很多事情，并且，Python很容易就能支持多任务和多重处理。Python的批评者声称Python性能低效、执行缓慢，但实际上并非如此：尝试以下6个小技巧，可以加快Pytho应用程序。py 1、关键代码可以依赖于扩展包Python使许多编程任务变得简单，但是对于很关键的任务并不总是提供最好的性能。使

2015-03-12 13:47:43 836

原创 MarkDown语法

0Markdown 是一种轻量级标记语言，目标是实现「易读易写」。在CSDN极客头条、Segmentfault和coding.net上均支持Markdown语法。一、标题如<h1>~<h6>一样，Markdown支持六级标题，只需在文本前添加## 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题二、引用 Markdown 标记区块引用只需要在整个段落的第一行最前面加上 > ：> 这是markdown语法的引用

2015-03-11 11:27:03 1121

原创 PDO学习笔记

一、PDO简介 PDO是PHP Data Object的简称，用于定义数据库访问的抽象层，统一各种数据库的访问接口。PDO有如下特性：编码一致性：PDO支持多种数据库扩展，并为其提供统一的访问接口灵活性：PDO提供了统一的SQL操作方法和属性高效性：PDO是用C编写、PHP编译的面向对象：PDO完全采纳面向对象的思想 PDO支持的数据库：pdo支持的数据库但是，需要注意的是，PDO只是提供了一组数据库访问接口，利用PDO本身不能操作任何数据库

2015-03-09 07:56:52 1028

原创二次利用Canvas的绘图

对于Canvas绘图，可以使用toDataURL()方法保存绘出的图像，然后在提供给object元素二次使用。<p>Canvas绘图</p><canvas id="mycanvas" width="300" height="150"></canvas><p>还原绘图</p><object type="image/png" id="myimage"></object>js处理<script type="text/javascript"> var canvas = document.g

2015-03-08 10:57:27 1697

原创 JavaScript中的==和===

console.log('[] == []是：'+([] == [])); //falseconsole.log('[] === []是：'+([] === [])); //falseconsole.log('{} == {}是：'+({} == {})); //falseconsole.log('{} === {}是：'+({} === {})); //false //trueconsole.log( '[] == !{}是：'+([] == !{} )); /*!{}是个

2015-03-06 09:18:21 858 3

翻译 45种Javascript技巧大全

原文：45 Useful JavaScript Tips, Tricks and Best Practices译文：45个有用的JavaScript技巧，窍门和最佳实践译者：dwqs在这篇文章中，我将分享一些JavaScript常用的技巧，窍门和最佳实践。不管JavaScript开发者是使用在浏览器/引擎上或者服务器端（SSJS——Service Side JavaScript）JavaScript解释器上，这些他们都是应该知晓的。需要注意的是，文章中的代码片段均是在最新的Google Ch

2015-01-22 22:35:04 1268 3

原创《JavaScript语言精粹》笔记

0、JavaScript的简单数据类型包括数字、字符创、布尔值（true/false）、null和undefined值，其它值都是对象。1、JavaScript只有一个数字类型，它在内部被表示为64位的浮点数。没有分离出整数，所以1和1.0的值相同。2、NaN是一个数值，表示一个不能产生正常结果的运算结果。NaN不等于任何值，包括它本身。可以用函数isNaN(number)检测NaN,但是建议用isFinite()来检测某值是否是数字。 typeof NaN === ‘number’

2015-01-20 11:54:08 1197

原创网易面试总结(2014.12.31)

先po一张面试地点的图投简历到网易是很久之前的事了，在某一段时间内，一直关注投递反馈，一直没信息，原以为没戏了。但是惊喜总在意料之外降临的。收到面试通知后，还是认认真真的对待，虽然我对面试结果没有什么期望，但是，面试过程我还是很享受的。毕竟，以后又可以跟人家吹水了：我XXXX去面试过网易哦。一、面试前的准备 1、简历充分汲取上次的教训，提前两天开始准备简历。上次准备太仓促，结果到最后拿了黑白版的简历就去面试了，排版也是乱七八糟的，打印出来我都不忍直视了，但是没有时间去准

2015-01-12 10:51:01 1898

原创 DOM（十四）：代理检测和事件处理（跨浏览器）

一、检测用于用户代理检测，检测范围包括浏览器引擎、平台、Windows、移动设备和游戏系统等/**用户代理检测脚本，检测范围包括浏览器引擎、平台、Windows、移动设备和游戏系统*/var client = function(){ //呈现引擎 var engine = { ie:0, //ie gecko:0, //火狐 webkit:0, //chrome和safari k

2015-01-11 11:36:15 1469

翻译响应式设计三部曲

原文：Responsive Design in 3 Steps译文：响应式设计的三个步骤译者：dwqs现在，响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉，可以看看我之前发表过的关于这方面的responsive sites。对于新人，responsive design可能听起来有点复杂，但实际上，它比你想的要简单的多。为了帮助你快速入门响应式Web设计，我写了一篇快速入门教程。我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知

2015-01-04 09:54:55 1534

翻译 CSS：响应式下的折叠菜单(条纹式)

原文：CSS: Responsive Navigation Menu 译文：CSS：响应式导航菜单译者：dwqs写在之前，关于如何制作响应式的下拉菜单：响应式下的下拉菜单之前，我写了一篇关于怎么制作响应式的移动导航的教程。现在，我发现了一个新技巧，不用使用JavaScript就能实现响应式菜单，而是使用HTML 5清晰的语义标记。这个菜单能居左、居中和居右对齐，不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换。它也有一个标记显示激活/当前菜单项，并且它能作用在所有移动平

2014-12-31 13:03:23 3842

原创 DOM笔记（十三）：JavaScript的继承方式

在Java、C++、C#等OO语言中，都支持两种继承方式：接口继承和实现继承。接口继承制继承方法签名，实现继承则继承实际的方法和属性。在SCMAScript中，由于函数没有签名，所以无法实现接口继承，只支持实现继承。实现继承主要依靠原型链来实现。一、原型链原型链是利用原型让一个引用类型继承另一个引用类型的方法，在DOM笔记（十二）：又谈原型对象中，描述了构造函数、实例和原型之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而每个实例都包含一个指向原型对象的内部指针

2014-12-27 11:38:22 1321

原创 DOM笔记（十二）：又谈原型对象

因为之前谢过一篇关于原型对象的笔记：浅谈JavaScript中的原型模式。现在我又重新看到这个话题，对原型有了进一步的理解，所以，又要谈谈原型对象。一、理解原型对象创建的每一个函数都有一个prototype属性，它指向这个函数的原型对象。利用原型模式创建的方法和属性是被所有实例所共享的。function Person(){}Person.prototype.name="dwqs";Person.prototype.age=20;Person.prototype.sayName=functi

2014-12-26 10:11:45 1682

原创 DOM笔记（十一）：JavaScript对象的基本认识和创建

一、什么是对象？面向对象（Object-Oriented，OO）的语言有一个标志，那就是都有类的概念，例如C++、Java等；但是ECMAScript没有类的概念。ECMAScript-262把对象定义为：无序属性的集合，其属性可以包含基本值、对象或者函数。通俗一点的理解就是，ECMAScript中的对象就是一组数据和功能的集合，通过new操作符后跟要创建的对象类型的名称来创建。每个对象都基于一个引用类型创建。引用可以是原生类型（相关介绍：引用类型），或者开发人员自定义的类型。二、Object对象

2014-12-25 10:00:29 1282

翻译如何高效编写可维护代码？

原文：How to make your code self-documenting?译文：怎么让代码自我文档化？译者：dwqs在代码中找到一个放错地方并且没有用的注释是不是很有趣呢？怎么样才能做到写很少的注释但仍能让代码易于理解呢？一个主要的方式就是让代码自我文档化。当代码自我文档化的时候，就不需要注释去它的作用或者目的，并且也能使代码变得非常容易维护。在这篇文章中，我将提供一些让你的代码自我文档化的方式。下面就是三种使得代码自文档化的基本方法：命名：利用名字来解释变量、

2014-12-23 10:50:21 1063 1

原创 DOM笔记（十）：JavaScript正则表达式

一、RegExpECMAScript通过RegExp类型类支持正则表达式，语法和Perl类似：var exp = /pattern/flags;patternb部分是任何简单的或复杂的正则表达式；flags是每个正则表达式所带的一个或者多个标志。正则表达式的模式匹配支持三个标志：g：全局模式，即模式应用于整个字符串，而非在发现第一个匹配项时立即停止i：不区分大小写模式m：多行模式，即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项。1、创建正则表达式Java

2014-12-22 09:32:26 1735 2

原创也谈学习

我之前分享过一篇文章：给coder的十个读书建议。我不知道为什么要写这个？但肯定不是为了告诉我的读者怎么去学习，因为我还没这个资格。只是单纯的将遇到的现象和自己的想法记录下来，所以不喜勿碰。前段时间，我想到了一个项目。然后我就去问了我认为在技术方面比较不错的人（当然比较范围是在学院）。我想知道他对社区的了解有多少。当我问他知道哪些社区的时候，得到的回答思CSDN，然后就没有了。我又问他知不知道一些个人的技术博客，他说只是偶尔去CSDN上随便看一下别人的博客。满心欢喜的提问，换来了这样的回答，着实

2014-12-21 00:46:06 1342 2

原创 DOM笔记（九）：引用类型、基本包装类型和单体内置对象

一、Array 1 、创建数组的方式//Array构造函数(可以去掉new)var colors0 = new Array();var colors1 = new Array(20);var colors3 = new Array("red","blue","green");//数组字面量var colors4 = ["red","blue","green"];var colors5 = []; 可以根据元素的索引对数组元素进行访问，在数组末尾增加(或者删除)元素可以用colo

2014-12-19 11:43:09 1188

翻译响应式下的下拉菜单

原文：Convert a Menu to a Dropdown for Small Screens译文：转换菜单为下拉式来适应小屏幕译者：dwqsFive Simple Steps （ps：称FSS）网站有一个优雅的响应式设计的特点，当浏览器窗口的变小时，右上角的菜单从规则的一行转换成一个下拉菜单。（PS：原文写于2011年，FSS网站的设计已经改变，具体可以参考原文的截图。） HTML两种菜单的HTML代码是不同的，因为到目前为止，你不能把<select>和<option>的样式设

2014-12-17 17:47:58 1769 2

原创 DOM笔记（八）：JavaScript执行环境和垃圾收集

一、执行环境在有关于JavaScript对象或者this的指向问题时，脱离不了的另外一个概念就是执行环境，即上下文环境。执行环境在JavaScript是一个很重要的概念，因为它定义了变量或函数有权访问的其它数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，在该环境中定义的所有变量和函数都保存在这个对象中。全局环境时最外围的一个执行环境。在Web浏览器中，全局环境被认为是Window对象（后续笔记中会讨论），因此所有的全局变量和函数都是作为window对象的属性或者方法创建的

2014-12-16 15:07:12 1211

原创搜索和网页排名的数学原理

一、布尔代数和搜索引擎搜索引擎是每天都在使用的一种工具，它是一门非常复杂的技术，实现一个搜索引擎并非易事。但是，技术是分为术和道两种的，具体的做事方法是术，做事的原理和原则是道。不谈搜索引擎的术，但可以说说它的道。搜索引擎的原理相对于它在技术上的实现，就非常简单了。建立一个搜索引擎大致需要做这几件事：自动下载尽可能多的网页；建立快速有效的索引；根据相关性对网页进行公平准确的排序。1、布尔代数布尔代数起源于二进制。中国的阴阳学说是二进制的雏形，而二进制作为一个计数系统，是在公元前2-5世纪

2014-12-14 10:04:41 1587

原创 DOM笔记（七）：开发JQuery插件

在上一篇笔记本中，讲解了如何利用jQuery扩展全局函数和对象：DOM笔记（六）：怎么进行JQuery扩展？在这篇笔记本中，将开发一个简单的动画插件，名称是example-plugin，用其实现一个简单的功能：光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式。因为是jQuery对象的扩展，采用jQuery.fn.extend()进行扩展，插件名是dwqs,并且使用闭包：/**示例插件功能：*光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式*/

2014-12-13 13:30:47 1311

原创 DOM笔记（六）：怎么进行JQuery扩展？

一、全局函数的扩展全局函数是将独立的函数添加到JQuery的命名空间中区。在使用的时候，可以通过$.fucnName(param)或者jQuery.funcName(param)方式进行调用。1、直接在JQuery上添加：在jQuery上添加一个全局函数sayHellojQuery.sayHello=function(name){alert(name+"您好");}; 调用方式:jQuery.sayHello("张子涵"); //或者用$.sayHello("张子涵");

2014-12-12 13:28:26 1118

原创 DOM笔记（五）：JavaScript的常见事件和Ajax小结

一、常见事件类型 1、鼠标事件事件名称说明onclick 鼠标单击时触发ondbclick 鼠标双击时触发onmousedown 鼠标左键按下时触发onmouseup 鼠标释放时触发onmouseover 鼠标的光标移动到某对象上时触发onmousemove 鼠标移动时触发onmouseout 鼠标光标离开某对象时触发ps:当单击一次鼠标左键的时候，将同时触发onclick、onmousedown、onmouseup三个事件，事件处理程序执行的先后顺序为：onmousedo

2014-12-11 14:52:26 1284

原创 DOM笔记（四）：HTML 5 DOM复杂数据类型

HTML 5 DOM定义了一下集合、列表等复杂的数据类型用于实现便捷的操作。相对于HTML 4 DOM，HTML 5 DOM增加了HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、HTMLFormControlsCollection等。一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection 三个接口均用于表示一组元素组成的列表。HTMLAllCollecti

2014-12-11 08:21:27 1689

原创 DOM笔记（三）：Element接口和HTMLElement接口

一、Element接口 Element接口表示一个元素，该接口扩展自Node接口，自然继承了Node接口的属性和方法，也有一套针对元素的属性和方法。 Element接口常见的属性比较少，常用的就是一个只读的tagName属性，该属性返回元素名，数据类型是DOMString。 Element接口定义的方法也主要是针对属性操作，常见方法如下：方法名数据类型说明getAttribute DOMString 返回对应属性getAttributeNode Attr 返回对

2014-12-10 08:24:35 3433