分类目录归档：全部列表

2014
11-11

正则表达式在JavaScript应用

--------------------------------------------------------------去掉字符串头尾多余的空格/g是全文查找所有匹配functionString.prototype.Trim(){returnthis.replace(/(^\s*)|(\s*$)/g,"");}functionString.prototype.LTrim(){returnthis.replace(/(^\s*)/g,"");}functionString.prototype.RTrim(){returnthis.replace(/(\s*$)/g,"");}--------------------------------------------------------------应用：计... 继续阅读 >
2014
11-11

用正则表达式和javascript对表单进行全面验证

使用时请将下面的javascript代码存到一个单一的js文件中。1、表单要求<formname="formname"onSubmit="returnvalidateForm(this)"></form>将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。2、空值验证表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证\一般验证方式同时使用）。无此属性视为此域允许空值。如：<inputtype="text"name="fiel... 继续阅读 >
2014
11-11

jQuery中使用trigger触发click事件失效的解决办法

今天在处理jquery根据cookie是否存在而使用trigger触发元素的click事件的时候遇到这个问题，各种调试都没能找出引起问题的原因所在，后来在stackoverflow中搜索到相关问题，并用其所提到的原因解决了这个问题。整理英文原版如下：question：I'mfiguringoutwhythissimplescriptisnotworking:jQuery.noConflict();jQuery(document).ready(function(){jQuery('.next_buttona').trigger('click');});noConflict&nb... 继续阅读 >
2014
11-11

png、jpg、gif三种图片格式的区别

为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如... 继续阅读 >
2014
11-11

a标签触发onclick事件而不跳转

在web页面开发时，我们经常会遇到下列情况：1.一个标签仅仅是要触发onclick行为；2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。比如执行删除操作时，为了避免误操作，我们要弹出对话框让用户确定是否删除。因此我们经常会用链接<a></a>形式代替<button>触发onclick事件。代码如下：<scripttype="text/javascript">functiondel(){if(confirm("确定删除该记录？")){parent.window.location="执行删除... 继续阅读 >
2014
11-11

浅析jQuery删除节点的三个方法

jQuery提供了三种删除节点的方法，即remove()，detach()和empty()。测试所用HTML代码：<ptitle="选择你最喜欢的水果？">你最喜欢的水果是？</p><ul><lititle="苹果">苹果</li><lititle="橘子">橘子</li><lititle="菠萝">菠萝</li></ul>1、remove()方法$("ulli").click(function(){alert($(this).html());});var$li=$("ulli:eq(1)").remove();$li.appendTo("ul");当某个节点用remove()方法删除后，该节点所包含的所... 继续阅读 >
2014
11-11

jQuery如何阻止事件冒泡

条件：外层有一个DIV元素，在内层有一个P元素，存在这样的关系:DIV是P元素的父元素，而P是外层DIV的子元素，他们之间存在包含和被包含的关系。事件：现在我们都在这两个元素上绑定相同的事件，比如click事件。结果：这时，当我们点击内层的P标签的时候，内层元素的click事件触发，同时外层DIV的click事件也会触发。JQuery提供了三种方式来阻止事件冒泡。方式一：event.stopPropagation();方式二：event.preventDefault();方... 继续阅读 >
2014
11-11

关于Cookie中的path、domain、expire、secure属性详述

Path–路径指定与cookie关联的WEB页。值可以是一个目录，或者是一个路径。如果http://www.china.com/test/index.html建立了一个cookie，那么在http://www.china.com/test/目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。这就是说，在http://www.china.com/test/test2/test3里的任何页面都可以访问http://www.china.com/test/index.html建立的cookie。但是，如果http://www.china.com/test/需... 继续阅读 >
2014
11-11

关于图片上加浮动标签a的问题

代码如下：HTMLcode：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="textml;charset=utf-8"/><title>无标题文档</title><styletype="text/css">.box{width:500px;height:300px;border:5pxsolid#00F;position:relative;}.left,.right{displa... 继续阅读 >
2014
11-11

JavaScript 位运算符

JavaScript在日常的应用中非常的少，其实当年在大学学习C#的时候，位运算符也不是重点，而且后来考试的时候根本就没有考这章，但是对于对数字感兴趣的我，当时听的特认真，以至于虽然从来都没再看过，印象还是非常的深刻，前几天在用的时候进入了个误区，所以这里还是记录一下，巩固一下哈~JavaScript的位运算符一共有7个，分别是&、|、^、~、<<、>>、>>>（C#没有这个运算符，但是C#可以通过>>的逻辑右移来实现此运算），位运算... 继续阅读 >
2014
11-11

xpath路径表达式笔记

简单说，xpath就是选择XML文件中节点的方法。所谓节点（node），就是XML文件的最小构成单位，一共分成7种。-element（元素节点）-attribute（属性节点）-text（文本节点）-namespace（名称空间节点）-processing-instruction（处理命令节点）-comment（注释节点）-root（根节点）xpath可以用来选择这7种节点。不过，下面的笔记只涉及最常用的第一种element（元素节点），因此可以将下文中的节点和元素视... 继续阅读 >
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文件... 继续阅读 >