| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
openkk
12年前发布

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

在本文中,我们给出 9 个有用的 HTML、CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开发者,那么或许对你有些用处。

tips and tricks

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

9. 优化并降低 PNG 图像文件的大小

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

结论

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

英文原文,OSCHINA原创翻译

 本文由用户 openkk 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1338883595047.html
前端技术 Web开发