【转载】Web 开发中 9 个有用的提示和技巧

标签： HTML5 技术博文 HTML5学习资源 | 发表时间：2012-09-04 12:18 | 作者：HTML5研究小组

出处：http://www.mhtml5.com

在本文中，我们给出 9 个有用的 HTML、CSS 和 JavaScript 的技巧和提示，可能在做 Web 开发中经常会需要用到的，其中有几个是关于 HTML5 和 CSS3 的，如果你是一个前端开发者，那么或许对你有些用处。

1. 使用 html5 的 placeholder 属性

以前我们经常要写不少JavaScript 的代码来实现现在HTML5 的 placeholder 属性的功能，一个输入框在没获取焦点时显示某个提示信息，当获得输入焦点就自动清除提示信息，目前支持该属性的浏览器有：Opera 11+, Firefox 9+, Safari 5+, IE 10+，不过下面提供的代码对于不支持 placeholder 的浏览器也适用：

// jQuery code
var i = document.createElement(“input”);
// Only bind if placeholder isn’t natively supported by the browser
if (!(“placeholder” in i)) {
$(“input[placeholder]“).each(function () {
var self = $(this);
self.val(self.attr(“placeholder”)).bind({
focus: function () {
if (self.val() === self.attr(“placeholder”)) {
self.val(“”);
}
},
blur: function () {
var label = self.attr(“placeholder”);
if (label && self.val() === “”) {
self.val(label);
}
}
});
});
}
<!– html5 –>
<input type=”text” name=”search” placeholder=”Search” value=”">

复制代码

2. 使用 font face

你可以通过 font face 来使用一些更好的独特的字体，支持多数浏览器：Opera 11+, Firefox 3+, Safari 5, IE6+

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}
body {
font-family: ‘MyWebFont’, Fallback, sans-serif;
}

复制代码

3. Box Sizing

好吧，我会说这是我最近最喜欢的CSS属性。它可以解决布局问题。例如，当您添加一个textfield填充，宽度将是文本框的宽度+填充，这很烦人，它通常将打破布局。然而，通过使用这个属性，它解决了这个问题。
支持的浏览器：Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

复制代码

4. 禁用 Textarea 的大小改变

有些时候你不需要用户可以改变多行文本输入口 textarea 的大小，可是一些基于 Webkit 的浏览器（例如 safari 和 chrome）就可以让用户随意更改 textarea 大小，好在你可以禁用这个特性：

textarea {
resize: none
}

复制代码

5.jQuery.trim()

用来去除字符串前后的空格：

$.trim(” a lot of white spaces, front and back! “);

复制代码

6. jQuery.inArray()

用来判断某个元素是否在数组之中：

var arr = [ "xml", "html", "css", "js" ];
$.inArray(“js”, arr);

复制代码

7. 编写一个简单的 jQuery 插件（模板）

//You need an anonymous function to wrap around your function to avoid conflict
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin’s name
pluginname: function() {
//options
var defaults = {
option1: “default_value”
}
var options = $.extend(defaults, options);
//a public method
this.methodName: function () {
//call this method via $.pluginname().methodName();
}
//Iterate over the current set of matched elements
return this.each(function() {
var o = options;
//code to be inserted here
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace “$” SIGN. But, we’ll stick to $ (I like dollar sign: ) )
})(jQuery);

复制代码

8. 扩展 jQuery 选择器的功能

jQuery.expr[':'].regex = function(elem, index, match) {
var matchParams = match[3].split(‘,’),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(‘:’)[0] : ‘attr’,
property: matchParams.shift().replace(validLabels,”)
},
regexFlags = ‘ig’,
regex = new RegExp(matchParams.join(”).replace(/^s+|s+$/g,”), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
/******** Usage ********/
// Select all elements with an ID starting a vowel:
$(‘:regex(id,^[aeiou])’);
// Select all DIVs with classes that contain numbers:
$(‘div:regex(class,[0-9])’);
// Select all SCRIPT tags with a SRC containing jQuery:
$(‘script:regex(src,jQuery)’);

复制代码

9. 优化并降低 PNG 图像文件的大小

你可以通过降低颜色数来降低png文件的大小，详情请看 PNG file optimization

结论

前端开发是一个非常有趣的领域，我们永远不能能学到一切。每次我工作的一个新项目，我总是觉得自己发现一些新的或奇怪的东西。我觉得这几个技巧，将是非常方便和有用的;)

英文原文， OSCHINA原创翻译

web app开发技巧总结（share）

- - 移动开发 - ITeye博客

web app开发技巧总结（share）. 　　（转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08）. 自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备).

Web开发者应掌握的12个Firebug技巧

- - 搜索引擎技术博客

相信很多从事Web开发工作的开发者都听说和使用过Firebug，但可能大部分人还不知道，其实它是一个在网页设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试. 它是Firefox浏览器的一个插件，所以建议各位Web开发者，要充分利用FireFox浏览器和Firebug插件进行日常的调试工作.

在本文中，我们给出 9 个有用的 HTML、CSS 和 JavaScript 的技巧和提示，可能在做 Web 开发中经常会需要用到的，其中有几个是关于 . CSS3 的，如果你是一个前端开发者，那么或许对你有些用处. 使用 html5 的 placeholder 属性. 以前我们经常要写不少JavaScript 的代码来实现现在HTML5 的 placeholder 属性的功能，一个输入框在没获取焦点时显示某个提示信息，当获得输入焦点就自动清除提示信息，目前支持该属性的浏览器有：Opera 11+, Firefox 9+, Safari 5+, IE 10+，不过下面提供的代码对于不支持 placeholder 的浏览器也适用：.

【转载】Web 开发中 9 个有用的提示和技巧

相关 [web 开发技巧] 推荐：

web app开发技巧总结（share）

Web开发者应掌握的12个Firebug技巧