Close icon

アトトックラボ

2017月11日27日

jQuery プラグインを定義してみる

jQuery は重いけど嫌いじゃないです。

重い重いって言われながら、もう何年にもわたって第一線にいるわけでは、jQuery からの依存を100%断つことはなかなか難しい。逆にどっかで jQuery が何かしらの形で使われていれば、Yet Another な部分でも jQuery 使っておいた方がいい気もします・・・なんて独白はおいておきまして。とりあえず、Rails + Bootstrap でウェブなアプリを作れば意図的に外さない限り jQuery は使うことになりますし。

一応、jQuery プラグインの最低限の仕組みだけ理解しておきましょう。

jQuery.fn.NameOfPlugin = function() {
    this.change( function () {
      console.log($(this).val());
    })
};

NameOfPlugin 部分がプラグインの名前になります。

上のコードを $(input[type=text]) なDOMに適用してやると、入力されているテキストが変更された時にログを履くようになります。

  $( function () {
    $('input[type=text]').NameOfPlugin();
  });

あくまで基本的な定義の仕方ってだけのサンプルなので、そこに意味は求めないでください。

2017月11日15日

jQuery でチェックボックスの状態を取得/設定する

jQuery でチェックボックスの状態を取得したり設定したり、結構よく使うのに方法がいろいろあったりします。ただ現時点(2017年11月)での最適解はおそらく今回紹介するもの。

<input type="checkbox" name="checkbox_1" checked>
<input type="checkbox" name="checkbox_2">

チェックボックスがチェックされているかを取得する。

// 便宜的に式で評価してみる
if ( $('input[name=checkbox_1]').prop('checked') ) {
  console.log('true');
} else {
  console.log('false');
}

// 別に以下でも確認できる
console.log( $('input[name=checkbox_1]').prop('checked') );

jQuery のセレクタで書いている部分はお好きに。

次にセレクタで指定したチェックボックスにチェックを入れる。

$('input[name=checkbox_2]').prop('checked', true);

最後に同じ方法でセレクタで指定したチェックボックスのチェックを外す。

$('input[name=checkbox_2]').prop('checked', false);

このくらいはテンプレ的に覚えておくと便利です。


アトトックラボとは

株式会社アトトックメンバー が技術の話、デザインの話、キャラクターの話、ときどき脱線してガジェットの話やライフハックの話など好きなことを書いています。


連載記事


最近の記事


タグ