Web开发中9个有用的提示和技巧

　　在本文中，我们给出 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)');

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

结论

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

英文原文：9-useful-tips-and-tricks-for-web-developers

欢迎大家阅读《Web开发中9个有用的提示和技巧》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)