ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます、脱線もします。

フォーム要素操作にjQueryのpropメソッドを使うかどうかの話

手段について

僕は今までチェックボックスとかを無効にしたり、
自動でチェック付けたりする際は
以下のようにjQueryのpropメソッドを使って
こんな感じにやってました。

$("#checkbox").prop("checked", true);



で、あらためてjsの勉強をしていると
できることは知ってたんですが、
jQueryを使わなくても思ったより手軽に書けるようでした。

$("#checkbox")[0].checked = true;



全て生のjsにすると
こんな感じですね。

document.getElementById("checkbox").checked = true;

checkeddisabledとかにすると色々いじれますね。

見た目の違いを考察してみた

うーん…代入の方が直感的な気がするけど、
jQueryセレクタを使おうとすると
若干の無理矢理感が否めない…。
長さは似たようなものですね、
2つ目が少し短い程度。

速度を比較してみた

ご用意しましたは以下のコード。

$(function() {
  // propメソッド10000回を計測
  console.time('prop');
  for(i=0; i< 10000; i++){
    $("#id").prop("checked", true);
  }
  console.timeEnd('prop')

  // 直接代入10000回を計測
  console.time('assignment');
  for(i=0; i< 10000; i++){
    document.getElementById("id").checked = true;
  }
  console.timeEnd('assignment')
});

2つの方法をそれぞれ10000回ずつ回して
計測してみました。結果はこんな感じ。

f:id:te-nu:20160229014603p:plain

propおそっ!
やっぱ生のjsのが速いんですなあ。
実際は誤差程度のものだと思いますけどね。
(1万回やって20msだし)
ってことで参考にしていただければ幸いです。
(検討する人いるのかコレ)

ちなみに最近はこの本で
jsのお勉強中です。
基礎固めるにはもってこいな感じ。

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

ではまた。