zoukankan      html  css  js  c++  java
  • Web 开发中 9 个有用的提示和技巧

    在本文中,我们给出 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
    02 var i = document.createElement("input");
    03   
    04 // Only bind if placeholder isn't natively supported by the browser
    05 if (!("placeholder" in i)) {
    06     $("input[placeholder]").each(function () {
    07         var self = $(this);
    08         self.val(self.attr("placeholder")).bind({
    09             focus: function () {
    10                 if (self.val() === self.attr("placeholder")) {
    11                     self.val("");
    12                 }
    13             },
    14             blur: function () {
    15                 var label = self.attr("placeholder");
    16                 if (label && self.val() === "") {
    17                     self.val(label);
    18                 }
    19             }
    20         });
    21     });
    22 }
    23   
    24 <!-- html5 -->
    25 <input type="text" name="search" placeholder="Search" value="">

    2. 使用 font face

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

    01 @font-face {
    02     font-family: 'MyWebFont';
    03     src: url('webfont.eot'); /* IE9 Compat Modes */
    04     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    05          url('webfont.woff') format('woff'), /* Modern Browsers */
    06          url('webfont.ttf' format('truetype'), /* Safari, Android, iOS */
    07          url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    08     }
    09       
    10 body {
    11        font-family: 'MyWebFont', Fallback, sans-serif;
    12 }

    3. Box Sizing

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

    支持的浏览器: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. 禁用 Textarea 的大小改变

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

    1 textarea {
    2     resize: none
    3 }

    5.jQuery.trim()

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

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

    6. jQuery.inArray()

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

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

     

    7. 编写一个简单的 jQuery 插件(模板)

    01 //You need an anonymous function to wrap around your function to avoid conflict
    02 (function($){
    03    
    04     //Attach this new method to jQuery
    05     $.fn.extend({
    06            
    07         //This is where you write your plugin's name
    08         pluginname: function() {
    09    
    10             //options
    11             var defaults = {
    12                 option1: "default_value"
    13             }
    14               
    15             var options = $.extend(defaults, options);
    16    
    17             //a public method
    18             this.methodName: function () {
    19                 //call this method via $.pluginname().methodName();
    20             }
    21    
    22             //Iterate over the current set of matched elements
    23             return this.each(function() {
    24                
    25                 var o = options;
    26                
    27                 //code to be inserted here
    28                
    29             });
    30         }
    31     });
    32        
    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 选择器的功能

    01 jQuery.expr[':'].regex = function(elem, index, match) {
    02     var matchParams = match[3].split(','),
    03         validLabels = /^(data|css):/,
    04         attr = {
    05             method: matchParams[0].match(validLabels) ?
    06                         matchParams[0].split(':')[0] : 'attr',
    07             property: matchParams.shift().replace(validLabels,'')
    08         },
    09         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   
    14 /******** Usage ********/
    15   
    16 // Select all elements with an ID starting a vowel:
    17 $(':regex(id,^[aeiou])');
    18    
    19 // Select all DIVs with classes that contain numbers:
    20 $('div:regex(class,[0-9])');
    21    
    22 // Select all SCRIPT tags with a SRC containing jQuery:
    23 $('script:regex(src,jQuery)');

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

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

    结论

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

    英文原文,OSCHINA原创翻译

  • 相关阅读:
    go操作windows进程相关
    HTML5-格式化
    HTML5-属性
    关于sublime建立python工程的说明
    在Windows系统中安装matplotlib,需要注意的问题
    WPF combobox数据绑定和数据获取
    String的用法——其他功能
    String的用法——获取功能
    String的用法——判断功能
    String的用法——构造方法
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3663858.html
Copyright © 2011-2022 走看看