分类目录归档：前端
用JavaScript操作important样式
一般用JavaScript来控制元素样式的代码如下： document.getElementById("someDom").style.color="#f00"; 但对于已经设置了“important”属性样式的元素，这一句就起不了作用了，就必须用到另一个属性：cssText，代码如下： document.getElementById("someDom").style.cssText="color:#f00 !important"; // 用jQuery更方便 $("#someDom").css("cssText","color:#f00 !important"); 但cssText也有个缺点，它会覆盖掉以前的inline样式，可以用累加的方式得以保留原有样式。代码如下： var elem = document.getElementById("someDom"); elem.style.cssText +=";color:#f00 !important"; 注意上面的累加语句等号右侧的“;”千万不能少，因为IE的cssText属性会默认去掉最后一个“;”，所以如果累加的话一定要重新加上。
JS只允许数字输入
假设有个ID值为“i_text”的text控件，为其设置只允许数字输入的代码： document.getElementById("i_text").onkeypress = function(e){ var e = e || window.event, //获得事件 k = e.which || e.keyCode; // 获得 keyCode 值 /** * 8 为退格健 * 0 为上、下、左、右方向健 * 48 为 0 健，57 为 9 健 * 48 到57 健分别是0,1,2,3,4,5,6,7,8,9 * … 继续阅读
window.location的用法
参考地址：window.location 工作中经常要对window.location进行相关的操作，在这里列出它的属性和方法，方便查找。现以链接http://julabs.me:8080/blog/front/javascript-window-location.html?author=julabs#comment为例来讲解window.location的属性： 属性 详解 例样 hash URL中在“#”号后面的部分，包括“#”在内 #comment host 主机名和端口号 julabs.me:8080 hostname 主机名，不包括端口号 julabs.me href 整个URL地址 http://julabs.me:8080/blog/front/javascript-window-location.html?author=julabs#comment pathname 相对于主机名和端口号的路径 /blog/front/javascript-window-location.html port 地址的端口号 8080 protocol 地址的协议 http:// search URL中在“?”号后面的部分，包括“?”在内 ?author=julabs 下表列出的是window.location的方法： 方法 详解 assign(url) 根据参数url所提供的地址来载入相应的页面 reload(forceget) 重载当前的页面，参数forceget是个boolean类型的值。当forceget为true时，页面会请求从服务器载入，如果为false则直接从缓存载入，默认为false replace(url) 将当前页面替换成参数url所对应的页面。与assign()方法的差别就在于，replace()方法不会将前一个页面地址保存在历史记录中，所以也就不能通过返回按钮回到前一个地址页面 toString() 返回Location所对应的URL值，相当于window.location.href
正则表达式验证身份证
下面是一个简单的正则表达式验证身份证函数： function isIdCardNo(arg){ return /(^\d{15}$)|(^\d{17}(?:\d|x|X)$)/.test(arg); } 当然这个函数非常简单，不过能用就可以了。
用CSS3实现惊艳的图片过渡效果
《Amazing Image Hover Effects with Webkit and CSS 3》这篇教程所展示的惊艳效果完全由CSS 3实现的，当然一定要是在基于以Webkit为核心的浏览器里，演示请看这里：查看演示。 演示里面展示了滑动、缩放、改变透明度共6种效果，以前这些效果必须是由JavaScript或者Flash来实现，现在完全用CSS 3和Webkit就可以轻松实现了。相信通过查看这些演示，能够让人认识和体会到CSS 3的强大。
网站favicon.ico显示不了的原因
现在人们都喜欢在自己的网站上放上自己的favicon.ico，不仅可以标识网站的身份，自己看着也赏心悦目。但有很多原因会导致favicon.ico显示不出来，我总结了下，有以下几个原因： 图标的链接地址或者HTML代码出错了 这是个低级错误，但也不是不可能发生的，首先要看看图标的链接地址和HTML代码对不对。一般如果直接把favicon.ico图标放在网站的根目录下，页面是可以自动寻址到这个图标文件的。正确的代码如下： <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /> 火狐还支持GIF动画格式的图标，代码如下： <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /> <link rel=”shortcut icon” href=”favicon.gif” type=”image/gif” /> 没有清空缓存 要清空浏览器的缓存，在IE中不仅要清空Internet临时文件，也要把历史记录清空。对于360、搜狗、傲游这些浏览器清空缓存会稍微麻烦点，它们会将favicon.ico存储在自己特定的文件夹里，以加快页面的访问速度。 360浏览器 要进入自己的Application Data中寻找360浏览器的数据，比如我的用户名为Jon。如果用的是XP，那么就找到C:\Documents and Settings\Jon\Application Data\360se\data\ico文件夹；如果是Win7，那么就找到C:\Users\Jon\AppData\Roaming\360se\data\ico文件夹。这里是360浏览器缓存网站favicon.ico的地方，把ico文件夹清空。 搜狗浏览器 同样也要找Application Data，比如我的用户名为Jon。如果用的是XP，那么就找到C:\Documents and Settings\Jon\Application Data\SogouExplorer\FavIcon文件夹；如果是Win7，那么就找到C:\Users\Jon\AppData\Roaming\SogouExplorer\FavIcon文件夹。这里是搜狗浏览器缓存网站favicon.ico的地方，把FavIcon文件夹清空。 傲游浏览器 我使用的是傲游浏览器2，把它安装到了D:\Maxthon2目录下，那么在这个目录下找到名为Favicons的文件夹，这里是傲游浏览器缓存网站favicon.ico的地方，把Favicons文件夹清空。 favicon.ico格式不对 最好使用专业的Icon制作软件，可以在《免费的图标制作工具》一文中找一些使用。要想知道自己的图标文件格式是否正确，可以先下载其它网站的Icon来对比下。比如可以下载Google的favicon.ico文件，地址为：http://www.google.com/favicon.ico。把自己的favicon.ico和Google的favicon.ico放在一起，开启文件浏览的缩略图模式。看下面的图片，可以正确显示的就是正确格式，不能显示的就是错误格式。在下图中favicon-1.ico、favicon-2.ico都能正确显示，是正确的格式，而favicon-3.ico的格式错误，显示不正确。 … 继续阅读
用document.referrer找到当前流量的来源页面
在前端开发中可以使用document.referrer来获得前流量的来源参考页，也就是说可以用这个来获得是从哪个页面跳到本页面的。另外如果是在同一个域名下也可以使用windoww.opener对象去获取源页面的地址，如下面代码： var referrer = window.opener.location.href; Document.Referrer由于各种原因可能会丢失，相关的原因和解决办法可以参考《Document.Referrer丢失的几个原因》一文。
表格排序代码
这里的代码是根据《JavaScript高级程序设计》第12章里面的示例重新整合的，关于Array的sort的用法可以看下《JavaScript高级程序设计》第12章，也可以看下《JavaScript sort()方法》。 下面是详细代码和注释： /** * 表格排序 */ var sortTable = { /** * 转换函数 * 可以将 String 类型的变量转成 Int,Float,Date 的格式 * @param {String} v 原来的值 * @param {String} tp 值类型 int,float,date,默认为 string */ convert:function(v,tp){ switch(tp){ case ‘int’: return parseInt(v); case … 继续阅读
在非IE中实现mouseenter和mouseleave和的功能
IE下的mouseenter和mouseleave方法的好处我就不多说了，关于compareDocumentPosition方法的详细解释请参考《跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition》，在这里我只给出在非IE中实现这两种功能的简易方法。 下面是模拟IE下的mouseenter和mouseleave功能代码，里面也加上了详细的注释。 /** * 只在非IE中使用 * 模拟 IE 中 mouseenter 和 mouseleave 的效果 * @param {Event} e 发生的事件 * @param {Function} fun 触发的行为 */ var hover = function(e,fun){ /** * 因为这个函数只在非IE的浏览器中使用 * 所以可以使用 e.relatedTarget * 来获得与事件的目标节点相关的节点 … 继续阅读
CSS渲染开销真地非常大
《高性能网站建设进阶指南》中说处理CSS是最大的开销，我起先认为有点言过其实，最近才发现真是真理。 近期做的一个页面，要显示近200多行数据，每行数据里面有11个单元格，而每行的最后两个单元格中还嵌套有表格。这个页面突然最近两天变地非常慢，而且在IE6下尤为明显。刚开始以为是JavaScript的问题，就一直在这方面做优化。为了让页面看起来快点，我甚至用了分时分段创建DOM的做法，但情况仍然没有明显地好转。后来才发现其实创建DOM的过程是非常快的，而慢就慢在了渲染上面。我把CSS文件移除后页面变地非常快，最终在CSS文件中一句句地排查，终于找到了罪魁祸首：背景图片（background-image）。 原来设计要为每个单元格增加一个1像素的边框，并且每个单元格有固定的宽度，而加了一个边框的单元格在不同的浏览器下面它们最终的宽度就不一样。为了兼容我去掉了边框，改用了设置一像素平铺背景来模拟边框。表格有200多行，每行连子表格共有17个单元格，合在一起有3,4000个单元格，每个单元格都有平铺的小背景，不慢才怪！ 这件事给我的教训很大，以前对CSS的认识不足，只关注JavaScript，现在要重新认识CSS了。 《高性能网站建设进阶指南》中给出了几条编写高效CSS选择符的要点： 避免使用通配符：除了传统意义上的通配选择符外，Hyatt把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到了“通配符”分类下，他仅推荐使用ID、类、和标签选择符。 不要限定ID选择符；对于div#idsel这样的选择符，应该改成#idsel，因为在页面里一个指定的ID只能对应一个元素，没有必要再添加其它限定符。 不要限定类选择符：不要用具体的限定类选择符，如li.mystyle，改成.list-mystyle会更好些 让规则越具体越好：如ul li a这样的，最好是创建一个像.list-link这样的类。 避免使用后代选择符：通常使用后代选择符的开销是最高的，在有条件的情况下可以用子选择符代替。这一条对IE6无用，IE6不支持子选择符。 避免使用标签和子选择符：如果有像#myid > li > a这样的选择符，可以改成一个类，如.myid-link。 质疑子选择符的所有用途：再次提醒检查所有使用子选择符的地方，然后尽可能用具体的类取代它。 依靠继承：了解哪些属性可能通过继承来获取，避免对这些属性重复指定规则，可以参考《Full property table》。 这些要点有很多不现实的地方，因为子选择符在实际操作中是必须要用到的，但是我们可以在达到效果的基础上利用这些要点来优化CSS代码。 这里有两篇Jon Sykes的文章，里面列出了不同规则对于渲染速度的影响，可以参考下： Testing CSS Performance Testing CSS Performance (pt 2) 此外，还在网上收集了一些CSS优化的规则，也列出来： 十六进制的颜色值对位数与大小写：建议用#FFFFFF，而不要用简写#fff，因为十六进制的颜色值默认标准是大写及6位数标注，在未知情况下不希望冒险而降低了渲染的效率。 用display与visibility隐藏的差异：建议用display:none来隐藏元素，display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。 border:none;与border:0;的区别：建议用border:none;，和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。 不宜过小的背景图片平铺：不赞成宽高8px以下的平铺背景图片。 IE的滤镜：不建议使用IE的滤镜，不仅消耗资源，也有兼容问题。