在本文中,我们给出 9 个有用的 HTML、CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开发者,那么或许对你有些用处。
1. 使用 html5 的 placeholder 属性
以前我们经常要写不少JavaScript 的代码来实现现在HTML5 的 placeholder 属性的功能,一个输入框在没获取焦点时显示某个提示信息,当获得输入焦点就自动清除提示信息,目前支持该属性的浏览器有:Opera 11+, Firefox 9+, Safari 5+, IE 10+,不过下面提供的代码对于不支持 placeholder 的浏览器也适用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 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+
1
2
3
4
5
6
7
8
9
10
11
12
|
@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+
1
2
3
4
5
|
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 大小,好在你可以禁用这个特性:
1
2
3
|
textarea {
resize: none
}
|
5.jQuery.trim()
用来去除字符串前后的空格:
1
|
$.trim( " a lot of white spaces, front and back! " );
|
6. jQuery.inArray()
用来判断某个元素是否在数组之中:
1
2
|
var
arr = [ "xml" , "html" , "css" , "js"
];
$.inArray( "js" , arr);
|
7. 编写一个简单的 jQuery 插件(模板)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
//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 选择器的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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
结论
前端开发是一个非常有趣的领域,我们永远不能能学到一切。每次我工作的一个新项目,我总是觉得自己发现一些新的或奇怪的东西。我觉得这几个技巧,将是非常方便和有用的;)
转载于:https://blog.51cto.com/yemings/1008065