[jQuery]class属性の操作

jQueryを使用して、html要素のclass属性を操作する方法

class属性に、任意のクラスを追加

addClassメソッドを使用して、クラスを追加出来る。

以下の例では、input要素すべてに「className」というクラスを追加しています。

$(function () {
  $('input').addClass('className');
});

複数のクラスを追加したい場合には、スペースで区切って複数のクラス名を列挙してあげるとよい。
もしくは、addClass('class1').addClass('class2')のようにメソッドチェイン呼び出しにしてあげるとよい。
個人的には、後者の方が好み。いくつのクラスが追加されてるか分かるし、クラス名を単独になるから可読性高くなるし。

class属性から、任意のクラスを削除

removeClassメソッドを使用して、クラスを削除することが出来る。

基本的な使い方は、addClassと同じ。

以下の例では、input要素から「className」というクラスを削除しています。

$(function () {
  $('input').removeClass('className');
});

イベントを拾ってclassの有無を切り替える

イベントに応じて特定のクラスを削除したり、追加したりする方法。
例えば、input:textにフォーカスがあたっている場合、背景色を変更するクラスを追加して、フォーカスが外れた場合に削除したりする場合に使える。
addClassとremoveClassを組み合わせて使用したら出来るけど、toggleClassというメソッドが用意されているので、こちらを使った方が見通しがよくなる。

この例は、フォーカスがあたった場合と外れた場合に、changeTextColorファンクションを呼び出しています。
呼び出し先のメソッドでは、toggleClass('active')となっているので、「active」クラスがあればクラス属性から削除され、なければ追加されます。

$(function () {
  $('input:text').focusin(changeTextColor).focusout(changeTextColor);
});
function changeTextColor() {
  $(this).toggleClass('active');
}

指定されたクラスがclass属性にあるかチェック

hasClassメソッドを使用してテストできる。

$(function () {
  $('input').hasClass('className');
});

[jQuery]テーブルの行の背景色を交互に変更する方法

trのoddとevenでひろってきて、cssで背景色を変えることが出来る。
テーブルのレコードを表すtrタグと、奇数(odd)、偶数(even)番目を表すselectorを
組み合わせて使うことで割と簡単に実現出来る。

    $(function() {
        // trの中で奇数番目のものを対象にする
        $('tr:odd').css({
            backgroundColor:'#aaaaaa'
        });
        // trの中で偶数番目のものを対象にする
        $('tr:even').css({
            backgroundColor:'#ffffff'
        });
    });

[JavaScript]checkboxのチェックをクリアする

特定のdiv要素のボタンがクリックされたら、そのdiv要素内のcheckboxのチェックを外す方法。

jQueryを使うとこんな感じで出来るみたい。

[JavaScript]文字列のtrim

jQueryのtrim関数を使用してtrimできる。

// jQueryのtrim関数を使用してtrimする。
$.trim("trimしたい文字列");

JavaScript本格入門を読んだよ

JavaScriptを使う必要に迫られたので、読んでみた。
JavaScript書くなんてかなり久しぶりでちゃんと理解しとかないとと思い、Amazonレビューでも良さげそうだったこの本にしてみた感じです。



読んでみた感じは、内容はそんなこくないとは思うけど、図とかを使い端的に説明していて非常に分かりやすかったかなと思います。
ただ、サブタイトルにあるajaxやjqueryだったりの部分は、この本で学ぶのは期待しない方がよいと思います。
あくまでも、ajaxってなに？どんなことができるの？ってことを知れたり、jqueryを使うとどれぐらい簡単にajaxを実現出来るかを知れる程度だと思います。
（jqueryの専門書が出てる訳で、この本だけでjqueryも理解出来るって思う方が間違ってると思います。）

[JavaScript]フォーカスが外れたタイミングで合計を自動計算

フォーカスが外れたタイミングで、任意のinputの値を合計してinputタグのvalue属性に出力してみた。

JavaScriptのソース。いけてるかどうかは分かりませんが・・・

$(':input[class*=autoSum-]').focusout(
    function () {
      var classes = $(this).attr('class').match(/autoSum-[^ ]*/g);
      for (var i = 0; i < classes.length; i++) {
        var className = classes[i];
        className.match(/autoSum-(.*)/);
        var target = RegExp.$1;
        var inputs = $(':input[class*=' + className + ']');
        var total = 0;
        for (var j = 0; j < inputs.length; j++) {
          var inputVal = inputs[j].value;
          if (inputVal != undefined && inputVal != '' && !isNaN(inputVal)) {
            total += parseInt(inputVal);
          }
        }
        $('input:[class*=total-' + target + ']').val(total);
      }
    }
);

上記のJavaScriptを使って、合計を自動設定するhtmlの例

[Intellij]InttelijでjQueryを使ってみよう

IntelliJ IDEA Ultimate EditionではjQueryをサポートしているので、関数補完などを使いながら開発を行うことができます。
IDEでごりごり書いた方が、生産性あがるはずなので、IntellijでのjQueryライブラリの使い方を調べてみたと。

jQueryのライブラリを自分でダウンロードする場合

1.jQueryのサイトからjQueryのライブラリをダウンロードして任意のディレクトリに保存する。

2.Project Structure画面を開く

3.左側のメニューからGlobal Librariesを選択する。

4.「+ボタン」→「JavaScript」の順に選択する。（下の画像のように選択していく）

5.1で保存したjQueryのライブラリ(jquery-<バージョン番号>.js)を選択する。

6.左側のメニューからModulesを選択する。

7.jQueryを使用するModuleを選択して、依存ライブラリに5で追加したjQueryのライブラリを登録する。
登録すると下の画像のようにjQueryのライブラリが依存ライブラリにでてきます。
※Dependenciesタブを選択し、左下の「+ボタン」→「Library...」から5で登録したライブラリを選択出来ます。

Intellijの機能でダウンロードする場合

Inttelijには、JavaScriptのライブラリをダウンロードしてくれる機能があるので、
この機能を使うと依存ライブラリの設定まで簡単に行うことが出来ます。

1.Settings画面を開く

2.左側のメニューからJavaScriptLibrariesを選択する。(Project Settingsにあります)

3.Download from...のリンクをクリックしDownload LibraryのWindowでjQueryを選択してダウンロードする。（ちょっと古いバージョンみたいです。）
これで、依存ライブラリとしてjQueryのライブラリが設定されます。簡単ですね。

動作を確認してみよう

補完がちゃんと有効になってるみたい。使いやすいかわからないけど、とりあえずjQueryの勉強しつつ使ってみよう。