Web 开发中 9 个有用的提示和技巧（转）-优快云博客

本文分享了9个有用的HTML、CSS和JavaScript技巧，包括利用HTML5的placeholder属性、fontface字体、BoxSizing属性等，旨在提升Web开发效率与用户体验。此外，还介绍了如何禁用textarea大小改变、使用jQuery进行字符串操作、编写简单jQuery插件及优化PNG图像大小的方法。

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

var i = document.createElement("input"); 

  

    04// 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); 

                } 

            } 

        }); 

    }); 

    22}

  

    24<!-- html5 -->

<input type="text" name="search" placeholder="Search" value="">

2. 使用 font face

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

 
    01@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 */ 

    } 

      

    10body {

       font-family: 'MyWebFont', Fallback, sans-serif; 

    12}

3. Box Sizing

好吧，我会说这是我最近最喜欢的CSS属性。它可以解决布局问题。例如，当您添加一个textfield填充，宽度将是文本框的宽度+填充，这很烦人，它通常将打破布局。然而，通过使用这个属性，它解决了这个问题。

支持的浏览器：Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

 
    1textarea {

    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 大小，好在你可以禁用这个特性：

 
    1textarea {

    2     resize: none 

    3}

5.jQuery.trim()

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

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

6. jQuery.inArray()

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

 
var arr = [ "xml", "html", "css", "js" ]; 

$.inArray("js", arr);

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

 
    01//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 

               

            }); 

        } 

    }); 

       

    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 选择器的功能

 
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)); 

     12}

  

     14/******** Usage ********/

  

     16// Select all elements with an ID starting a vowel:

$(':regex(id,^[aeiou])'); 

   

     19// Select all DIVs with classes that contain numbers:

$('div:regex(class,[0-9])'); 

   

     22// Select all SCRIPT tags with a SRC containing jQuery:

$('script:regex(src,jQuery)');