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.扩展 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)');

3.禁用 Textarea 的大小改变

有些时候你不需要用户可以改变多行文本输入口 textarea 的大小，可是一些基于 Webkit 的浏览器（例如 safari 和 chrome）就可以让用户随意更改 textarea 大小，好在你可以禁用这个特性：

     textarea {
          resize: none
      }

4.使用 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;
      }

5.编写一个简单的 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);