分类目录归档：全部列表

2014
11-11

类似github,houzz使用ajax和HTML5无刷新改变页面URL

表现如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢？HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。与传统的AJAX的区别传统的ajax有如下的问题：1、可以无刷新改变页面... 继续阅读 >

2014
11-11

深入学习HTML5的history API

不得不佩服下谷歌Chrome团队，利用HTML5和CSS3实现了一本相当漂亮的在线电子书：《关于浏览器和互联网20件事》。访问地址：http://www.20thingsilearned.com话说这本电子书已经出来很久了，不过今天来看依然觉得相当的赞。我们无需刷新页面，就可以来回切换电子书页面，这正是OPOA（OnePageOneApplication）的完美体现。现在正在学习关于historyAPI这方面的东西，所以特别感兴趣的是他们如何使用window.history.pushState()... 继续阅读 >

2014
11-11

pjax：ajax和pushState结合的js库——实现网站无刷新加载页面

上篇文章讲到如何使用ajax+pushState打造无刷新改变URL的方式。虽然这种方式是将ajax、history.pushState、history.replaceStatte、window.onpopstate等几个技术点结合，但在具体使用中还是要考虑到很多情况的，如：1、改变内容的时候也要改变title2、不支持的浏览器如何处理3、事件如何绑定，是否使用了delegate模式4、ajax异常处理5、ajax前后的自定义事件等介于有上面等多的疑问，将ajax和pushState封装下，供后面使用还... 继续阅读 >

2014
11-11

Pjax是什么以及为什么推荐大家用

什么是pjax?现在很多网站(facebook, twitter)都支持这样的一种浏览方式，当你点击一个站内的链接的时候，不是做页面跳转，而是只是站内页面刷新。这样的用户体验，比起整个页面都闪一下来说，好很多。其中有一个很重要的组成部分，这些网站的ajax刷新是支持浏览器历史的，刷新页面的同时，浏览器地址栏位上面的地址也是会更改，用浏览器的回退功能也能够回退到上一个页面。那么如果我们想要实现这样的功能，我... 继续阅读 >

2014
11-11

HTMl5的sessionStorage和localStorage详解与使用

html5中的WebStorage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。webstorage和cookie的区别WebStorage的概念和cookie相... 继续阅读 >

2014
11-11

以一行JS代码将PC网站移动化，想成为PaaS的“云适配”试图以简化方式做跨屏适配

想要让用户在移动端也能浏览PC网站，通常有两种方法，一是另起炉灶，重新按照移动端的设计规则建一个移动网站，这样建成的网站将和原PC站相互独立，比如新浪网/www.sina.com.cn 和手机新浪网/3g.sina.com.cn的区别。另一种方案则是响应式设计，在建PC站前即考虑好页面布局如何能适应多屏幕浏览，这样移动设备可以通过原网址来浏览PC站点，比如在移动端输入www.36kr.com，都可以看到自适应屏幕大小后的36氪网站。... 继续阅读 >

2014
11-11

javascript将字符串按指定的字符分割成数组的函数split

作用：split() 方法用于把一个字符串分割成字符串数组。语法：stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。返回值：一个字符串数组。该数组是通过在... 继续阅读 >

2014
11-11

jQuery+JSONP通过调用虾米接口实现类似点点网发布音乐的功能

点点网的音乐发布是通过搜索、选择实现的，原本以为是他们自己做的一个类似爬虫的东西去模拟虾米网的搜索功能，然后将搜索的结果返回到点点的界面，包括id、name、ablum、artist等，然后去调用显示相关的widget实现音乐的播放，但后来研究了下，发现其实际上是调用了这个接口：http://kuang.xiami.com/app/nineteen/search/key/歌曲名称/diandian/1/page/歌曲当前页?_=当前毫秒&callback=getXiamiData通过这个接口返回所需的所有... 继续阅读 >

2014
11-11

jQuery+JSON+jPlayer实现QQ空间音乐查询

查询QQ音乐是很早前就出来的一个接口。这里使用jQuery和jPlayer来实现QQ空间音乐的查询。我们要使用的接口位于bejson接口页面中的音乐接口栏里。QQ音乐接口地址:http://qzone-music.qq.com/fcg-bin/fcg_music_fav_getinfo.fcg?dirinfo=0&dirid=1&uin=QQ号&p=0.519638272547262&g_tk=1284234856这里给出核心代码:1.gtk参数的获取方式functiongetGTK(){varstr="@HR3etVm80";varhash=5381;f... 继续阅读 >

2014
11-11

javascript字符串操作函数大全

concat()–将两个或多个字符的文本组合起来，返回一个新的字符串。indexOf()–返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回-1。charAt()–返回指定位置的字符。lastIndexOf()–返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回-1。match()–检查一个字符串是否匹配一个正则表达式。substring()–返回字符串的一个子串。传入参数是起始位置和结束位置。replace()–用来查找... 继续阅读 >

2014
11-11

什么是JSONP，JSON和JSONP的联系和区别详解

说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而... 继续阅读 >

2014
11-11

浏览器的渲染原理简介

看到这个标题大家一定会想到这篇神文《HowBrowsersWork》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，1）这篇文章太长了，阅读成本太大，不能一口气读完。2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。浏览器工... 继续阅读 >

2014
11-11

Javascript 装载和执行

一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛，发现有不少的人对Javascript的执行和装载的基础并不懂，所以，从那天起我就想写一篇文章，但一直耽搁了。自上篇《浏览器渲染原理简介》，正好也可以承前启后。首先，我想说一下Javascript的装载和执行。通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。于是，如果有多个js文件... 继续阅读 >

2014
11-11

如何在浏览器端加密——使用Javascript加密解密

在创建Opal网站时，我们所面临的挑战，是寻找在浏览器中加密解密的可靠方法。这篇文章描述了浏览器端加密所面临的难题，并指出了近期的科技进步所提供的一种解决方案。在Web应用中加密的三种选择只有JavaScript才是所有浏览器都支持的语言。与Opal同类的Web应用使用JavaScript编写，以便于在任何现代浏览器上运作。如果这些应用要使用加密函数，那么JavaScript必须能够访问到它们。目前，要把加密函数暴露给浏览... 继续阅读 >

2014
11-11

Flash图片上传插件——CFUpdate文件批量上传组件

搞开发的同学都知道，网上可搜到的可用的Flash图片上传的组件少之又少，可定制界面，不需要安装组件，且可免费用于任何商业系统的，更是凤毛麟角，如果你和我一样，迫切需要一款这样的一款组件的话，不妨试试CFUpdate吧。以下是我修改的一个Demo效果，你也可以猛击此处查看在线Demo。CFUpdate可选择多个图片上传，显示上传速度、进度条、文件名称等，可拖动排序文件顺序，CFUpdate使用的是HTTP协议，所以客户端，服务端都不需要... 继续阅读 >

2014
11-11

Flash仿新浪微博头像上传插件破解加强版

如题，仿新浪微博头像上传插件，并在此基础上增加了放大/缩小功能及图片调整功能，感谢zhushunqing为我们提供的flash源文件。Git地址：https://github.com/zhushunqing/FaustCplus演示Demo地址: http://flashman.com.cn/Flash/FaustCplus/common/下载地址：百度网盘下载FLA源文件请用AdobeFlashCS5或以上版本打开。修改头像规格及大小的方法，找到main.as中的Param.pSize=this.parameter["pSize"]?(this.parameter["... 继续阅读 >

2014
11-11

给JavaScript初学者的23条最佳实践

1.使用===代替==JavaScript使用2种不同的等值运算符：===|!==和==|!=，在比较操作中使用前者是最佳实践。“如果两边的操作数具有相同的类型和值，===返回true，!==返回false。”——《JavaScript：语言精粹》然而，当使用==和！=时，你可能会遇到类型不同的情况，这种情况下，操作数的类型会被强制转换成一样的再做比较，这可能不是你想要的结果。2.Eval=邪恶起初不太熟悉时，“eval”让我们能够访问JavaScript的编译器... 继续阅读 >

2014
11-11

编写更好的jQuery代码的建议

讨论jQuery和javascript性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。首先，在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。首先，如果你是一个javascript新手，我建议您阅读《JavaScript初学者的最佳实践》，这是一篇高质量的javascr... 继续阅读 >

2014
11-11

如何利用 Bootstrap 进行快速 Web开发

入门下载已编译的Bootstrap数据包（可以去这里下载）。我在本文中使用的是V2.3.2。下载内容包括Bootstrap的关键元素CSS，以及一些有用的图像和JavaScript文件。您可以根据我在文中的描述为Web页面提供HTML。Bootstrap文档中不包含框架支持的许多设计选项的样例HTML。但是Bootstrap文档页面（尽管其本身已说明了Bootstrap的灵活性）还不足以解释真正起作用的基本设计原则。响应式Web设计查看Web页面的设备... 继续阅读 >

2014
11-11

jquery实现div层随页面滚动而滚动（固定在某一位置）

翻看ipc.me时觉得右侧的slider会随着页面下翻而始终浮动在窗口边沿下，体验很不错，在张鑫旭的博客中一篇文章的借鉴下，成功实现这样一个功能，代码如下（基于jquery实现，所以事先要在页面中导入jquery文件）：<scripttype="text/javascript">$.fn.smartFloat=function(){varposition=function(element){vartop=element.position().top,pos=element.css("position");$(window).scroll(functio... 继续阅读 >

2014
11-11

jquery.min.map 404 (Not Found)出错的原因及解决办法

Chrome更新后出现了jquery.min.map404 (NotFound)的信息这个到底是什么东西？查询了一下，得到了以下资料JQuery官方解释摘录一下內容从jQuery1.9.0版本后在原始代码里会有 @sourceMappingURL=jquery.min.map什么是Sourcemap简单说，Sourcemap就是一个信息文件，里面存储着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码... 继续阅读 >

2014
11-11

你所未必知道的关于<!DOCTYPE>标签的细节

<!DOCTYPE>标签很简单，你或许会不在意。但是你有没有仔细了解过<!DOCTYPE>标签？W3cschool上建议使用XHTMLTransitionalDTD，很多人就很听话地把Dreamweaver的HTML文档类型默认设置为XHTML1.0Transitional。之后就理所当然地一直用到现在了。人这东西还真是，越长大就越懒了，很多东西都被潜意识地当成了理所当然。<!DOCTYPE>的定义<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用... 继续阅读 >

2014
11-11

Web应用开发中的几个问题——使用javascript开发需知

开篇概述Ajax技术在Gmail中的成功应用，和高性能的V8引擎的推出，使得编写Web应用变得流行起来，使用前端技术也可以编写具有复杂交互的应用。相对于原生应用，Web应用具有如下优点：跨平台，开发和维护成本低；升级和发布方便，没有版本的概念，随时随地发布，用户没有感知，不需要安装；响应式设计(ResponsiveDesign)使得Web应用可以跨平台，同一份代码自适应各种屏幕大小即使最终不采用Web应用方案，也很适合开发原型... 继续阅读 >

2014
11-11

超棒的 15 款 Bootstrap UI 编辑器

自从2011年MarkOtto和JacobThornton开发了 BootStrap，我们第一次接触并熟知了Bootstrap。这些都归功于Twitter！从那以后，它就非常流行并且成为了最好的响应式框架之一。Bootstrap帮助开发者快速高效的开启大量新的web项目，受到了广大开发者们的青睐。为了照顾那些不是很熟悉Bootstrap但是又想继续深入了解的开发者，我们在这里简单的介绍一下。Bootstrap是一个pre-styled组件的扩展库，有着大量的附件和非... 继续阅读 >