1.通过方法返回Jquery对象实例 //用 var someDiv = $(‘#someDiv’).hide(); //代替 var someDiv = $(‘#someDiv’); someDiv.hide(); 2.使用find来查找 //用 $(‘#someDiv’).find(‘p.someClass’).hide(); //代替 $(‘#someDiv p.someClass’).hide(); 因为可以不必触发Jquery的Sizzle引擎,同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符 3.不要滥用$(this) //用 $(‘#someAnchor’).click(function() { alert( this.id ); }); //代替 $(‘#someAnchor’).click(function() { alert($(this).attr(‘id’)); }); 4.ready的简写形式 //用 $(function() { }); //代替 $(document).ready(function() {}); 5.让你的代码安全 //方法1(使用noConflict) var j = jQuery.noConflict(); j(‘#someDiv’).hide(); // The line below will reference some other [...]
转载:http://coolshell.cn/articles/4795.html 原文在这里 学习HTML 5编程和设计 ★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard – Mozilla,效果很炫。 WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。 ★ StackOverflow : 大名鼎鼎的技术问答式论坛。 ★ Addyosmani, jQuery 和 JavaScript 文章教程 Sohtanaka, jQuery 和 JavaScript 文章和教程 ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站,提供各种技术教程和文章,覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails. Codrops, 教程和 web 资源 WebAppers, 最好的开源资源 Tutorialzine [...]
PIE是一个可以让IE6、IE7、IE8支持CSS3的圆角、阴影和渐变的效果。它可以选择使用.htc hack或者JS hack。 网址:http://css3pie.com/ 一、使用.htc hack (
这几天在做一个页面的时候,发现了一个很奇异的问题,同一个div,在firefox下面的宽度貌似总是比较小,有点诡异。排查了一下,发现是inline-bolck的问题,这里查看测试页面.代码如下: html: <div class=”box”> <a href=”#”>a</a> <a href=”#”>b</a> <a href=”#”>b</a> <a href=”#”>d</a> <a href=”#”>e</a> </div> <div class=”clear”></div> <div id=”txt”> <p>外层box宽度: <span id=”t1″>0</span></p> <p>内层a链接宽度: <span id=”t2″>0</span></p> </div> css: .box{float:left; padding:10px; background:#f4f4f4;} .box a{display:inline-block; width: 30px; height:30px; padding:10px; border:5px solid #ccc; background:#fff;} .clear{clear:both;} 每个浏览器都对inline-bolck的元素都有一个外边距,IE的和Firefox、chrome等都不一样。具体如下图: 解决方法也很容易,把display-block改成float:left;就可以了。
CSS3 PIE 能令 IE6 – 8 支持css3的圆角、阴影及渐变的 .htc hack。 没有试过,记录一下,改天有空试一下。 网址:http://css3pie.com/
整理一下最近发现的css Hack 1.IE浏览器 selector { padding: 10px; padding: 9px\9; /* all ie */ padding: 8px\0; /* ie8-9 */ *padding: 5px; /* ie6-7 */ +padding: 7px; /* ie7 */ _padding: 6px; /* ie6 */ } 2.firefox浏览器(比较少用) /* 针对firefox2或者更老版本 */ body:empty .selector { color: red; } /* firefox 3 */ html>/**/body .selector, x:-moz-any-link, x:default { color: red; [...]