在本文中，我们给出 9 个有用的 HTML、CSS 和 JavaScript 的技巧和提示，可能在做 Web 开发中经常会需要用到的，其中有几个是关于 HTML5 和 CSS3 的，如果你是一个前端开发者，那么或许对你有些用处。
1. 使用 html5 的 placeholder 属性
以前我们经常要写不少JavaScript 的代码来实现现在HTML5 的 placeholder 属性的功能，一个输入框在没获取焦点时显示某个提示信息，当获得输入焦点就自动清除提示信息，目前支持该属性的浏览器有：Opera 11+, Firefox 9+, Safari 5+, IE 10+，不过下面提供的代码对于不支持 placeholder 的浏览器也适用：
01 |
// jQuery code |
02 |
var i = document.createElement("input"); |
03 |
|
04 |
// Only bind if placeholder isn't natively supported by the browser |
05 |
if (!("placeholder" in i)) { |
06 |
$("input[placeholder]").each(function () { |
07 |
var self = $(this); |
08 |
self.val(self.attr("placeholder")).bind({ |
09 |
focus: function () { |
10 |
if (self.val() === self.attr("placeholder")) { |
11 |
self.val(""); |
12 |
} |
13 |
}, |
14 |
blur: function () { |
15 |
var label = self.attr("placeholder"); |
16 |
if (label && self.val() === "") { |
17 |
self.val(label); |
18 |
} |
19 |
} |
20 |
}); |
21 |
}); |
22 |
} |
23 |
|
24 |
<!-- html5 --> |
25 |
<input type="text" name="search" placeholder="Search" value=""> |
2. 使用 font face
你可以通过 font face 来使用一些更好的独特的字体，支持多数浏览器：Opera 11+, Firefox 3+, Safari 5, IE6+
01 |
@font-face { |
02 |
font-family: 'MyWebFont'; |
03 |
src: url('webfont.eot'); /* IE9 Compat Modes */ |
04 |
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
05 |
url('webfont.woff') format('woff'), /* Modern Browsers */ |
06 |
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ |
07 |
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ |
08 |
} |
09 |
|
10 |
body { |
11 |
font-family: 'MyWebFont', Fallback, sans-serif; |
12 |
} |
3. Box Sizing
好吧，我会说这是我最近最喜欢的CSS属性。它可以解决布局问题。例如，当您添加一个textfield填充，宽度将是文本框的宽度+填充，这很烦人，它通常将打破布局。然而，通过使用这个属性，它解决了这个问题。
支持的浏览器：Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+
1 |
textarea { |
2 |
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ |
3 |
-moz-box-sizing: border-box; /* Firefox, other Gecko */ |
4 |
box-sizing: border-box; /* Opera/IE 8+ */ |
5 |
} |
4. 禁用 Textarea 的大小改变
有些时候你不需要用户可以改变多行文本输入口 textarea 的大小，可是一些基于 Webkit 的浏览器（例如 safari 和 chrome）就可以让用户随意更改 textarea 大小，好在你可以禁用这个特性：
1 |
textarea { |
2 |
resize: none |
3 |
} |
5.jQuery.trim()
用来去除字符串前后的空格：
1 |
$.trim(" a lot of white spaces, front and back! "); |
6. jQuery.inArray()
用来判断某个元素是否在数组之中：
1 |
var arr = [ "xml", "html", "css", "js" ]; |
2 |
$.inArray("js", arr); |
7. 编写一个简单的 jQuery 插件（模板）
01 |
//You need an anonymous function to wrap around your function to avoid conflict |
02 |
(function($){ |
03 |
|
04 |
//Attach this new method to jQuery |
05 |
$.fn.extend({ |
06 |
|
07 |
//This is where you write your plugin's name |
08 |
pluginname: function() { |
09 |
|
10 |
//options |
11 |
var defaults = { |
12 |
option1: "default_value" |
13 |
} |
14 |
|
15 |
var options = $.extend(defaults, options); |
16 |
|
17 |
//a public method |
18 |
this.methodName: function () { |
19 |
//call this method via $.pluginname().methodName(); |
20 |
} |
21 |
|
22 |
//Iterate over the current set of matched elements |
23 |
return this.each(function() { |
24 |
|
25 |
var o = options; |
26 |
|
27 |
//code to be inserted here |
28 |
|
29 |
}); |
30 |
} |
31 |
}); |
32 |
|
33 |
//pass jQuery to the function, |
34 |
//So that we will able to use any valid Javascript variable name |
35 |
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) ) |
36 |
})(jQuery); |
8. 扩展 jQuery 选择器的功能
01 |
jQuery.expr[':'].regex = function(elem, index, match) { |
02 |
var matchParams = match[3].split(','), |
03 |
validLabels = /^(data|css):/, |
04 |
attr = { |
05 |
method: matchParams[0].match(validLabels) ? |
06 |
matchParams[0].split(':')[0] : 'attr', |
07 |
property: matchParams.shift().replace(validLabels,'') |
08 |
}, |
09 |
regexFlags = 'ig', |
10 |
regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags); |
11 |
return regex.test(jQuery(elem)[attr.method](attr.property)); |
12 |
} |
13 |
|
14 |
/******** Usage ********/ |
15 |
|
16 |
// Select all elements with an ID starting a vowel: |
17 |
$(':regex(id,^[aeiou])'); |
18 |
|
19 |
// Select all DIVs with classes that contain numbers: |
20 |
$('div:regex(class,[0-9])'); |
21 |
|
22 |
// Select all SCRIPT tags with a SRC containing jQuery: |
23 |
$('script:regex(src,jQuery)'); |
9. 优化并降低 PNG 图像文件的大小
你可以通过降低颜色数来降低png文件的大小，详情请看 PNG file optimization
扫描二维码关注公众号，回复：
684905 查看本文章
结论
前端开发是一个非常有趣的领域，我们永远不能能学到一切。每次我工作的一个新项目，我总是觉得自己发现一些新的或奇怪的东西。我觉得这几个技巧，将是非常方便和有用的;)