フロント実装のゆるゆるTips(html5 / jQuery)
こんぬるわ(某書店ポップ担当さんリスペクト)、光永です。
最近ようやっとコードレビュー文化が根付いてきた弊社ですが、
ゆるっと技術記事として、近々の指摘事項で上げたもろもろをまとめておきます。
お気づきでしょうが社内共有兼用。
1. HTML5の新要素 legend
Formのタグに <legend></legend>
が追加されました。
用途は以下の通り。
http://www.htmq.com/html5/legend.shtml
legend
フォーム自体がlabel要素を使うフォームの名称表示に使う。
checkbox
radio
など。
<legend>色</legend>
<input id="color1" type="checkbox"/><label for="color1">赤</label>
<input id="color2" type="checkbox"/><label for="color2">青</label>
label
これまで通り。
<label>名前</label>
<input type="text">
2. jQuery 値の取り方・入れ方
参考:https://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1
※似たようなメソッドがあります
// select, checkbox/radio以外のinput: 1で取得
// 1. <input value="{ これ }" /> をとります
$el.val();
// checkbox, radio(= valueは固定値): 3で取得
// 2. <input checked /> の checkedがhtml描画時に書かれているかどうか?を取ります
$el.attr('checked');
// 3. inputの、指定された項目(プロパティ)の状態を取得します
$el.prop('checked');
3. jQuery loop処理の速度
参考: http://dsuket.hatenablog.com/entry/2013/06/04/143521
for
が最速。
var $inputs = $('.js-input');
// eachでかくと
$inputs.each(function () {
// something to do ...
});
// forでかくと
for (var i=0; i<$inputs.length; i++) {
$inputs.eq(i);
// something to do...
}
以上、なにかのお役に立てれば幸い。
光永でした。