摘要：JS中的跨域是受到限制的，但是跨域有时候又是必须的，藉此，各种高手牛人想尽办法使得JS能够跨域获取数据，有的方法真的很巧妙在此记录一下常用的三种跨域方法，如下：一、不同子域名之间的(a.example.com|b.example.com)的跨域访问。 这种跨域调用比较常见，比如a.example.com 下的 a.htm 页面，需要调用 b.example.com 下的 b.htm页面里面的getData函数， 首先需要在a.htm页面中用iframe 框架把b.htm页面引用进来<iframe id="b" src="http://b.example.co 阅读全文
jQuery源码中的chunker 正则过滤符分析
2012-07-31 16:50 by VVG, 1905 阅读, 4 推荐, 收藏, 编辑
摘要：var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,这是Jq中最长的一个正则了，也研究了很久，一直很懵懂，感觉还是通过调试，然后一步一步的分析值理解起来比较容易，我尝试做成图形比较直观一点，以不同的颜色区分了一下，如下图：分组一是通过以下代码逐一拆分成一个数组的： // 此处 阅读全文
系统总结了一下CSS布局方面的知识
2012-07-21 21:44 by VVG, 1870 阅读, 4 推荐, 收藏, 编辑
摘要：一、两栏布局（左边固定宽度，右边自动适应）方法1、左浮动其中一个DIV，使其脱离文档流，另一个DIV不设置浮动即可。注意：DIV的顺序不能改变PS：设置浮动可以让元素脱离正常的文档流，使后面的元素占据浮动元素本身的位置。但是浮动元素只能影响后面的元素的位置，而不能够影响前面的元素，也不能叠加在前面的元素上。（view类样式只是为了层便于识别）；.view{ height: 200px; background: #ccc;}#id1{float: left; width: 200px;}#id2{background: #666; } 侧边栏(float: left; width: 200... 阅读全文
javascript 打造城市选择控件，兼容IE6以及以上，谷歌，Firefox
2012-07-13 22:18 by VVG, 9980 阅读, 27 推荐, 收藏, 编辑
摘要：在淘宝旅行上看到的城市选择效果，感觉还不错，就自己的理解重新实现一遍，先看效果，然后再细说实现原理，支持鼠标上下键选择城市，支持直接输入城市名称，拼音首字母，全拼，支持IE6遮盖SELECT，压缩后12K，Demo如下：修正1：IE9的BUG我查了有点莫名其妙，但是去掉.cityBox这个CSS里面的box-shadow: 2px 2px 3px rgba(0,0,0,0.3);这段CSS，就可以了。最新的修改过的JS，在底部贴出来了，下载的那个没有更新，如果要用请直接在下面复制代码！Demo出发城市： 到达城市： 我实现的步骤：一、先用一定的格式罗列出控件所需要的城市以及拼音等，我这里是按照 阅读全文
js简单仿苹果菜单图片效果
2012-07-05 23:04 by VVG, 713 阅读, 0 推荐, 收藏, 编辑
摘要：DEMO演示：点我点我点我思路：通过计算鼠标与图片的位置来设定图片的大小<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>仿苹果菜单</title> <style type="text/css"> #menu li{float:left; list-style: none; margin-left: 5px;} #menu{ display: inline-block;} body{ text-align: 阅读全文
Firebug控制台详解[转]
2012-07-04 21:41 by VVG, 390 阅读, 0 推荐, 收藏, 编辑
摘要：Firebug是网页开发的利器，能够极大地提升工作效率。但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。===================================Firebug控制台详解作者：阮一峰控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。一、显示信息的命令Firebug内置一个console对象，提供5种方法，用来显示信息。最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中 阅读全文
网站前端性能优化总结【转】
2012-06-29 11:36 by VVG, 600 阅读, 0 推荐, 收藏, 编辑
摘要：一、服务器侧优化 1.添加Expires或Cache-Control信息头 某些经常使用到、并且不会经常做改动的图片（banner、logo等等）、静态文件（登录首页、说明文档等）可以设置较长的有效期（expiration date），这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存，文档就可以从缓存（除已经过期）而不是从服务器读取。接着，客户端考察缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。 各个容器都有针对的方案,，以Apache为例：ExpiresActive OnExpiresByType image/gif"access plus 1 w 阅读全文
Javascript Lazyload延迟加载特效
2012-06-25 17:25 by VVG, 5846 阅读, 8 推荐, 收藏, 编辑
摘要：Javascript Lazyload延迟加载特效,有效降低HTPP连接次数，提高首屏加载时间1、增加了图片预加载可选2、修改了图片本身就在可视范围的时候直接显示而不需要滚动条触发3、修改了Splice删除数组的时候，会跳过下一张图片BUG4、浏览器窗口resize的时候图片出现也会加载5、判断图片父层包裹顶部或者底部出现在可视范围内即可显示图片源代码在底部，效果如下：延时加载 主要代码如下：var Lazy = { $:function(arg,context){ var tagAll,n,eles=[],i,sub = arg.substring(1)... 阅读全文
JS制作简单的日历控件【JS Date对象操作实例演示】
2012-06-24 22:36 by VVG, 18968 阅读, 7 推荐, 收藏, 编辑
摘要：JS制作简单的日历控件【JS Date对象操作实例】一直对JS 中的Date 对象不是很熟练，缺乏操作实践，端午节抽空复习了一下，做了一个简单的日期选择控件日历外观参考了淘宝旅行中的日期控件，控件只有基本功能，木有做节日显示：2012年7月14日 增加了IE6的selectBUG，遮挡问题，修改了两个日历能够同时出现的问题。使用方法：只需传入日期INPUT元素的ID即可，isSelect选项为是否为SELECT下拉选择年月设置var myDate1 = new Calender({id:'j_Date1'});var myDate2 = new Calender({id: 阅读全文
Javascript 拼图游戏,可以自定义图片拼图,可以设置无限关卡，拼图成功后含动画效果
2012-06-01 23:45 by VVG, 5594 阅读, 4 推荐, 收藏, 编辑
摘要：基本就是拖拽功能的应用，其它鼠标事件绑定，距离的计算，动画等，也有很多细节问题，需要亲自做了才知道，支持IE系列，FIREFOX，chrome浏览器,IE6下可能有点卡。过关卡的时候需要下载下一张图片，如果网速慢则会暂时停止一下，稍等一会就可以接着下一关。玩到最后一关就可以自定义图片拼图了,只需要输入图片的地址就可以了!如果需要直接自定义图片，则用谷歌浏览器或者FIREBUG把隐藏的Id 为imgDiy 的层显示出来就可以了.DEMO演示：点击试玩源代码下载：点击下载IFREAME演示:就不解释了，我源代码里面的注释写得很清楚，有兴趣的可以看一下源代码，如下：<!DOCTYPE html 阅读全文