Web 開発に役立つ 9 つのヒント-htmlチュートリアル-php.cn

Web 開発に役立つ 9 つのヒント

巴扎黑

リリース： 2017-03-19 17:26:26

オリジナル

1322 人が閲覧しました

この記事では、Web 開発で頻繁に使用する必要がある 9 つの便利な HTML、CSS、JavaScript のヒントとコツを紹介します。そのうちのいくつかは HTML5 と CSS3 に関するもので、フロントエンド開発者であれば、それが当てはまるかもしれません。あなたに役立つものもあります。

tips and tricks

1. html5のplaceholder属性を利用する

以前は、HTML5 でプレースホルダー属性の機能を実装するには、多くの JavaScript コードを作成する必要がありました。入力ボックスにフォーカスがない場合は特定のプロンプトメッセージが表示され、入力が得られるとプロンプトメッセージが自動的に消去されます。この属性の参照は現在、Opera 11 以降、Firefox 9 以降、Safari 5 以降、IE 10 以降でサポートされていますが、以下のコードはプレースホルダーをサポートしていないブラウザにも適用できます:

// jQuery code
var i = document.createElement("input");
 
// Only bind if placeholder isn&#39;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. フォントフェイスを使用します

フォントフェイスを使用して、ほとんどのブラウザーをサポートする、より優れた独自のフォントを使用できます: Opera 11 以降、Firefox 3 以降、Safari 5、IE6 以降

@font-face {
    font-family: &#39;MyWebFont&#39;;
    src: url(&#39;webfont.eot&#39;); /* IE9 Compat Modes */
    src: url(&#39;webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), /* IE6-IE8 */
         url(&#39;webfont.woff&#39;) format(&#39;woff&#39;), /* Modern Browsers */
         url(&#39;webfont.ttf&#39;)  format(&#39;truetype&#39;), /* Safari, Android, iOS */
         url(&#39;webfont.svg#svgFontName&#39;) format(&#39;svg&#39;); /* Legacy iOS */
    }
     
body {
       font-family: &#39;MyWebFont&#39;, Fallback, sans-serif;
}

ログイン後にコピー

3. ボックスのサイズ設定

まあ、これが最近の私のお気に入りの CSS プロパティだと思います。レイアウトの問題を解決できます。たとえば、テキストフィールドのパディングを追加すると、幅はテキストボックスの幅 + パディングになりますが、これは煩わしく、通常はレイアウトを壊します。しかし、このプロパティを使用することで、この問題は解決されます。

サポートされているブラウザ: 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 のサイズを変更する必要がない場合もありますが、一部の 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&#39;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&#39;ll stick to $ (I like dollar sign: ) )      
})(jQuery);

ログイン後にコピー

8. jQueryセレクターの機能を拡張

jQuery.expr[&#39;:&#39;].regex = function(elem, index, match) {
    var matchParams = match[3].split(&#39;,&#39;),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ?
                        matchParams[0].split(&#39;:&#39;)[0] : &#39;attr&#39;,
            property: matchParams.shift().replace(validLabels,&#39;&#39;)
        },
        regexFlags = &#39;ig&#39;,
        regex = new RegExp(matchParams.join(&#39;&#39;).replace(/^s+|s+$/g,&#39;&#39;), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
 
/******** Usage ********/
 
// Select all elements with an ID starting a vowel:
$(&#39;:regex(id,^[aeiou])&#39;);
  
// Select all ps with classes that contain numbers:
$(&#39;p:regex(class,[0-9])&#39;);
  
// Select all SCRIPT tags with a SRC containing jQuery:
$(&#39;script:regex(src,jQuery)&#39;);

ログイン後にコピー