转载 推荐9个非常有用的开发技巧给Web开发者

在这篇文章中，我们将推荐9个非常有用的CSS，HTML和JavaScript开发窍门。如果你也是一个非常热爱前端开发的Web开发人员，那么这几个CSS3和Html5对你肯定非常有用。

tips and tricks

1.Html5  placeholder

一个非常有用的脚本创建，用于对字段标签中的占位符和普通的JavaScript之间切换，我知道，你可能会认为这个是多余的，但是如果你想给现代浏览器一个更加敏捷和干净的解决方案，那么你可以使用Html5 placeholder，可以从Franck Maurin获得这个脚本的。

支持的浏览器： Opera 11+， Firefox 9+，Safari 5+，IE 10+

  1. // jQuery code  
  2. var i = document.createElement("input");   
  3. // Only bind if placeholder isn't natively supported by the browser  
  4. if (!("placeholder" in i)) {  
  5.     $("input[placeholder]").each(function () {  
  6.         var self = $(this);  
  7.         self.val(self.attr("placeholder")).bind({  
  8.             focus: function () {  
  9.                 if (self.val() === self.attr("placeholder")) {  
  10.                     self.val("");  
  11.                 }  
  12.             },  
  13.             blur: function () {  
  14.                 var label = self.attr("placeholder");  
  15.                 if (label && self.val() === "") {  
  16.                     self.val(label);  
  17.                 }  
  18.             }  
  19.         });  
  20.     });  
  21. }  
  22. <!-- html5 --> 
  23. <input type="text" name="search" placeholder="Search" value=""> 

2. font face

该使用些什么，让那些糟糕的网页字体变的更好和独具特色呢？你现在可以使用font-face。有人说，可以使用谷歌的字体服务，但是如果你想自己控制字体，你就使用字体发生器@font-face，在你的Web网页中使用下面的CSS代码。

支持的浏览器：Opera 11+， Firefox 3+， Safari 5，IE6+

  1. @font-face {  
  2.     font-family: 'MyWebFont';  
  3.     src: url('webfont.eot'); /* IE9 Compat Modes */  
  4.     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
  5.          url('webfont.woff') format('woff'), /* Modern Browsers */  
  6.          url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */  
  7.          url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */  
  8.     }  
  9. body {  
  10.        font-family: 'MyWebFont', Fallback, sans-serif;  
  11. }    

3.Box Sizing

这是我近期最喜欢的一个CSS属性了，它可以帮你解决布局问题，例如，当你向textfield里面填充时，那个宽度将会变成textfield的宽度加上padding的宽度，这样的话，布局通常就会被破坏，而且很让人感到苦恼。然而，你只要使用这个属性，类似的问题就会被解决。更多的例子，你可以从CSS Trick Box Sizing上阅读。

支持的浏览器：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.禁止对Textare进行调整

有时，你只想textarea在Safari和Chrome中禁用调整大小功能，使其他浏览器保持一致，下面将教你怎么做：

支持的浏览器：Webkit browser only (Chrome and safari)

  1. textarea {  
  2.     resize: none  
  3. } 

5. jQuery.trim()

上次，我一直在寻找一个能去掉空格的函数，却没想到jQuery早已经把这个函数封装成起来了，如果你想去掉字符串前后那些空白字符，这个方法就可以派上用场了。

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

6. jQuery.inArray()

这是一个与Javascript里面的indexOf()很相似的一个方法。如果你知道PHP，这个方法基本上是做同样的事情，它看起来就像是大海捞针，但一旦被发现，这个方法就会返回一个布尔值true。

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

7. jQuery的插件模式

这是我最近阅读的最好的一篇文章了，谢谢Doug Avery，他写了一个fire patterns，你可以使用它去写jQuery插件。他们中的每一个都可以进行利与弊方面的比较，最后由你来决定使用哪个更合适。 与此同时，我自己也创建了一个简单的jQuery插件模式，或者你可以阅读我们“10个很棒的jQuery插件技巧”这篇文章。

  1. //You need an anonymous function to wrap around your function to avoid conflict  
  2. (function($){    
  3.     //Attach this new method to jQuery  
  4.     $.fn.extend({           
  5.         //This is where you write your plugin's name  
  6.         pluginname: function() {  
  7.     
  8.             //options  
  9.             var defaults = {  
  10.                 option1: "default_value"  
  11.             }              
  12.             var options = $.extend(defaults, options);  
  13.     
  14.             //a public method  
  15.             this.methodName: function () {  
  16.                 //call this method via $.pluginname().methodName();  
  17.             }  
  18.             //Iterate over the current set of matched elements  
  19.             return this.each(function() {               
  20.                 var o = options;              
  21.                 //code to be inserted here               
  22.             });  
  23.         }  
  24.     });  
  25. //pass jQuery to the function,  
  26. //So that we will able to use any valid Javascript variable name  
  27. //to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )        
  28. })(jQuery); 

8. 可扩展的jQuery选择器功能

James Padolsey创建了一些非常使用的jQuery选择器。你可以去他的网站上面进行一次全面的关于可扩展的jQuery选择器功能方面的学习，里面有很多好例子和好的想法，你可以选择一些看看。

这是我最近在项目中经常使用的一个，正则选择器。

  1. jQuery.expr[':'].regex = function(elem, index, match) {  
  2.     var matchmatchParams = match[3].split(','),  
  3.         validLabels = /^(data|css):/,  
  4.         attr = {  
  5.             method: matchParams[0].match(validLabels) ?  
  6.                         matchParams[0].split(':')[0] : 'attr',  
  7.             property: matchParams.shift().replace(validLabels,'')  
  8.         },  
  9.         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. /******** Usage ********/  
  14. // Select all elements with an ID starting a vowel:  
  15. $(':regex(id,^[aeiou])');  
  16.  // Select all DIVs with classes that contain numbers:  
  17. $('div:regex(class,[0-9])');    
  18. // Select all SCRIPT tags with a SRC containing jQuery:  
  19. $('script:regex(src,jQuery)'); 

9.最有效的方法去压缩和优化PNG图像

它并不是最近刚出来的新方法，但是它帮助我和其他人很多次，所以我决定再次拿出来分享一下以防你们错过。它基本上是通过色调分离来减少png图像的大小，你可以阅读我们的png文件压缩教程。（张红月/编译）

文章来源：queness

本文为CSDN编译整理，未经许可不得转载。如需转载请联系market@csdn.net。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huangjacky/p/2540378.html